viz = { let wrapper = d3.create("div").attr("class", "chart"); let tooltip = wrapper .append("div") .attr("class", "tooltip-for-chart") .attr("id", "tooltip-vis-map") .html( `` ) .style("opacity", 0); let svg = wrapper.append("svg").attr("viewBox", [0, 0, width, height]); let colorCat = d3 .scaleOrdinal() .domain(["people_fully_vaccinated", "people_vaccinated"]) .range([color[1], color[2]]); let xAxisGenerator = d3.axisBottom().scale(xScale).tickValues(labelXAxis); let yAxisGenerator = d3.axisRight().scale(yScale).ticks(5); let xAxisDraw = svg .append("g") .attr("id", "xAxis") .call(xAxisGenerator) .style("transform", `translateY(${height - margin.bottom}px)`) .style("color", "#838383"); let yAxisDraw = svg .append("g") .attr("id", "yAxis") .call(yAxisGenerator) .style("transform", `translateX(${width - margin.right}px)`) .style("color", "#838383"); svg .append("g") .attr("id", "rect-col") .selectAll("g") .data(stackData) .join("g") .attr("id", (d) => `group-rect-${d.key}`) .attr("fill", (d) => colorCat(d.key)) .selectAll("rect") .data((d) => d) .join("rect") .attr("x", (d, i) => xScale(d["data"]["date"])) .attr("y", (d) => yScale(+d[1])) .attr("width", xScale.bandwidth()) .attr("height", (d) => yScale(+d[0] - +d[1]) - yScale(margin.bottom)); //Obtain dataIndex from xSale let indexLocation = []; xScale.domain().forEach((d) => { return indexLocation.push(xScale(d)); }); //Create Tooltip line let lineTooltip = svg .append("line") .attr("id", "line-tooltip") .attr("y1", height - margin.bottom) .attr("y2", margin.top) .attr("stroke", "#838383") .style("opacity", 0); svg .append("rect") .attr("id", "rect-tooltip") .attr("width", width - margin.right) .attr("height", height - margin.bottom - margin.top) .attr("fill", "black") .style("position", "absolute") .style("transform", `translateY(${margin.top}px)`) .style("opacity", 0) .on("mousemove", (e) => { let pointerLocation = d3.pointer(e); let clientMouseX = pointerLocation[0]; let clientMouseY = pointerLocation[1]; lineTooltip .style("opacity", 1) .attr("x1", clientMouseX) .attr("x2", clientMouseX); let dataIndexHighlight = d3.bisectCenter(indexLocation, clientMouseX); let dataForTooltip = data[dataIndexHighlight]; //Total vaccinated let tot_changed_vac = getCurrentDateData( dataForTooltip, "total_vaccinated" ).changed; //1 dose vaccinated let first_dose_changed_vac = getCurrentDateData( dataForTooltip, "people_vaccinated" ).changed; //2 dose vaccinated let second_dose_changed_vac = getCurrentDateData( dataForTooltip, "people_fully_vaccinated" ).changed; //Tooltip Info d3.select("#data-tooltip-date").html(`Date: ${dataForTooltip["date"]}`); d3.select("#data-tooltip-dose-tot").html( `People who received at least one dose: ${d3.format(",")( dataForTooltip["total_vaccinated"] )} (+${d3.format(",")(tot_changed_vac)})` ); d3.select("#data-tooltip-dose-1").html( `People vaccinated (1 dose): ${d3.format(",")( dataForTooltip["people_vaccinated"] )} (+${d3.format(",")(first_dose_changed_vac)})` ); d3.select("#data-tooltip-dose-2").html( `People fully vaccinated (2 doses): ${d3.format(",")( dataForTooltip["people_fully_vaccinated"] )} (+${d3.format(",")(second_dose_changed_vac)})` ); d3.select(".tooltip-for-chart") .style("opacity", 1) .style("left", `${50}px`) .style("top", `${50}px`); }) .on("mouseleave", (e, d) => { lineTooltip.style("opacity", 0); d3.selectAll(".tooltip-for-chart") .style("opacity", 0) .transition() .duration(0.2); }); return wrapper.node(); }