{ const div = d3.create("div") .style("position", "relative") .attr("id", "wrapper") .attr("class", "wrapper"); const tooltip = div.append("div") .attr("class", "tooltip") .attr("id", "tooltip") .html(""); let wrapper = div.append("svg") .attr("width", dimensions.width) .attr("height", dimensions.height); const bounds = wrapper.append("g") .style("transform", `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`); const background = bounds.append("g"); bounds.append("g") .attr("class", "bins"); bounds.append("line") .attr("class", "mean"); bounds.append("g") .attr("class", "x-axis") .style("transform", `translate(0, ${dimensions.boundedHeight}px)`) .append("text") .attr("class", "x-axis-label"); let binGroups = bounds.select(".bins") .selectAll(".bin") .data(bins); const barRectsListeners = bounds.selectAll(".listeners") .data(bins) .enter().append("rect") .attr("class", "listeners") .attr("x", d => xScale(d.x0)) .attr("y", -dimensions.margin.top) .attr("height", dimensions.boundedHeight + dimensions.margin.top) .attr("width", d => d3.max([0,xScale(d.x1) - xScale(d.x0)])) .on("mouseenter", (d, i) => onMouseEnter(d, i, binGroups, tooltip)) .on("mouseleave", (d, i) => onMouseLeave(d, i, binGroups, tooltip)) binGroups.exit() .remove(); const newBinGroups = binGroups.enter().append("g") .attr("class", "bin"); newBinGroups.append("rect"); binGroups = newBinGroups.merge(binGroups); const barRects = binGroups.select("rect") .attr("key", (d, i) => i) .attr("x", d => xScale(d.x0) + barPadding) .attr("y", d => yScale(yAccessor(d))) .attr("height", d => {return dimensions.boundedHeight - yScale(yAccessor(d));}) .attr("width", d => d3.max([0, xScale(d.x1) - xScale(d.x0) - barPadding])); const mean = d3.mean(dataset, diffAccessor); const meanLine = bounds.selectAll(".mean") .attr("x1", xScale(mean)) .attr("x2", xScale(mean)) .attr("y1", -20) .attr("y2", dimensions.boundedHeight); const meanLabel = bounds.append("text") .attr("class", "mean-label") .attr("x", xScale(mean)) .attr("y", -25) .text("mean"); const xAxisGenerator = d3.axisBottom() .scale(xScale); const xAxis = bounds.select(".x-axis") .call(xAxisGenerator); const xAxisLabel = xAxis.select(".x-axis-label") .attr("x", dimensions.boundedWidth / 2) .attr("y", dimensions.margin.bottom - 10) .text("Hours over-estimated"); const backgroundLeft = background.append("rect") .attr("class", "background left-side-background") .attr("y", -20) .attr("width", dimensions.boundedWidth / 2) .attr("height", dimensions.boundedHeight + 20) const backgroundRight = background.append("rect") .attr("class", "background right-side-background") .attr("x", dimensions.boundedWidth / 2 + 1) .attr("y", -20) .attr("width", dimensions.boundedWidth / 2 - 1) .attr("height", dimensions.boundedHeight + 20); const leftSideLabel = background.append("text") .attr("class", "label left-side-label") .attr("x", 10) .attr("y", 0) .text("Under-estimated"); const rightSideLabel = background.append("text") .attr("class", "label right-side-label") .attr("x", dimensions.boundedWidth - 10) .attr("y", 0) .text("Over-estimated"); return div.node(); }