Published
Edited
Jan 5, 2021
1 star
Plotly slider use IPlotly slider usePlotly InteractionD3 Quick OverviewColor Solids: RGB and HSLHCL color modelCone Spectral Sensitivity PlotsColor Blind SimulatorColorBlindLibHSV and HSL Color ModelsColor from Wavelength, Correlated Temperature and HTML color pickerPlotly Color UsagePlotlyJS GeoVisualizationGeoVisualizationVisual Cluster AnalysisAssignment 4 Data and related computationFetch Covid-19 dataWeb Scraping Table data from HTML file.1D Dataviz in PlotlyUS Baby NamesPlotly.Js: Getting Started with Old FaithfulData Fetch and Meta dataUseful Javascript Array functions.Useful D3 Functions for Data handlingIntroduction to Observable and PlotlyJSCAP 6737 Class Practice Notes
Weather Forecast
Also listed in…
General
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")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.