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") // 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.DEMOGRAPHIC_SET_CATEGORY)) .attr("width", d => x(d[1]) - x(d[0])) .attr("height", "10px") .on("mouseover", function(d) { d3.select(this).transition(); tooltip.html(``); 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); //end of bar labels svg .append("g") .attr("class", "bars") .selectAll(".bars") .data(data) .join(enter => { enter .append("text") .attr("class", "bars") .attr("y", d => y(d.DEMOGRAPHIC_SET_CATEGORY) + 9) .attr("x", d => x(200) + 75) .attr("height", y.bandwidth()) .text(d => parseFloat(d.METRIC_VALUE_PER_100K).toFixed(1)) .attr('text-anchor', 'end'); }); //times the lowest rate 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.DEMOGRAPHIC_SET_CATEGORY) + 25) .attr("x", d => x(200) + 75) .attr("height", y.bandwidth()) .html(d => { if (parseFloat(d.PCT_FROM_LOWEST_VALUE).toFixed(1) > 1) { return `${parseFloat( d.PCT_FROM_LOWEST_VALUE ).toFixed(1)} times the lowest rate`; } else { return `Lowest rate`; } }) .attr('text-anchor', 'end'); }); //% change since previous month labels svg .append("g") .attr("class", "change-from-month-labels") .selectAll(".change-from-month-labels") .data(data) .join(enter => { console.log(data); enter .append("text") .attr("y", d => y(d.DEMOGRAPHIC_SET_CATEGORY) + 25) .attr("x", d => x(90) + 40) .attr("height", y.bandwidth()) .html( d => ` ${parseFloat( d.METRIC_VALUE_PER_100K_CHANGE_30_DAYS_AGO * 100 ).toFixed(1)}% change since previous month` ) .attr('text-anchor', 'end'); }); //arrows svg .append("g") .attr("class", "change-from-month-labels") .selectAll(".change-from-month-labels") .data(data) .join(enter => { enter .append("svg") .attr("y", d => y(d.DEMOGRAPHIC_SET_CATEGORY) + 15) .attr("x", d => x(1)) .html(d => { if ( parseFloat(d.METRIC_VALUE_PER_100K_CHANGE_30_DAYS_AGO * 100) > 0 ) { return ``; } else if ( parseFloat(d.METRIC_VALUE_PER_100K_CHANGE_30_DAYS_AGO * 100) == 0 ) { return ``; } else { return ``; } }); }); //reference line for statewide rate svg .append("path") .attr( "d", d3.line()([ [x(data[0].STATE_CASE_RATE_PER_100K), 30], [x(data[0].STATE_CASE_RATE_PER_100K), 650] ]) ) .attr("stroke", "black") .style("stroke-dasharray", "3, 3") .style("stroke", "#1F2574"); svg .append("g") .append("text") .text( "Statewide case rate: " + parseFloat(data[0].STATE_CASE_RATE_PER_100K).toFixed(1) ) .attr("x", x(data[0].STATE_CASE_RATE_PER_100K)) .attr("y", 25) .attr('text-anchor', 'middle') .attr('class', 'label'); //legend svg .append("rect") .attr("x", 0) .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("Cases per 100k people"); }