2b:null 2c:["$","title",null,{"children":"D3 Interactive Charts | Zachary Dodge | Observable"}] 31:Tf0d,{ 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(); }32:T7a5,html``33:T4dd,onMouseEnter = function(datum, index, binGroups, tooltip) { tooltip.style("opacity", 1) tooltip.select("#range").text([ datum.x0 < 0 ? 'Under-estimated by' : 'Over-estimated by', Math.abs(datum.x0), "to", Math.abs(datum.x1), "hours", ].join(" ")); tooltip.select("#examples") .html( datum .slice(0, 3) .map(summaryAccessor) .join("
")); tooltip.select("#count") .text(Math.max(0, yAccessor(datum) - 2)) const percentDeveloperHoursValues = datum.map(d => ((developerHoursAccessor(d) / actualHoursAccessor(d)) || 0)); const percentDeveloperHours = d3.mean(percentDeveloperHoursValues); const formatHours = d => d3.format(",.2f")(Math.abs(d)); tooltip.select("#tooltip-bar-value").text(formatHours(percentDeveloperHours*100)); tooltip.select("#tooltip-bar-fill").style("width", `${percentDeveloperHours*100}%`); const x = xScale(datum.x0) + (xScale(datum.x1) - xScale(datum.x0))/2 + dimensions.margin.left; const y = yScale(yAccessor(datum)) + dimensions.margin.top; tooltip.style("transform", `translate(calc(${x}px - 50%),calc(${y}px - 100%))`); const hoveredBar = binGroups.select(`rect[key='${index}']`).classed("hovered", true) }34:[] 2f:{"id":"0da399a272793153","slug":"d3-interactive-charts","title":"D3 Interactive Charts","thumbnail":"0c96e1856937246293ae76404d592520bc37a67a62ab7b06617d00d47b448a0a","access_level":"public","create_time":"$D2019-07-02T19:08:21.597Z","update_time":"$D2019-08-06T18:56:11.261Z","view_time":null,"first_public_time":"$D2019-07-16T18:34:40.554Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d9850c1501dcfd0d","login":"zacharydodge","name":"Zachary Dodge","avatar_url":"https://avatars-next.observableusercontent.com/da87749e7b8eef3d4a63c58ec76a8e0e08c1050780c0f3fff4d6267f79f5cd90","tier":"starter_2024"},"version":334,"publish_version":334,"role":null,"authored":false,"authors":[{"type":"individual","id":"71693d5bfc6028a7","login":"zacharydodge","name":"Zachary Dodge","avatar_url":"https://avatars-next.observableusercontent.com/da87749e7b8eef3d4a63c58ec76a8e0e08c1050780c0f3fff4d6267f79f5cd90","tier":null}],"members":[{"type":"individual","id":"71693d5bfc6028a7","login":"zacharydodge","name":"Zachary Dodge","avatar_url":"https://avatars-next.observableusercontent.com/da87749e7b8eef3d4a63c58ec76a8e0e08c1050780c0f3fff4d6267f79f5cd90","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"D3 Interactive Charts","cells":[{"id":0,"value":"md`# D3 Interactive Charts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"d3 = require('https://bundle.run/d3@5.9.7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"_ = require('https://bundle.run/lodash@4.17.11');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"summaryAccessor = d => d.Summary;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"actualHoursAccessor = d => +d.HoursActual;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"developerHoursAccessor = d => +d.DeveloperHoursActual;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"diffAccessor = d => +d.HoursEstimate - actualHoursAccessor(d);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"yAccessor = d => d.length;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"dataset = {\n let dataset = await d3.csv(\"https://raw.githubusercontent.com/Derek-Jones/SiP_dataset/master/Sip-task-info.csv\");\n \n let usedTasks = {};\n dataset = dataset.filter(d => {\n let hours = actualHoursAccessor(d);\n if (usedTasks[summaryAccessor(d)]) {\n const hasHigherValue = hours > usedTasks[summaryAccessor(d)];\n if (!hasHigherValue) return false;\n }\n usedTasks[summaryAccessor(d)] = hours;\n return actualHoursAccessor(d) > 10;\n });\n \n dataset = dataset.filter(d => (\n diffAccessor(d) >= -50\n && diffAccessor(d) <= 50\n ));\n \n return dataset;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"dimensions = {\n let width = 600;\n let dimensions = {\n width: width,\n height: width * 0.5,\n margin: {\n top: 35,\n right: 10,\n bottom: 50,\n left: 50\n }\n };\n dimensions.boundedWidth = dimensions.width\n - dimensions.margin.left\n - dimensions.margin.right;\n dimensions.boundedHeight = dimensions.height\n - dimensions.margin.top\n - dimensions.margin.bottom;\n return dimensions;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":194,"value":"onMouseLeave = function(datum, index, binGroups, tooltip) {\n const hoveredBar = binGroups.select(`rect[key='${index}']`).classed(\"hovered\", false);\n tooltip.style(\"opacity\", 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"xScale = d3.scaleLinear()\n .domain(d3.extent(dataset, diffAccessor))\n .range([0, dimensions.boundedWidth])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"binsGenerator = d3.histogram()\n .domain(xScale.domain())\n .value(diffAccessor)\n .thresholds(30);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"bins = binsGenerator(dataset);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":155,"value":"yScale = d3.scaleLinear()\n .domain([0, d3.max(bins, yAccessor)])\n .range([dimensions.boundedHeight, 0])\n .nice();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"barPadding = 1.5;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"