Data visualization and hacktivism from Buenos Aires, Argentina.
(A Graph designer trying to code)
Published
Edited
Aug 30, 2020
data = d3.csvParse(await FileAttachment("us-population-state-age.csv").text(), (d, i, columns) => (d3.autoType(d), d.total = d3.sum(columns, c => d[c]), d)).sort((a, b) => b.total - a.total)
series = d3.stack()
.keys(data.columns.slice(1))
(data)
.map(d => (d.forEach(v => v.key = d.key), d))
x = d3.scaleLinear()
.domain([0, d3.max(series, d => d3.max(d, d => d[1]))])
.range([margin.left, width - margin.right])
y = d3.scaleBand()
.domain(data.map(d => d.name))
.range([margin.top, height - margin.bottom])
.padding(0.08)
color = d3.scaleOrdinal()
.domain(series.map(d => d.key))
.range(d3.schemeSpectral[series.length])
.unknown("#ccc")
xAxis = g => g
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x).ticks(width / 100, "s"))
.call(g => g.selectAll(".domain").remove())
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickSizeOuter(0))
.call(g => g.selectAll(".domain").remove())
formatValue = x => isNaN(x) ? "N/A" : x.toLocaleString("en")
height = data.length * 25 + margin.top + margin.bottom
margin = ({top: 30, right: 10, bottom: 0, left: 30})
d3 = require("d3@6")
import {rasterize, serialize} from "@mbostock/saving-svg"
html`<style>
textarea {
display: block;
boxSizing: border-box;
width: calc(100% + 28px);
font: var(--mono_fonts);
minHeight: 33px;
border: none;
padding: 4px 10px;
margin: 0 -14px;
background: rgb(247,247,249);
tabSize: 2;
}
textarea:focus {
outline: none;
}
</style>`
import {legend} from "@d3/color-legend"
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.
