chart = { const svg = d3.create("svg") .attr("width", width) .attr("height", height); const chart = svg.append("g"); const formatPercent = d3.format(".2%"); const formatPercentAxis = d3.format(".0%"); const colorScale = d => { return(d.name === 'Baseline' ? '#0193cf' : '#00a569') } const tooltipText = d => { var theText = "" + d.name + "
Result: " + formatPercent(d.result) + "
Uncertainty interval between " + formatPercent(d.ci[0]) + " and " + formatPercent(d.ci[1]) + ""; return(theText); }; //tooltip div for mouseover events const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .style("background", "#fff") .text("") .style("padding", "3px") .style("border", "0.5px solid black"); //.style("font", fontStyle); //y-scale will be based on the number of items in the data. const y = d3.scaleBand() .range([height - margin.bottom, margin.top]) //<<<<< might need to reverse these. .domain(data.map(d=> d.name)) .paddingInner(1) .paddingOuter(1); //height of a single horitzontal plot will be based on the y-scale. const boxHeight = y.step()/3; //x-scale is based on the confidence intervals. const x = d3.scaleLinear() .domain([d3.min(data.map(x => x.openRate.ci[0])) - 0.02, d3.max(data.map(x => x.openRate.ci[1])) + 0.02]) .range([margin.left, width - margin.right]); //x-axis chart.append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(5).tickFormat(formatPercentAxis)) //.style("font", fontStyle) //y-axis chart.append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)); /* .style("font", fontStyle) */ //x-axis label chart.append("text") .attr("x", width /2 ) .attr("y", height + margin.top + (margin.bottom/2) ) .style("text-anchor", "middle") /*.style("font", fontStyle)*/ .text("Test"); //Draw the horizontal lines chart.selectAll("horitzontalLines") .data(data) .enter() .append("line") .attr("y1", d => y(d.name)) .attr("y2", d => y(d.name)) .attr("x1", d => x(d.openRate.result)) .attr("x2", d => x(d.openRate.result)) .attr("stroke", colorScale) .style("stroke-width", 0.5) .on("mouseover", d => { tooltip.html(tooltipText(d)); return tooltip.style("visibility", "visible"); }) .on("mousemove", () => { return tooltip.style("top", (d3.event.pageY-20)+"px").style("left",(d3.event.pageX+10)+"px"); }) .on("mouseout", () => tooltip.style("visibility", "hidden")) .transition() .duration(500) .delay(250) .attr("x1", d => x(d.openRate.ci[0])) .attr("x2", d => x(d.openRate.ci[1])); //Circle for the value var circles = chart.selectAll("valueCircles") .data(data) .enter() .append("circle") .attr("cy", d => y(d.name)) .attr("cx", d => x(d.openRate.result)) .style("stroke", colorScale) .style("fill", colorScale) .attr("r", 0) .on("mouseover", d => { tooltip.html(tooltipText(d)); return tooltip.style("visibility", "visible"); }) .on("mousemove", () => { return tooltip.style("top", (d3.event.pageY-20)+"px").style("left",(d3.event.pageX+10)+"px"); }) .on("mouseout", () => tooltip.style("visibility", "hidden")) .transition() .duration(500) .attr("r", boxHeight/3); //min whisker chart.selectAll("minWhisker") .data(data) .enter() .append("line") .attr("y1", d => y(d.name)) .attr("y2", d => y(d.name)) .attr("x1", d => x(d.openRate.ci[0])) .attr("x2", d => x(d.openRate.ci[0])) .attr("stroke", colorScale) .style("stroke-width", 0.5) .on("mouseover", d => { tooltip.html(tooltipText(d)); return tooltip.style("visibility", "visible"); }) .on("mousemove", () => { return tooltip.style("top", (d3.event.pageY-20)+"px").style("left",(d3.event.pageX+10)+"px"); }) .on("mouseout", () => tooltip.style("visibility", "hidden")) .transition() .duration(250) .delay(700) .attr("y1", d => y(d.name)-boxHeight/2) .attr("y2", d => y(d.name)+boxHeight/2); //max whisker chart.selectAll("maxWhisker") .data(data) .enter() .append("line") .attr("y1", d => y(d.name)) .attr("y2", d => y(d.name)) .attr("x1", d => x(d.openRate.ci[1])) .attr("x2", d => x(d.openRate.ci[1])) .attr("stroke", colorScale) .style("stroke-width", 0.5) .on("mouseover", d => { tooltip.html(tooltipText(d)); return tooltip.style("visibility", "visible"); }) .on("mousemove", () => { return tooltip.style("top", (d3.event.pageY-20)+"px").style("left",(d3.event.pageX+10)+"px"); }) .on("mouseout", () => tooltip.style("visibility", "hidden")) .transition() .duration(250) .delay(700) .attr("y1", d => y(d.name)-boxHeight/2) .attr("y2", d => y(d.name)+boxHeight/2); return svg.node(); }