data = ["annual", "annual_percap"].map(prop => {
const lineData = grouped
.map(([entity, entries]) => {
return entries
.map(d => {
return {
prop,
entity,
year: d.year,
value: d[prop]
}
})
});
const y = d3.scaleLinear()
.domain([0, prop === "annual" ? 12e9 : 24])
.range([chartheight, 0]);
const tickFormat = (d, i, e) => prop === "annual" ? `${d / 1e9}${i === e.length - 1 ? " billion tons" : ""}` : `${d}${i === e.length - 1 ? " tons" : ""}`;
const tickValues = prop === "annual" ? d3.range(0, 15e9, 3e9) : d3.range(0, 30, 6);
const yAxisGenerator = g => {
const generator = d3.axisLeft(y)
.tickFormat((d, i, e) => tickFormat(d, i, e))
.tickSize(chartwidth + (prop === "annual" ? 12 : 10))
.tickValues(tickValues)
const axis = g.call(generator)
.attr("transform", `translate(${chartwidth})`);
axis.select(".domain").remove();
const ticks = axis.selectAll(".tick");
const offset = prop === "annual" ? 68 : 29;
ticks.select("text")
.attr("fill", "#808080")
.attr("font-family", franklinLight)
.attr("font-size", 14)
.attr("x", (d, i, e) => {
const currX = +d3.select(e[i]).attr("x");
return currX + (i === e.length - 1 ? offset : 0);
});
ticks.select("line")
.attr("stroke", "#e2e2e2")
.attr("stroke-dasharray", [2, 2])
.attr("x2", (d, i, e) => {
const currX2 = +d3.select(e[i]).attr("x2");
return currX2 + (i === e.length - 1 ? offset : 0);
});
return axis;
}
const line = d3.line()
.x(d => x(d.year))
.y(d => y(d.value));
return {
prop,
lineData,
y,
yAxisGenerator,
line,
tickFormat,
tickValues: prop === "annual" ? d3.range(0, 15e9, 3e9) : d3.range(0, 30, 6),
labelsData: clone(lineData).map((entries) => ({entity: entries[0].entity, position: y(entries[entries.length - 1].value)}))
}
});