Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
Published
Edited
May 4, 2021
// Show a table of the data
Table(data)
// Create a horizontal bar chart showing the number of cases for each college
Plot.barX(data, { x: "cases_2021", y: "college" }).plot({
y: { domain: top_colleges, label: "" },
marginLeft: 160
})
// Create a horizontal bar chart showing the total number of cases for each state
Plot.barX(data, { x: "cases_2021", y: "state", fill: "college" }).plot({
y: { domain: state_order.map((d) => d.state) },
marginLeft: 160
})
// Create a scatter plot comparing the 2021 cases to the total cases for a given state
scatter = Plot.text(data.filter(d => d.state === state), {
x: "cases",
y: "cases_2021",
text: "college"
}).plot()
// Get the top 10 colleges in 2021
top_colleges = tidy(data, sliceMax(10, "cases_2021")).map((d) => d.college)
// Get a list of states / territories
states = tidy(data, distinct("state")).map(d => d.state)
// Sort the states by the total number of cases in 2021
state_order = tidy(
data,
groupBy("state", [summarize({ cases_2021: sum("cases_2021") })]),
arrange(desc("cases_2021"))
)
data = d3.csv("https://raw.githubusercontent.com/nytimes/covid-19-data/master/colleges/colleges.csv", d3.autoType)
d3 = require("d3")
import {Table, Select} from "@observablehq/inputs"
Plot = require("@observablehq/plot@0.1.0/")
import {
tidy,
arrange,
filter,
desc,
summarize,
groupBy,
sum,
distinct,
sliceMax
} from "@pbeshai/tidyjs"
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.
