Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
Published
Edited
Jul 8, 2021
4 stars
raw_data = FileAttachment("counties_formatted.csv").csv({ typed: true })
Inputs.table(raw_data)
SummaryTable(raw_data)
data = aq
.from(raw_data)
.rename({ ps_gallons_person_day: "consump" })
.derive({ location: (d) => d.county_nm + ", " + d.state_name })
// .view()
top_consumers = data
.filter((d) => d.year === 2015)
.orderby(aq.desc("consump"))
.slice(0, 10)
// .view()
Plot.barX(top_consumers, {
x: "consump",
y: "location",
fill: "lightblue"
}).plot({
marginLeft: 150,
y: {
domain: top_consumers.column("location").data,
label: ""
}
})
Plot.plot({
marks: [
Plot.barX(top_consumers, {
x: "consump",
y: "location",
fill: "lightblue"
}),
Plot.text(top_consumers, {
x: "consump",
y: "location",
text: "consump",
dx: 15
})
],
marginLeft: 150,
y: {
domain: top_consumers.column("location").data,
label: ""
}
})
states = data
.dedupe("state_name")
.objects()
.map((d) => d.state_name)
data_2015 = data.filter((d) => d.year === 2015)
data_2015.view()
state_averages = data_2015
.groupby("state_name")
.rollup({ consump_avg: (d) => op.mean(d.consump) })
.orderby(aq.desc("consump_avg"))
.reify()
treeplot = Plot.plot({
marks: [
Plot.dot(data_2015, { x: "consump", y: "state_name" }),
Plot.tickX(state_averages, {
x: "consump_avg",
y: "state_name",
stroke: "red",
strokeWidth: 3
})
],
marginLeft: 100,
x: {
type: "log"
},
y: {
domain: state_averages.column("state_name").data
}
})
d3
map_data = state_averages.rename({ consump_avg: "value" }).objects()
drawStateMap(map_data)
gsap = require("gsap")
gsap.Back.easeIn()
import { SummaryTable } from "@observablehq/summary-table"
import { addTooltips } from "@mkfreeman/plot-tooltip"
import { aq, op } from "@uwdata/arquero"
import { drawStateMap } from "@mkfreeman/state-map"
import { chart, color } with {
collision_width as width,
collision_height as height
} from "@d3/collision-detection/2"
collision_width = 300
collision_height = 300
twitter_icon = svg`<svg width="20" height="20" viewBox="0 0 20 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.03168 14.5008C11.0694 14.5008 14.3718 9.49859 14.3718 5.16067C14.3718 5.01859 14.3718 4.87715 14.3622 4.73635C15.0047 4.27166 15.5593 3.69627 16 3.03715C15.4009 3.30263 14.7653 3.47672 14.1146 3.55363C14.7998 3.14338 15.3127 2.49813 15.5578 1.73795C14.9134 2.12032 14.2084 2.3898 13.4733 2.53475C12.9783 2.00847 12.3237 1.65998 11.6108 1.54321C10.8978 1.42644 10.1663 1.5479 9.52931 1.88879C8.89234 2.22968 8.38548 2.771 8.08716 3.42898C7.78884 4.08697 7.71569 4.82493 7.87904 5.52867C6.57392 5.46324 5.29715 5.12408 4.13161 4.53321C2.96607 3.94234 1.93782 3.11296 1.1136 2.09891C0.693819 2.82158 0.565248 3.67706 0.754066 4.49119C0.942885 5.30532 1.43489 6.01688 2.12992 6.48099C1.60751 6.46551 1.0965 6.32458 0.64 6.07011C0.64 6.08355 0.64 6.09763 0.64 6.11171C0.640207 6.86961 0.902567 7.60411 1.38258 8.19062C1.86259 8.77714 2.53071 9.17956 3.2736 9.32963C2.79032 9.46143 2.28325 9.4807 1.79136 9.38595C2.00113 10.0382 2.40951 10.6086 2.95941 11.0174C3.5093 11.4261 4.17319 11.6528 4.85824 11.6656C3.69583 12.5792 2.25988 13.0751 0.78144 13.0736C0.520258 13.0731 0.259331 13.0573 0 13.0263C1.50121 13.9896 3.24794 14.5006 5.03168 14.4983" fill="#3182bd"/>
</svg>`
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.
