Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published unlisted
Edited
Dec 12, 2019
{
const t = vl.markLine()
.data(clouds_data)
.encode(
vl.x().fieldT("date"),
vl.y().fieldQ("tmpf").scale({domain: [-20, 120]}),
vl.color().fieldN("clouds").scale(cloud_colors)
);
const v = vl.markLine()
.data(sensor_data)
.encode(
vl.x().fieldT("date"),
vl.y().fieldQ("value").scale({domain: [-20, 120]})
);
return vl.layer(v, t)
.width(width - 150)
.render();
}
sensor_data = (await FileAttachment("Temp-20191211-1616.json").json()).map(({created_at, value, ...d}) => ({date: new Date(created_at), value: +value, ...d}))
weather_data = d3.csvParse(await FileAttachment("FCM.txt").text(), ({valid, skyc1, ...d}) => d.tmpf === "M" ? null : {
date: asosDateTimeFormat(valid),
clouds: skyc1,
...d3.autoType(d)
})
asosDateTimeFormat = d3.timeParse("%Y-%m-%d %H:%M")
clouds = ["CLR", "FEW", "SCT", "BKN", "OVC", "VV"]
cloud_colors = ({
domain: clouds,
range: ["deepskyblue", "lightskyblue", "lightblue", "#aaaaaa", "#666666", "#666666"]
})
clouds_data = d3.cross(weather_data, clouds).map(([{tmpf, date, clouds}, c]) => ({date, clouds: c, tmpf: clouds === c ? tmpf : null}))
azureDateTimeFormat = d3.timeParse("%Y-%m-%d %H:%M:%S UTC")
d3 = require("d3-array@2", "d3-dsv@1", "d3-time@1", "d3-time-format@2")
import {vl} from "@vega/vega-lite-api"
import {printTable} from "@uwdata/data-utilities"
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.
