Data Visualization Designer/Engineer
Public
Edited
Sep 29, 2024
8 stars
render(chartSVG)
render = (svg) => {
let svgSelection = d3.select(svg);
// CHART BEGINS
let g = svgSelection
.selectAll("g")
.data(finalData14Day, (d) => d.key)
.join(
(enter) => {
const g = enter.append("g").attr("opacity", 1);
g.append("text")
.text((d) => d.key)
.style("font-size", "0.70em")
.attr("text-anchor", "start")
.attr("y", pathWidth - 5)
.attr("x", 0)
.attr("fill", "#333")
.style("font-family", "sans-serif");
g.append("text")
.attr("class", "pct")
.style("font-size", "0.70em")
.attr("text-anchor", "end")
.attr("y", pathWidth - 5)
.attr("x", pathWidth)
.attr("fill", "#333")
.style("font-family", "sans-serif");
g.append("path")
.attr("class", "line")
.attr("fill", "none")
.attr("stroke-width", 2.5);
g.append("path").attr("class", "area").style("opacity", 0.6);
return g;
},
(update) => update,
(exit) => {
exit.remove();
}
);
g.transition()
.duration(500)
.attr("opacity", 1)
.attr("transform", (d, i) => {
if (r1 == "carto") {
return `translate(${[
margin + d.x * (pathWidth + margin),
margin + d.y * (pathWidth + margin)
]} )`;
} else {
return `translate(${[
(i % perRow) * (pathWidth + margin),
Math.floor(i / perRow) * (pathWidth + margin)
]} )`;
}
});
g.select(".line")
.transition()
.attr("stroke", (d) => d.fillColor)
.duration(500)
.attr("d", function (d) {
yScale.domain(ext(d));
return line(regressionGenerator(d.data));
});
g.select(".area")
.transition()
.duration(500)
.attr("fill", (d) => d.fillColor)
.attr("d", function (d) {
yScale.domain(ext(d));
return area(regressionGenerator(d.data));
});
g.select(".pct").text((d) => rateOfChange(d));
// ADD ANNOTATIONS
const mi_data = finalData14Day.find((d) => d.key === "MI");
const mi_x = margin + mi_data.x * (pathWidth + margin);
const mi_y = margin + mi_data.y * (pathWidth + margin);
svgSelection
.append("line")
.attr("class", "annot")
.style("stroke", "#efefef")
.attr("x1", mi_x)
.attr("y1", mi_y - 10)
.attr("x2", mi_x)
.attr("y2", mi_y + pathWidth - 20);
svgSelection
.append("line")
.attr("class", "annot")
.style("stroke", "#efefef")
.attr("x1", mi_x + pathWidth)
.attr("y1", mi_y - 10)
.attr("x2", mi_x + pathWidth)
.attr("y2", mi_y + pathWidth - 20);
svgSelection
.append("text")
.attr("id", "t1")
.attr("class", "annot")
.style("font-size", "0.70em")
.attr("text-anchor", "end")
.attr("y", mi_y + pathWidth - 20)
.attr("x", mi_x - 5)
.attr("fill", "#999")
.style("font-family", "sans-serif");
d3.select("#t1")
.transition()
.duration(500)
.text(`${moment(mi_data.data[0].date).format("MMM DD")}`);
svgSelection
.append("text")
.attr("id", "t2")
.attr("class", "annot")
.style("font-size", "0.70em")
.attr("text-anchor", "start")
.attr("y", mi_y + pathWidth - 20)
.attr("x", mi_x + pathWidth + 5)
.attr("fill", "#999")
.style("font-family", "sans-serif");
d3.select("#t2")
.transition()
.duration(500)
.text(
`${moment(mi_data.data[mi_data.data.length - 1].date).format("MMM DD")}`
);
svgSelection
.append("text")
.attr("id", "t3")
.attr("class", "annot")
.style("font-size", "0.6em")
.attr("text-anchor", "middle")
.attr("y", mi_y)
.attr("x", mi_x + pathWidth / 2)
.style("font-family", "sans-serif");
d3.select("#t3")
.text("7-Day Avg.")
.attr("fill", metric === "cases" ? "#dd3f0f" : "#111");
svgSelection
.selectAll(".annot")
.transition()
.duration(500)
.attr("opacity", r1 === "roc" ? 0 : 1);
}
finalData.forEach((d) => {
const lastDate = d3.max(d.data, (val) => moment(val.date));
console.log(`Last date for ${d.key}: ${lastDate.format("YYYY-MM-DD")}`);
})
lastGlobalDate = d3.min(
finalData.map((d) => d3.max(d.data, (val) => moment(val.date)))
)
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.
