async function drawBars() { const svg = d3 .select("#chart") .append("svg") .attr("width", dimensions.width) .attr("height", dimensions.height) .append("g") .attr( "transform", "translate(" + dimensions.margin.left + "," + dimensions.margin.top + ")" ); svg .append("g") .selectAll("g") // Enter in the stack data = loop key per key = group per group .data(stackedData) .enter() .append("g") .attr("fill", d => color(d.key)) .selectAll("rect") .attr("width", "40px") // enter a second time = loop subgroup per subgroup to add all rectangles .data(d => d) .enter() .append("rect") .attr("x", d => x(d[0])) .attr("y", d => y(d.data.METRIC)) .attr("width", d => x(d[1]) - x(d[0])) .attr("height", "10px") .on("mouseover", function(d) { d3.select(this).transition(); tooltip.html(() => { if (d[0] == 0) { return ``; } else { return ``; } }); tooltip.style("visibility", "visible"); }) .on("mousemove", function() { return tooltip .style("top", parseInt(this.getBoundingClientRect().y) - 10 + "px") .style("left", parseInt(this.getBoundingClientRect().x) + 10 + "px"); }) .on("mouseout", function(d) { d3.select(this).transition(); //.attr("fill", d => color(d.key)); //.style("fill", "skyblue"); tooltip.style("visibility", "hidden"); }); let tooltip = d3 .select("body") .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .style("background", "#fff") .style("pointer-events", "none") .text("an empty tooltip"); svg.append("g").call(xAxis); svg.append("g").call(yAxis); //% change since previous month labels svg .append("g") .attr("class", "more-than-labels") .selectAll(".more-than-labels") .data(data) .join(enter => { enter .append("text") .attr("class", "more-than-labels") .attr("y", d => y(d.METRIC) + 25) .attr("x", d => x(0) + 225) .attr("height", y.bandwidth()) .html(d => { if ( parseFloat( (d.PERCENT_COMPLETE_30_DAYS_DIFF / d.PERCENT_COMPLETE_30_DAYS_PRIOR) * 100 ).toFixed(1) == 0.0 ) { return `0% change in cases sinice previous month`; } else { return `${parseFloat( (d.PERCENT_COMPLETE_30_DAYS_DIFF / d.PERCENT_COMPLETE_30_DAYS_PRIOR) * 100 ).toFixed(1)}% change in cases since previous month`; } }) .attr('text-anchor', 'end'); }); //arrows svg .append("g") .attr("class", "more-than-labels") .selectAll(".more-than-labels") .data(data) .join(enter => { enter .append("svg") .attr("y", d => y(d.METRIC) + 15) .attr("x", d => x(0)) .html(d => { if ( parseFloat( (d.PERCENT_COMPLETE_30_DAYS_DIFF / d.PERCENT_COMPLETE_30_DAYS_PRIOR) * 100 ) > 0 ) { return ``; } else if ( parseFloat( (d.perc_total_diff_30_day_prev / d.PERCENT_COMPLETE_30_DAYS_PRIOR) * 100 ).toFixed(1) == 0 ) { return ``; } else { return ``; } }); }); //% reported labels svg .append("g") .attr("class", "change-from-month-labels") .selectAll(".change-from-month-labels") .data(data) .join(enter => { enter .append("text") .attr("y", d => y(d.METRIC) - 5) .attr("x", d => x(1)) .attr("height", y.bandwidth()) .html( d => ` ${parseFloat(d.NOT_MISSING * 100).toFixed( 1 )}% reported (${parseFloat( d.MISSING * 100 ).toFixed(1)}% missing)` ) .attr('text-anchor', 'end'); }); //legend svg .append("rect") .attr("x", 0) .attr("y", -20) .attr("width", 15) .attr("height", 15) .attr("fill", "#92C5DE"); svg .append("rect") .attr("x", 110) .attr("y", -20) .attr("width", 15) .attr("height", 15) .attr("fill", "#FFCF44"); svg .append("text") .attr("x", 25) .attr("y", -12) .style("font-family", "arial") .style("font-size", "12px") .attr("dy", "0.35em") .text("Data reported"); svg .append("text") .attr("x", 130) .attr("y", -12) .style("font-family", "arial") .style("font-size", "12px") .attr("dy", "0.35em") .text("Data missing"); }