Data Visualization Analyst @ Northwestern Mutual with an M.S. in Data Analysis and Visualization from the CUNY Graduate Center
Published
Edited
Apr 27, 2021
1 star
data = [
{ era1: 25, era2: 10, era3: 30, era4: 11, era5: 28, era6: 16, total: 120 }]
series = d3
.stack()
.keys(["era1", "era2", "era3", "era4", "era5", "era6"])
.offset(timelineOffset)(data)
.map((d) => (d.forEach((v) => (v.key = d.key)), d))
timelineOffset = (series, order) => {
if (!((n = series.length) > 1)) return;
for (var i = 1, j, s0, s1 = series[order[0]], n, m = s1.length; i < n; ++i) {
(s0 = s1), (s1 = series[order[i]]);
if (s0[0][0] < 1900) {
s0[0][0] = s0[0][0] + 1900;
s0[0][1] = s0[0][1] + 1900;
}
console.log(s0);
for (j = 0; j < m; ++j) {
s1[j][1] += s1[j][0] = isNaN(s0[j][1]) ? s0[j][0] : s0[j][1];
}
}
}
x = d3
.scaleLinear()
.domain([1900, 2020])
.range([margin.left, width - margin.right])
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 + height / 2})`)
.call(
d3
.axisBottom(x)
.ticks(width / 100)
.tickSize([2])
.tickFormat(d3.format("d"))
)
.call((g) => g.selectAll(".domain").remove())
formatPercent = d3.format(".1%")
formatValue = x => isNaN(x) ? "N/A" : x.toLocaleString("en")
height = data.length * 30 + margin.top + margin.bottom
margin = ({ top: 30, right: 10, bottom: 50, left: 30 })
d3 = require("d3@6")
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.
