Published
Edited
Dec 3, 2020
md`# Json Data Attachment`
nycForecast = FileAttachment("canned-forecast.json").json()
fetch("https://api.weather.gov/gridpoints/OKX/33,37/forecast").then(response => response.json())
nycForecastPeriods = nycForecast.properties.periods
import {table} from "@tmcw/tables@513"
table(
nycForecastPeriods.slice(0, 7).map(
({ name, temperature, icon, detailedForecast, shortForecast }) => ({
Day: md`**${name}**`,
Temp: md`**${temperature} °F**`,
Icon: html`<img width=70 src="${icon}" />`,
Forecast: shortForecast
})
)
)
import { vl } from "@vega/vega-lite-api"
vl
.markCircle() // Make a plot of circles
.data(nycForecastPeriods) // Using the NYC forecast data
.encode(
vl
.x() // For the X axis
.fieldN('name') // Use "name"
.sort(null), // But don’t sort alphabetically
vl
.y() // For the Y axis
.fieldQ('temperature'), // Use "temperature"
vl
.color() // For the color
.fieldN('isDaytime') // Use "isDaytime"
)
.render() // Draw the plot
import {usaMapCoordinates} from "@jashkenas/inputs"
viewof coordinates = usaMapCoordinates({
value: [-122.27, 37.87], // The default location: Berkeley, CA.
width: 350,
title: "Pick a location, see the weather forecast"
})
coordinates
weatherStation = {
const [lng, lat] = coordinates;
return (await fetch(`https://api.weather.gov/points/${[lat, lng]}`)).json()
}
place = {
const {city, state} = weatherStation.properties.relativeLocation.properties;
return `${city}, ${state}`;
}
localForecast = (await fetch(weatherStation.properties.forecast)).json()
table(
localForecast.properties.periods.slice(0, 7).map(
({ name, temperature, icon, detailedForecast, shortForecast }) => ({
Day: md`**${name}**`,
Temp: md`**${temperature} °F**`,
Icon: html`<img width=70 src="${icon}" />`,
Forecast: detailedForecast
})
)
)
import { weatherChart } with { localForecast as forecast } from "@kerryrodden/simple-custom-weather-chart-in-d3"
weatherChart
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.
