data = await FileAttachment("cars.json").json();
table(data)
d3.group(data, d => d.Year, d => d.Origin)
countryCountsMap = d3.rollup(data, v => v.length, d => d.Year, d => d.Origin)
countryCounts = d3.rollups(data, v => v.length, d => d.Year, d => d.Origin)
d3.select(html`<svg width=${width} height=250>`)
.call(svg => svg.selectAll("g")
.data(countryCounts)
.join("g")
.attr("transform", (j, indexJ) => `translate(0,${indexJ * 20})`)
.selectAll("circle")
.data(d => d[1])
.join("circle")
.attr("transform", (i, indexI) => `translate(${indexI * 20},0)`)
.attr("cx", 15)
.attr("cy", 15)
.attr("r", d => d[1]/3))
.node()
{
let extent = [];
countryCountsMap.forEach(
(nestedMapValue, yearKey) =>
nestedMapValue.forEach(
(dataValue, countryKey) => extent.push(dataValue)
)
)
return d3.extent(extent)
}
values = d3.extent(countryCounts.flatMap(([country, data]) => data.map(([year, value]) => value)))
d3 = require("d3@6")
import {table} from "@gampleman/table"
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.
