nycForecast = FileAttachment("canned-forecast.json").json()
fetch("https://api.weather.gov/gridpoints/OKX/33,37/forecast").then(response => response.json())
nycForecastPeriods = nycForecast.properties.periods
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: detailedForecast
})
)
)
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
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
})
)
)
vl
.markCircle()
.data(localForecast.properties.periods)
.encode(
vl.x().fieldN('name').sort(null),
vl.y().scale(domain).fieldQ('temperature'),
vl.color().fieldN('isDaytime')
)
.render()
import { weatherChart } with { localForecast as forecast } from "@kerryrodden/simple-custom-weather-chart-in-d3"
weatherChart
domain = {
const temps = localForecast.properties.periods.map(d => d.temperature);
const high = Math.max.apply(Math, temps);
const low = Math.min.apply(Math, temps);
return {domain: [Math.min(low, 0), Math.max(high, 90)]};
}
function code(s) {
return html`<code style="white-space: nowrap;">${s}</code>`;
}
function caret() {
const c = caretImage.cloneNode(true);
c.style.verticalAlign = "middle";
return c;
}
caretImage = Object.assign(await FileAttachment("image@1.png").image(), {width: 18})
function run() {
return svg`<svg width="16" height="16" class="db bump" stroke-linejoin="round" fill="#3b5fc0"><path d="M11.7206 6.94335C12.2406 7.34365 12.2406 8.12786 11.7206 8.52816L5.60999 13.2321C4.95242 13.7383 4 13.2696 4 12.4397L4 3.03178C4 2.20194 4.95243 1.73318 5.60999 2.23937L11.7206 6.94335Z" stroke="#3b5fc0" stroke-width="1.6"></path></svg>`;
}
style = html`<style>
.table-2 table td,
.table-2 table th {
padding: 5px 10px;
}
</style>`
import {usaMapCoordinates} from "@jashkenas/inputs"
import {table} from "@tmcw/tables/2"
import {vl} from "@vega/vega-lite-api"
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.
