Published
Edited
Jan 5, 2021
1 star
Also listed in…
CAP 6737
viewof duration = slider({
min: 1,
max: weatherForecastPeriods.length/2,
step: 1,
value: 5,
description: "days"
})
table(data)
{
let day = weatherForecastPeriods.filter(d=>d.isDaytime);
let night = weatherForecastPeriods.filter(d=>!d.isDaytime);
let trace_scatterDay = {
x: weatherForecastPeriods.map(d=>d.name),
y: weatherForecastPeriods.map(d=>(d.isDaytime)?d.temperature:null),
mode: 'markers',
marker: { size: 12 },
type: 'scatter',
name: 'Day Time'
};
let trace_scatterNight = {
x: weatherForecastPeriods.map(d=>d.name),
y: weatherForecastPeriods.map(d=>(!d.isDaytime)?d.temperature:null),
mode: 'markers',
marker: { size: 10 },
type: 'scatter',
name: 'Night Time'
};
let trace_lineDay = {
x: day.map(d=>d.name),
y: day.map(d=>d.temperature),
mode: 'lines',
type: 'scatter',
showlegend: false,
hoverinfo:'skip',
name: 'Day'
};
let trace_lineNight = {
x: night.map(d=>d.name),
y: night.map(d=>d.temperature),
mode: 'lines',
type: 'scatter',
showlegend: false,
hoverinfo:'skip',
name: 'Night'
};
var data = [trace_scatterDay, trace_scatterNight, trace_lineDay, trace_lineNight];
var layout = {
title: `Weekly Weather at ${place}`,
xaxis: {
//title: 'Day',
showgrid: false,
zeroline: false
},
yaxis: {
title: 'Temperature in °F',
showline: false
},
width: width
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout);
return div;
}
md `### Data`
md `**Current Location: ${place}**`
coords = new Promise((resolve, reject) => {
if (navigator.geolocation) navigator.geolocation.getCurrentPosition(
pos => resolve(pos.coords),
err => reject(Error(err.message))
);
else reject(Error('this browser does not support geolocation.'))
});
weatherStationQuery = {
const { latitude, longitude } = coords;
return (await fetch(
`https://api.weather.gov/points/${[latitude, longitude]}`
)).json();
}
place = {
const {city, state} = weatherStationQuery.properties.relativeLocation.properties;
return `${city}, ${state}`;
}
weatherForecast = fetch(`${weatherStationQuery.properties.forecast}`).then(response => response.json())
weatherForecastPeriods = weatherForecast.properties.periods
data = {
const data = weatherForecastPeriods.slice(0, duration*2);
// Covert long data to wide data
const newKeys = data.map(d=>d.name);
const oldKeys =["temperature", "icon", "shortForecast", "detailedForecast", "windSpeed", "windDirection", "temperatureTrend"];
const newData = oldKeys.map(oldKey => {
const row = {};
row["key↓"] = md`**${oldKey}**`;
newKeys.forEach((key,i) => {
switch(oldKey){
case "temperature": row[key] = md`**${data[i][oldKey]} °F**`; break;
case "icon": row[key] = html`<img width=70 src="${data[i][oldKey]}" />`; break;
case "temperatureTrend" : row[key] = md`${data[i][oldKey]?data[i][oldKey]:"-"}`; break;
default: row[key] = md`${data[i][oldKey]}`; break;
}
});
return row;
});
newData.columns = ["key↓", ...newKeys]
return newData;
}
md`### Imports`
import { slider } from "@jashkenas/inputs"
import {table} from "@tmcw/tables/2"
Plotly = require("plotly.js-dist") //Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
d3 = require("d3")
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.
