{ const visHeight = 2 * height + margin.top + margin.bottom; const red = 'firebrick', blue = 'steelblue'; const container = d3 .create('svg') .attr('width', width + margin.left + margin.right) .attr('height', visHeight); const defs = container.append('defs'); const clipRect = defs .append('clipPath') .attr('id', 'area-clip') .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", xScale(startValue)) .attr("height", height); const lineChart = container .append('g') .attr('id', 'chart') .attr('transform', `translate(${margin.left}, ${margin.top})`); lineChart .append('g') .attr('class', 'axis axis_y') .call( d3 .axisLeft(qfYScale) .ticks(10) .tickFormat(d3.format(",.3f")) ); const curve = d3 .area() .x(d => xScale(d.x)) .y1(d => qfYScale(d.p_less_than_x)) .y0(qfYScale(0)); lineChart .append("path") .attr("d", curve(qfData)) .attr("fill", blue) .attr("stroke", blue); lineChart .append("path") .attr("d", curve(qfData)) .attr("fill", red) .attr("stroke", red) .attr("clip-path", 'url(#area-clip)'); const curveTicksG = container .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const dotplotTicksG = container.append("g"); curveTicksG .selectAll('.x-guideline') .data(quantiles) .enter() .append("line") .attr("class", "x-guideline") .attr("stroke", "lightgrey") .attr("stroke-width", "0.1px") .attr("stroke-dasharray", "5,2") .attr("x1", 0) .attr("y1", d => qfYScale(d.p_less_than_x)) .attr("x2", d => xScale(d.x)) .attr("y2", d => qfYScale(d.p_less_than_x)); curveTicksG .selectAll('.y-tick') .data(quantiles) .enter() .append("line") .attr("class", "y-guideline") .attr("stroke", "lightgrey") .attr("stroke-dasharray", "5,2") .attr("x1", d => xScale(d.x)) .attr("y1", d => yScale(0) - (yScale(0) - qfYScale(d.p_less_than_x))) .attr("x2", d => xScale(d.x)) .attr("y2", d => visHeight - (margin.top + margin.bottom)); const dotplotContainer = container .append('g') .attr("id", "dotplot-container") .attr("transform", `translate(${margin.left}, ${visHeight / 2})`); dotplotContainer .append('g') .attr('class', 'axis axis_x') .attr('transform', `translate(0, ${height})`) .call(d3.axisBottom(xScale)); const bins = dotplotContainer.selectAll(".gBin").data(qfStacks); const binContainerEnter = bins .enter() .append("g") .attr("class", "gBin") .attr("transform", d => `translate(${xScale(d.x)}, ${height})`) .attr("fill", d => (d.x - qBinwidth / 2 <= startValue ? red : blue)); binContainerEnter .selectAll("circle") .data(d => d.values.map((p, i) => { return { idx: i, value: p, radius: xScale(qBinwidth / 2) }; }) ) .enter() .append("circle") .attr("cx", 0) .attr("cy", d => -d.idx * 2 * d.radius - d.radius) .attr("r", d => d.radius) .attr("fill-opacity", 1); const lineG = container.append("g").attr("id", "q-line-g"); const lineY = lineG .append("line") .attr("id", "q-line-y") .attr("x1", xScale(startValue) + margin.left) .attr("x2", xScale(startValue) + margin.left) .attr("y1", visHeight - margin.top) .attr("y2", qfYScale(getPercentageForX(startValue) / 100) + margin.top) .attr("stroke", "black") .attr("stroke-width", "1px"); const lineX = lineG .append("line") .attr("id", "q-line-x") .attr("x1", margin.left) .attr("x2", xScale(startValue) + margin.left) .attr("y1", qfYScale(getPercentageForX(startValue) / 100) + margin.top) .attr("y2", qfYScale(getPercentageForX(startValue) / 100) + margin.top) .attr("stroke", "black") .attr("stroke-width", "1px"); lineG .append('text') .attr("x", xScale(startValue) + margin.left + 5) .attr("y", (visHeight + 100) / 2) .attr("id", "q-line-text") .attr("font-size", "10px") .text(`${getPercentageForX(startValue).toFixed(2)}%`); const mouseOverlay = container .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width) .attr("height", visHeight - margin.top - margin.bottom + 10) .attr("fill", "yellow") .attr("opacity", 0.0); container.append("g").attr("id", "explanation-g"); explainResults(container.select("#explanation-g"), qfStacks, startValue); mouseOverlay.on("click", function() { var coords = d3.mouse(this); console.log(xScale(18)); console.log(coords[0]); const xValue = xScale.invert(coords[0] - margin.left); console.log(xValue); mutable startValue = xValue; }); function explainResults(group, stacks, xValue) { const selDots = qfStacks.filter(c => c.x - qBinwidth / 2 <= xValue); console.log(selDots, xValue, qBinwidth); const lastStackX = selDots.length == 0 ? 0 : selDots[selDots.length - 1].x; group.html( getSVGText( selDots.map(c => c.values.length).reduce((acc, val) => val + acc, 0), n_quantiles, lastStackX, getPercentageForX(xValue), xValue, minTommss(qBinwidth / 2, true) ) ); } function getPercentageForX(xValue) { const insertIdx = d3.bisectLeft(x, xValue); const perc = (((xValue - qfData[insertIdx - 1].x) / (qfData[insertIdx].x - qfData[insertIdx - 1].x)) * (qfData[insertIdx].p_less_than_x - qfData[insertIdx - 1].p_less_than_x) + qfData[insertIdx - 1].p_less_than_x) * 100; return perc; } function getSVGText(dots, totalDots, dotsX, percent, xValue, timeWidth) { return ` The dotplot says: "You will miss the bus ${dots} out of ${totalDots} times (${( (dots * 100) / totalDots ).toFixed( 2 )}%) if you arrive in approximately (±${timeWidth}) ${minTommss( dotsX )}" The CDF says: "You will miss the bus ${Math.ceil( percent )} out of 100 times (${percent.toFixed( 2 )}%) if you arrive in exactly ${minTommss( xValue )}" `; } function minTommss(minutes, short) { var min = Math.floor(Math.abs(minutes)); var sec = Math.floor((Math.abs(minutes) * 60) % 60); if (short) return `${min}m:${sec}s`; else return `${min} minutes and ${sec} seconds`; } return container.node(); }