//TODO:
//1. IN WINTER IT SHOWS LOWEST TEMP AND IN SUMMER IT SHOWS HIGHEST TEMP
//2. Pressing the Button highlights days with that weather
Weekly = () => html`
<section class="week">
<h1 style="color:#e18000; font-weight:600;letter-spacing:10px;">${city
.split(',')[0]
.toUpperCase()}</h1>
<div class="days">
${WeeklyWeather}
</div>
</section>
</section>
<style>
.week {
width:80%;
height:${height / 2}px;
background:#181818;
position:relative;
margin:20px auto;
color:#e19646;
text-shadow:0 0 10px rgba(225,150,70,.5);
font-size:32px;
border-radius:7px;
box-shadow:
inset 0 1px 2px 1px rgba(255,255,255,.1), /* Shine */
inset 0 -4px 2px -3px rgba(255,255,255,.1), /* Bot. shine */
0 -1px 6px 4px #1b1d1f, /* Blurred border */
2px 2px 0 5px #1b1d1f, /* Border right */
-2px 2px 0 5px #1b1d1f, /* Border left */
0 0 0 7px #141516, /* Border shadow */
0 1px 0 7px rgba(255,255,255,.1);
overflow:hidden;
}
.week:before{
content:"";
width:500px;
height:500px;
position:absolute;
background:rgba(255,255,255,.2);
left:-55%;
top:-35%;
-webkit-transform:rotate(25deg);
-ms-transform:rotate(25deg);
transform:rotate(25deg);
background:linear-gradient(25deg,
rgba(255,255,255,0) 25%,
rgba(255,255,255,.1) 100%);
}
.week h1 {
text-align:center;
padding:20px 0;
border-bottom:2px solid #27292d;
font-weight:100;
min-width:100%;
}
.days {
box-sizing:border-box;
width:100%;
text-align:center;
margin-top:20px;
display:flex;
align-items:center;
justify-content:space-around;
}
.days span {
display:block;
text-align:center;
font-size:2rem;
font-weight:500;
width:100%;
border:1px solid #222;
position:relative;
}
.days span:before {
content:attr(data-degrees);
font-size:2rem;
font-weight:100;
display:block;
top:8rem;
text-align:center;
}
</style>
`
WeeklyWeather = WeeklyWeatherData.slice(-6).map(x => {
let { temperatureHigh, temperatureLow } = x;
let dayOfWeek = d3.timeParse('%s')(x.time);
let temp = ~~((temperatureHigh + temperatureLow) / 2);
let text = d3
.timeFormat('%a')(d3.timeParse('%s')(x.time))
.toUpperCase();
return `
<span data-degrees="${temp}°">${text}
<i class="wi wi-forecast-io-${x.icon}" style="margin-top:1rem;width:100%;display:block;"></i>
</span>`;
})
color({ value: '#e19646' })
getDate = () => {
let n = +d3.timeFormat('%d')(d3.timeParse('%Q')(Date.now()));
let ordinalRankSuffix =
n > 0
? ['th', 'st', 'nd', 'rd'][(n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10]
: '';
return n + `<sup>${ordinalRankSuffix}</sup>`;
}
new Date(1584417600000)
WeeklyWeatherData = data.daily.data.slice(-7)
Today = WeeklyWeatherData[1]
data = {
// sort of a magic number for the request url
let k = "ac365310cb6bb66a9881b98971ab88de";
yield await d3.json(
"https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/" +
k +
"/" +
location[city].join()
);
}
get_weather_keyworks = arr => [
...new Set([...d3.merge(arr.map(x => x.split('-').slice(1)))])
]
day_weather_keys = get_weather_keyworks(DayWeatherIcons)
night_weather_keys = get_weather_keyworks(NightWeatherIcons)
d3 = require('d3')
height = 640
import { select, slider, color } from '@jashkenas/inputs'
viewof bg2 = color({ value: '#212527' })
viewof bg1 = color({ value: '#2d3034' })
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
