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>`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.