31:T1ee9,chart = { replay; const margin = {top: 40, right: 40, bottom: 40, left: 40}; const width = 960; const height = 600; const padding = 1; const svg = d3.select(DOM.svg(width, height)); let nodes = []; let index = 0; const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("border-radius", "3px") .style("pointer-events", "none") .style("display", "none") .style("position", "absolute") .style("z-index", "1000") .style("padding", "12px") .style("font-weight", "regular") .style("font-family", "Open Sans") .style("font-size", "12px") .style("background", "white") .style("box-shadow", "0 0 10px rgba(0,0,0,.25)") .style("color", "#333333") .style("line-height", "1.6") .style("pointer-events", "none"); const tipContent = d => ` Year: ${_.round(d.year, 0)}
Emissions: ${d3.format(".1f")(d.value)} MT CO₂e` const lookup = { "scenario 1": "Business as Usual", "scenario 2": "Clean Energy DC", "scenario 3": "2050 Carbon Neutrality" }; const xCenter = { "scenario 1": width * (1/4) - margin.left + 10, "scenario 2": width * (1/2) + 10, "scenario 3": width * (3/4) + margin.right }; const totals = svg.selectAll(".totals") .data(Object.entries(xCenter)) .join("g") .attr("class", "totals") .attr("transform", (d, i) => `translate(${xCenter[d[0]]}, ${160})`); totals.append("text") .attr("text-anchor", "middle") .attr("font-size", 13) .attr("font-weight", "bold") .text(d => lookup[d[0]]); totals.append("text") .attr("class", "total_values") .attr("text-anchor", "middle") .attr("font-weight", 800) .attr("font-size", 18) .attr("y", 30) .text(""); svg.append("g") .attr("transform", `translate(${width - (margin.right + (8 * scale))}, ${height - margin.bottom + 30})`) .call(legend); svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) .call(title); const year = svg.append("g").attr("transform", "translate(0, 0)"); year.append("text") .attr("class", "yearText") .attr("x", margin.left) .attr("y", height - margin.bottom) .attr("font-size", 100) .attr("font-weight", 800) .style("letter-spacing", "0px") .style("font-variant-numeric", "tabular-nums;") .style("text-anchor", "start") .style("opacity", .2) .html(""); svg.append('text') .attr("class", "annotation") .attr("transform", `translate(${margin.left + 260}, ${height-margin.bottom - 45})`) .style("text-anchor", "start") .attr("font-size", 13) .html('') .selectAll('tspan') .data(['Annotations go here', 'like this', 'and this'], d => d) .enter() .append('tspan') .html(d => d) .attr("x", 0) .attr("y", (d,i) => i * 22) .attr("opacity", 0); let annotate = function(text){ let annotation = svg.selectAll('.annotation').selectAll('tspan').data(text, d => d); annotation .enter() .append('tspan') .html(d => d) .attr("x", 0) .attr("y", (d,i) => i * 22) .transition() .ease(d3.easeLinear) .duration(250) .attr("opacity", 1) .transition() .ease(d3.easeLinear) .delay(6000) .duration(250) .attr("opacity", 0); annotation.exit().remove(); } //pre-position nodes const emissions = data.map(d => ({ ...d, data: d.data.map(dd => ({...dd, x: xCenter[dd.cluster] + adjustment(), y: adjustment() + 15}) )} )); const simulation = d3.forceSimulation(nodes) // .force("x", d3.forceX(0).strength(1.5)) .force("x", d3.forceX().x(function(d) { return xCenter[d.cluster]; }).strength(1.5)) .force("y", d3.forceY().y(15).strength(1.5)) .force('collide', d3.forceCollide(d => (area(d.value) * scale + 1) + padding)); let g = svg.append("g").attr("transform", "translate(0," + (height / 2 + 15) + ")"); let node = g.append("g").selectAll(".node"); restart(); let animate = _ => { nodes.push(...emissions[index].data); restart(); year.select("text").html(emissions[index].year) totals.each(function(scenario, i) { let e = emissions[index].cumulative.filter(d => d.cluster === scenario[0])[0].value; let total = d3.select(this).selectAll(".total_values") .data([e]) .join("text") .attr("text-anchor", "middle") .text(d => `${d3.format(".1f")(d)}`); }); if(emissions[index].year === 2025){ ticker.stop(); annotate(["If we want to reach carbon neutrality,", "Washington DC's environmental policies", "should start taking effect by 2025."]); d3.timeout(function(){ ticker = d3.interval(function(){ animate() }, tickDuration) },6000); } if(emissions[index].year === 2035){ ticker.stop(); annotate(["With the right mix of policies by 2035,", "the city's annual emissions could be 77% less", "than the business as usual scenario."]); d3.selectAll(".dot") .attr("opacity", 1) .transition() .ease(d3.easeLinear) .duration(250) .attr("opacity", 0.1) .transition() .delay(6000) .attr("opacity", 1); d3.timeout(function(){ ticker = d3.interval(function(){ animate() }, tickDuration) },6000); } if(emissions[index].year === 2050){ ticker.stop(); annotate(['Over the course of 32 years,', 'that will save more than 140 metric tons', 'of CO2e from the atmopshere.']); d3.selectAll(".avoided") .attr("opacity", 1) .transition() .ease(d3.easeLinear) .duration(250) .attr("opacity", 0.1) .transition() .delay(6000) .attr("opacity", 1); } index +=1; // if(index === emissions.length) { // ticker.stop(); // } } function restart() { node = node.data(nodes, d => d.id); node.exit().transition() .attr("r", 0) .remove(); node = node.enter().append("circle") .attr("class", d => d.year === 2035? "reference_dot": "dot") .classed("avoided", d => d.year < 2032 || d.cluster != "scenario 1") .attr("fill", d => "#333333") .attr("r", 0) .call(function(node) { node.transition().duration(tickDuration).attr("r", d => area(d.value) * scale ); }) .on("mouseover", function(d) { tooltip.style("display", null); d3.select(this) .attr("fill", "#000000"); tooltip.html(tipContent(d)) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mousemove", function(d) { tooltip .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { d3.select(this) .attr("fill", "#333333"); tooltip.style("display", "none"); }) .merge(node); simulation.nodes(nodes); simulation.on("tick", () => { node .attr("cx", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); simulation.alpha(.01).restart(); } function ticked() { node.attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); } let ticker = d3.interval(function(){ animate(); }, tickDuration); return svg.node(); }32:T5f5,legend = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "end") g.selectAll("circle") .data([1, 4.5, 8]) .join("circle") .attr("fill", (d, i) => i === 0 ? "#333333": "none") .attr("stroke", "#333333") .attr("stroke-width", 1) .attr("stroke-opacity", 0.5) .attr("r", d => d * scale) .attr("cx", 0) .attr("cy", d => (-d * scale) - 30); g.selectAll(".ticks") .data([1, 8]) .join("line") .attr("class", "ticks") .attr("stroke", "#333333") .attr("opacity", 0.5) .attr("stroke-weight", 1) .attr("shape-rendering", "crispEdges") .attr("x1", d => -(d * scale) / Math.sqrt(2)) .attr("x2", -(8 * scale) / Math.sqrt(2) - 20) .attr("y1", d => -(d * scale) - ((d * scale) / Math.sqrt(2)) - 30) .attr("y2", d => -(d * scale) - ((d * scale) / Math.sqrt(2)) - 30); g.selectAll(".labels") .data([1.0, 8.0]) .join("text") .attr("text-anchor", "end") .attr("x", -(8 * scale) / Math.sqrt(2) - 30) .attr("y", d => -(d * scale) - ((d * scale) / Math.sqrt(2)) - 30) .attr("dy", "0.35em") .html(d => `${d3.format(".1f")(d)} MT CO2e`); // g.append("text") // .attr("class", "legend_title") // .attr("font-family", "Open Sans") // .attr("font-size", 13) // .attr("x", (8 * scale)) // .attr("y", -5) // .attr("dy", "0.35em") // .text("Each dot represents one year of emissions."); }33:[] 2f:{"title":"Emissions Visualization","cells":[{"id":0,"value":"md`# Emissions Visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"viewof replay = html`