I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
d3.geoPath + Canvas + Zoom + PanningTopoJSON Simplifier and Filter attributesHow to add a tooltip in D3Scatterplot OverplottingTreemap from tabled3.stack with d3.nestD3 data binding v3 to v5D3 Network Visualization PlaygroundReusable charts d3@4Intro to D3Marks and Channels in D3
d3.stack with d3.group
Also listed in…
Observable Tricks
matrixData = groupToStack(data, "year", "gruposdeedad", v =>
d3.sum(v, d => d.total)
)
table(matrixData, {})
table(data, { paged: 10 })
// data = loadSocrata("https://www.datos.gov.co/resource/grgp-6bef.csv")
data = FileAttachment("proyeccionesCensoColombia.csv").csv()
groupedMap = d3.group(
data,
d => d[groupBy],
d => d[stackBy]
)
stackKeys = Array.from(new Set(data.map(d => d[stackBy])).values())
.filter(d => d !== "Total")
.sort((a, b) => +a.split("-")[0] - +b.split("-")[0])
tableData = {
// How we want to aggregate the data
const reducer = v => d3.sum(v, d => d.total);
return Array.from(groupedMap.entries())
.map(g => {
const obj = {};
obj[groupBy] = g[0];
for (let col of stackKeys) {
const vals = g[1].get(col);
obj[col] = !vals ? 0 : reducer(Array.from(vals.values()));
}
return obj;
})
.sort((a, b) => a[groupBy] - b[groupBy]);
}
table(tableData)
stackedData = d3.stack().keys(stackKeys)(tableData)
series = stackedData.map(d => {
d.forEach(v => {
v.key = d.key;
v.data.name = v.data[groupBy];
});
return d;
})
dataForChart = data
.map(d => ((d.name = d[groupBy]), d))
.sort((a, b) => +a[groupBy] - b[groupBy])
import { chart } with {
series,
dataForChart as data,
color
} from "@d3/stacked-bar-chart@538"
chart
series
dataForChart
groupToStack = function(data, groupBy, colorBy, reducer = v => v.length) {
const groupedMap = d3.group(data, d => d[groupBy], d => d[colorBy]);
const keys = Array.from(new Set(data.map(d => d[colorBy])).values());
return Array.from(groupedMap.entries()).map(g => {
const obj = {};
obj[groupBy] = g[0];
for (let col of keys) {
const vals = g[1].get(col);
obj[col] = !vals ? 0 : reducer(Array.from(vals.values()));
}
return obj;
});
}
color = d3
.scaleOrdinal()
.domain(series.map(d => d.key))
.range(
d3
.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), series.length)
.reverse()
)
.unknown("#ccc")
import { table } from "@john-guerra/tables"
import { loadSocrata } from "@john-guerra/socrata-load-multiples-pages"
import { select } from "@jashkenas/inputs"
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.
