3f:null 40:["$","title",null,{"children":"Line chart - v2 | Max Walts | Observable"}] 46:Tb8d,// function chart(lines = defaultLines, intersectionPoints = defaultIntersectionPoints, // xAxisScale = defaultXAxisScale, yAxisScale = defaultYAxisScale) { function chart(lines, intersectionPoints, xAxisScale, yAxisScale) { const xScale = d3.scaleLinear().domain(xAxisScale.domain).range(xAxisScale.range) const yScale = d3.scaleLinear().domain(yAxisScale.domain).range(yAxisScale.range) // console.log("lines", lines) // clear old objects svg.selectAll("line").remove(); svg.selectAll("g").remove(); svg.selectAll("text").remove(); // Append axes svg.append("g").classed("x", true) .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale) .ticks(xAxisScale.numTicks) .tickValues(xAxisScale.tickValues) .tickFormat((d, i) => xAxisScale.tickFormat[i]) .tickSize(xAxisScale.tickSize) .tickSizeOuter(xAxisScale.tickSizeOuter) ) .call(g => g.append("foreignObject") .attr("width", xAxisScale.title.width) .attr("height", xAxisScale.title.height) .attr("x", xAxisScale.title.x) .attr("y", xAxisScale.title.y) .append("xhtml:body") .html(xAxisScale.title.html)) svg.append("g").attr("transform", `translate(${margin.left},0)`) .classed("y", true) // Ticks .call(d3.axisLeft(yScale) .ticks(yAxisScale.numTicks, "$.2f") .tickValues(yAxisScale.tickValues) .tickFormat((d, i) => yAxisScale.tickFormat[i]) .tickSize(yAxisScale.tickSize) .tickSizeOuter(yAxisScale.tickSizeOuter) ) // Axis title .call(g => g.append("foreignObject") .attr("width", yAxisScale.title.width) .attr("height", yAxisScale.title.height) .attr("x", yAxisScale.title.x) .attr("y", yAxisScale.title.y) .append("xhtml:body") .html(yAxisScale.title.html)) // Draw lines svg.selectAll("line.given").remove(); svg.selectAll("line.given") .data(lines) .enter().append('line') .attr("cursor", d => getCursor(d)) .attr("id", (d) => `givenLine_${d.id}`) .attr('x1', d => { if (! 'x1' in d) { d.x1 = xScale(d.point1[0]); d.y1 = yScale(d.point1[1]); d.x2 = xScale(d.point2[0]); d.y2 = yScale(d.point2[1]); } return xScale(d.point1[0]); }) .attr('y1', d => yScale(d.point1[1])) .attr('x2', d => xScale(d.point2[0])) .attr('y2', d => yScale(d.point2[1])) .attr('stroke-width', d => d.width) .attr('stroke', d => getColor(d)) .call(drag(lines, intersectionPoints, xAxisScale, yAxisScale)) // append things that will not change based on user interaction. appendHeaderFooter(); appendStaticIntersectionObjects(lines, intersectionPoints, xAxisScale, yAxisScale); update(lines, intersectionPoints, xAxisScale, yAxisScale); return svg.node(); }47:Ta51,// test2 = { // const newLines = [ // { // label: 'Demand 2', // id: '1', // new attribute ID. This must be a string without spaces or other special characters. // labelSize: "14px", // point1: [10, 60], // point2: [80, 10], // color: colors.demandBlue, // width: 4, // moveX: true, // moveY: false, // drawOriginLine: true // }, // { // label: 'Supply 2', // id: '2', // labelSize: "14px", // point1: [10, 10], // point2: [80, 90], // color: colors.supplyRed, // width: 4, // moveX: true, // moveY: true, // drawOriginLine: true // }, // ] // const newIntersectionPoints = [ // { // label: "Equilibrium", // labels: ["Demand 2", "Supply 2"], // isPrimary: true, // drawHorizontalDropline: true, // drawVerticalDropline: true, // verticalLabelOffset: [0, 0], // verticalLabelColor: 'black', // labelFormat: ".0f", // format according to 'd3-format' spec https://github.com/d3/d3-format // horizontalLabelOffset: [0, 0], // horizontalLabelColor: 'black', // drawVerticalMeasureLine: true, // drawHorizontalMeasureLine: true // } // ]; // const newXAxisScale = ({ // title: { // width: '170px', // height: '90px', // // edit styling in CSS section under axisTitle class // html: `

Quantity

`, // x: (width - margin.right - 160), // y: 0, // size: "12px" // }, // domain: [0, 100], // range: [margin.left, width - margin.right], // numTicks: 5, // // Define a custom set of tick values // tickValues: [0, 50, 100], // // Define format of those ticks // tickFormat: [0, 50, 100], // // Define length of the ticks // tickSize: 0, // tickSizeOuter: 0 // }) // const newYAxisScale = ({ // title: { // width: '90px', // height: '100px', // // edit styling in CSS section under axisTitle class // html: `

Price `, // x: -90, // y: margin.top - 20, // size: "13px" // }, // domain: [0, 100], // range: [height - margin.bottom, margin.top], // numTicks: 5, // // Define a custom set of tick values // tickValues: [0, 50, 100], // // Define format of those ticks // tickFormat: [0, 50, 100], // // length of the outer ticks // tickSize: 0, // tickSizeOuter: 0 // }) // return chart(newLines, newIntersectionPoints, newXAxisScale, newYAxisScale) // }48:T985,test3 = { const lines = [ { label: 'Supply Curve', id: '2', labelSize: "14px", point1: [1, 1], point2: [1.5, 1.125], color: globals.colors.supplyRed, width: 4, moveX: false, moveY: true, drawOriginLine: true }, { label: 'Demand Curve', id: '3', labelSize: "14px", point1: [1.1, 1.476], point2: [1.5, 0.976], color: globals.colors.demandBlue, width: 4, moveX: false, moveY: false, drawOriginLine: true }, ] const ip = [ { label: "", oldLabel: "", labels: ["Supply Curve", "Demand Curve"], isPrimary: true, drawHorizontalDropline: true, drawVerticalDropline: true, verticalLabelOffset: [0, 0], verticalLabelColor: 'black', labelFormat: ".2f", // format according to 'd3-format' spec https://github.com/d3/d3-format horizontalLabelOffset: [0, 0], horizontalLabelColor: 'black', drawVerticalMeasureLine: true, drawHorizontalMeasureLine: true, handleGhostLineIntersection: true } ]; const x = ({ title: { width: '170px', height: '90px', // edit styling in CSS section under axisTitle class html: `

Quantity

`, x: (width - globals.margin.right - 160), y: 0, size: "12px" }, domain: [1, 2], range: [globals.margin.left, width - globals.margin.right], numTicks: 5, // Define a custom set of tick values tickValues: [1.2, 1.4], // Define format of those ticks tickFormat: [1.2, 1.4], // Define length of the ticks tickSize: 0, tickSizeOuter: 0 }) const y = ({ title: { width: '90px', height: '100px', // edit styling in CSS section under axisTitle class html: `

Price `, x: -90, y: globals.margin.top - 20, size: "13px" }, domain: [0.9, 1.5], range: [height - globals.margin.bottom, globals.margin.top], numTicks: 5, // Define a custom set of tick values tickValues: [1.05, 1.10, 1.35], // Define format of those ticks tickFormat: [1.05, 1.10, 1.35], // length of the outer ticks tickSize: 0, tickSizeOuter: 0 }) // console.log("margin", globals.margin) // console.log("height", globals.height) return chart(lines, ip, x, y) }49:T2acb,function drag(lines, intersectionPoints, xAxisScale, yAxisScale) { const xScale = d3.scaleLinear().domain(xAxisScale.domain).range(xAxisScale.range) const yScale = d3.scaleLinear().domain(yAxisScale.domain).range(yAxisScale.range) // console.log("in drag", lines) // d is the line that is being dragged // event is the mouse event function dragstarted(event, d) { if(!d.moveX && !d.moveY) { return } // First time // the line is supposed to have the origin drawn & the line is not away from the origin // TODO: this is the code that breaks the graph on reload, since these elements are not redrawn. // isAwayFromOrigin continues to exist so the if branch is never entered. if (d.drawOriginLine && !d.hasOwnProperty('isAwayFromOrigin')) { svg.append('line') .classed(`ghost_${d.id}`, true) .attr('x1', xScale(d.point1[0])) .attr('y1', yScale(d.point1[1])) .attr('x2', xScale(d.point2[0])) .attr('y2', yScale(d.point2[1])) .attr('stroke-width', d.width) .attr('stroke', getColor(d)) .attr('filter', 'brightness(2)') svg.append('text') .classed(`ghost_${d.id}`, true) .attr('x', xScale(d.point2[0])) .attr('y', yScale(d.point2[1])) .style('fill', getColor(d)) .style("font-size", d.labelSize) .style("font-weight", 'bold') // .style('text-shadow', textShadowDark) .attr('filter', 'brightness(2)') .text(() => `Old ${d.label}`); // console.log("appended", this) // console.log(g); // save coordinates of ghost lines lineMap[`line.ghost_${d.id}_x1`] = xScale(d.point1[0]); lineMap[`line.ghost_${d.id}_y1`] = yScale(d.point1[1]); lineMap[`line.ghost_${d.id}_x2`] = xScale(d.point2[0]); lineMap[`line.ghost_${d.id}_y2`] = yScale(d.point2[1]); d.isAwayFromOrigin = true; } // following times, add color back else if (d.drawOriginLine && !d.isAwayFromOrigin) { svg.select(`line.ghost_${d.id}`) .attr('opacity', '1') d3.select(`text.ghost_${d.id}`) .attr('opacity', '1') d.isAwayFromOrigin = true; } if (d.moveX || d.moveY) { d3.select(this).raise(); d3.select(this).attr("stroke-width", d.width*1.5).attr("filter", "drop-shadow(0 0 .5rem yellow)"); } appendIntersectionObjects(lines, intersectionPoints, xAxisScale, yAxisScale, d.isAwayFromOrigin); } function dragged(event, d) { if(!d.moveX && !d.moveY) { return } dragUpdate(); const yAxisLine = ({ point1: [interactionBoundary(xAxisScale, yAxisScale).xMin, interactionBoundary(xAxisScale, yAxisScale).yMin], point2: [interactionBoundary(xAxisScale, yAxisScale).xMin, interactionBoundary(xAxisScale, yAxisScale).yMax] }) const xAxisLine = ({ point1: [interactionBoundary(xAxisScale, yAxisScale).xMin, interactionBoundary(xAxisScale, yAxisScale).yMin], point2: [interactionBoundary(xAxisScale, yAxisScale).xMax, interactionBoundary(xAxisScale, yAxisScale).yMin] }) const topLine = ({ point1: [interactionBoundary(xAxisScale, yAxisScale).xMin, interactionBoundary(xAxisScale, yAxisScale).yMax], point2: [interactionBoundary(xAxisScale, yAxisScale).xMax, interactionBoundary(xAxisScale, yAxisScale).yMax] }) const rightLine = ({ point1: [interactionBoundary(xAxisScale, yAxisScale).xMax, interactionBoundary(xAxisScale, yAxisScale).yMax], point2: [interactionBoundary(xAxisScale, yAxisScale).xMax, interactionBoundary(xAxisScale, yAxisScale).yMin] }) svg.selectAll("line.vDrop").remove(); svg.selectAll("line.hDrop").remove(); appendLabels(lines, xAxisScale, yAxisScale); var dx=event.dx; var dy=event.dy; if (d.moveX) { d.point1[0] = xScale.invert(xScale(d.point1[0])+dx); d.point2[0] = xScale.invert(xScale(d.point2[0])+dx); } if (d.moveY) { d.point1[1] = yScale.invert(yScale(d.point1[1])+dy); d.point2[1] = yScale.invert(yScale(d.point2[1])+dy); } d.x1 = xScale(d.point1[0]); d.y1 = yScale(d.point1[1]); d.x2 = xScale(d.point2[0]); d.y2 = yScale(d.point2[1]); d.il = false; d.ib = false; d.it = false; d.ir = false; // handle line crossing interaction boundaries // branch for horizontal lines if (d.point1[1] == d.point2[1]) { if (d.point1[1] < interactionBoundary(xAxisScale, yAxisScale).yMin) { d.point1[1] += (yAxisScale.domain[1] - yAxisScale.domain[0]) / 100; d.point2[1] += (yAxisScale.domain[1] - yAxisScale.domain[0]) / 100; } else if (d.point1[1] > interactionBoundary(xAxisScale, yAxisScale).yMax) { d.point1[1] -= (yAxisScale.domain[1] - yAxisScale.domain[0]) / 100; d.point2[1] -= (yAxisScale.domain[1] - yAxisScale.domain[0]) / 100; } } // vertical lines else if (d.point1[0] == d.point2[0]) { if (d.point1[0] < interactionBoundary(xAxisScale, yAxisScale).xMin) { d.point1[0] += (xAxisScale.domain[1] - xAxisScale.domain[0]) / 100; d.point2[0] += (xAxisScale.domain[1] - xAxisScale.domain[0]) / 100; } else if (d.point1[0] > interactionBoundary(xAxisScale, yAxisScale).xMax) { d.point1[0] -= (xAxisScale.domain[1] - xAxisScale.domain[0]) / 100; d.point2[0] -= (xAxisScale.domain[1] - xAxisScale.domain[0]) / 100; } } // branch for all other lines else { // console.log("call to intersectLines", d, yAxisLine) if (intersectLines(d, yAxisLine, "1")) { // console.log("intersecting Y at", intersectLines(d, yAxisLine)); d.il = true; if (xScale(d.point1[0]) < xScale(interactionBoundary(xAxisScale, yAxisScale).xMin)) { d.x1 = xScale(interactionBoundary(xAxisScale, yAxisScale).xMin); d.y1 = yScale(intersectLines(d, yAxisLine, "2").y); } else if (xScale(d.point2[0]) < xScale(interactionBoundary(xAxisScale, yAxisScale).xMin)) { d.x2 = xScale(interactionBoundary(xAxisScale, yAxisScale).xMin); d.y2 = yScale(intersectLines(d, yAxisLine, "3").y); } } // console.log("call to intersectLines", d, xAxisLine) if(intersectLines(d, xAxisLine, "4")) { // console.log(d) // console.log("intersecting X at", intersectLines(d, xAxisLine)); // remember that yScale is inverted, so this is checking for being less than min. d.ib = true; if (yScale(d.point1[1]) > yScale(interactionBoundary(xAxisScale, yAxisScale).yMin)) { d.x1 = xScale(intersectLines(d, xAxisLine, "5").x); d.y1 = yScale(interactionBoundary(xAxisScale, yAxisScale).yMin); } else if (yScale(d.point2[1]) > yScale(interactionBoundary(xAxisScale, yAxisScale).yMin)) { d.x2 = xScale(intersectLines(d, xAxisLine, "6").x); d.y2 = yScale(interactionBoundary(xAxisScale, yAxisScale).yMin); } } if(intersectLines(d, topLine, "7")) { d.it = true; if (yScale(d.point1[1]) < yScale(yAxisScale.domain[1])) { d.x1 = xScale(intersectLines(d, topLine, "8").x); d.y1 = yScale(topLine.point1[1]); } else if (yScale(d.point2[1]) < yScale(yAxisScale.domain[1])) { d.x2 = xScale(intersectLines(d, topLine, "9").x); d.y2 = yScale(topLine.point1[1]); } } if (intersectLines(d, rightLine, "10")) { d.ir = true; if (xScale(d.point1[0]) > xScale(xAxisScale.domain[1])) { d.x1 = xScale(rightLine.point1[0]); d.y1 = yScale(intersectLines(d, rightLine, "11").y); } else if (xScale(d.point2[0]) > xScale(xAxisScale.domain[0])) { d.x2 = xScale(rightLine.point1[0]); d.y2 = yScale(intersectLines(d, rightLine, "12").y); } } } // if the edit would make the line too short, bounce it. if (distance(xyScale(xAxisScale, yAxisScale, d.point1), xyScale(xAxisScale, yAxisScale, d.point2)) * LINE_MIN_LENGTH > distance([d.x1, d.y1], [d.x2, d.y2])) { // console.log("too short") if (d.il) { d.point1[0] += (xAxisScale.domain[1] - xAxisScale.domain[0]) / 100; d.point2[0] += (xAxisScale.domain[1] - xAxisScale.domain[0]) / 100; } if (d.ib) { d.point1[1] += (yAxisScale.domain[1] - yAxisScale.domain[0]) / 100; d.point2[1] += (yAxisScale.domain[1] - yAxisScale.domain[0]) / 100; } if (d.it) { d.point1[1] -= (yAxisScale.domain[1] - yAxisScale.domain[0]) / 100; d.point2[1] -= (yAxisScale.domain[1] - yAxisScale.domain[0]) / 100; } if (d.ir) { d.point1[0] -= (xAxisScale.domain[1] - xAxisScale.domain[0]) / 100; d.point2[0] -= (xAxisScale.domain[1] - xAxisScale.domain[0]) / 100; } } else { d3.select(this) .attr('x1', d.x1) .attr('y1', d.y1) .attr('x2', d.x2) .attr('y2', d.y2) } appendIntersectionObjects(lines, intersectionPoints, xAxisScale, yAxisScale); } function dragended(event, d) { if(!d.moveX && !d.moveY) { return } if (d.drawOriginLine) { const ghostLineX1 = lineMap[`line.ghost_${d.id}_x1`] const ghostLineY1 = lineMap[`line.ghost_${d.id}_y1`] const ghostLineX2 = lineMap[`line.ghost_${d.id}_x2`] const ghostLineY2 = lineMap[`line.ghost_${d.id}_y2`] const draggedLineX1 = d.x1 const draggedLineY1 = d.y1 if ( (ghostLineX1 < draggedLineX1 + GHOST_MIN_DISTANCE && ghostLineX1 > draggedLineX1 - GHOST_MIN_DISTANCE) && (ghostLineY1 > draggedLineY1 - GHOST_MIN_DISTANCE && ghostLineY1 < draggedLineY1 + GHOST_MIN_DISTANCE)) { d.x1 = ghostLineX1 d.y1 = ghostLineY1 d.x2 = ghostLineX2 d.y2 = ghostLineY2 d.point1[0] = xScale.invert(ghostLineX1) d.point1[1] = yScale.invert(ghostLineY1) d.point2[0] = xScale.invert(ghostLineX2) d.point2[1] = yScale.invert(ghostLineY2) d3.select(this) .attr('x1', d.x1) .attr('y1', d.y1) .attr('x2', d.x2) .attr('y2', d.y2) d3.select(`line.ghost_${d.id}`) .attr('opacity', '0') d3.select(`text.ghost_${d.id}`) .attr('opacity', '0') d3.selectAll("text.staticIntersection").remove(); d.isAwayFromOrigin = false; } } update(lines, intersectionPoints, xAxisScale, yAxisScale); d3.select(this) .attr("cursor", getCursor(d)) .transition().duration(200).attr("stroke-width", d.width).attr("filter", "drop-shadow(0)") } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }4a:Tbde,function appendStaticIntersectionObjects(lines, intersectionPoints, xAxisScale, yAxisScale) { const xScale = d3.scaleLinear().domain(xAxisScale.domain).range(xAxisScale.range) const yScale = d3.scaleLinear().domain(yAxisScale.domain).range(yAxisScale.range) intersectionPoints.map(pair => { // Guard: in bounds // console.log("in appendStaticIntersection", lines) // console.log("pair", pair) const point = intersectLines(getLineByLabel(lines, pair.labels[0]), getLineByLabel(lines, pair.labels[1]), "13" ); if (point.x >= xAxisScale.domain[0] && point.x <= xAxisScale.domain[1] && point.y >= yAxisScale.domain[0] && point.y <= yAxisScale.domain[1]) { d3.selectAll("line.staticVDrop").remove(); svg.append("line") .classed('staticVDrop', true) .style('stroke-width', dropLines.width) .style('stroke-dasharray', dropLines.dashCSS) .style('stroke', 'gray') .attr("x1", xScale(point.x)).attr("y1", height - margin.bottom) .attr("x2", xScale(point.x)).attr("y2", yScale(point.y)); d3.selectAll("line.staticHDrop").remove(); svg.append("line") .classed('staticHDrop', true) .style('stroke-width', dropLines.width) .style('stroke-dasharray', dropLines.dashCSS) .style('stroke', 'gray') .attr("x1", xScale(xAxisScale.domain[0])).attr("y1", yScale(point.y)) .attr("x2", xScale(point.x)).attr("y2", yScale(point.y)) d3.selectAll("circle.staticIntersection").remove(); svg.append("circle") .classed("staticIntersection", true) .attr('cx', xScale(point.x)) .attr('cy', yScale(point.y)) .attr('r','5px') .style("stroke", '#5A5A5A') .style("stroke-width", "2px") .style('fill', 'none') // static number labels d3.selectAll('text.vDropLabel_static').remove(); d3.selectAll('text.hDropLabel_static').remove(); svg.append('text') .classed("vDropLabel_static", true) .attr('x', xScale(point.x) + pair.verticalLabelOffset[0]) .attr('y', height - margin.bottom + pair.verticalLabelOffset[1]) .style('fill', 'gray') .style('text-shadow', textShadow) .style("font-size", 18) .style("font-weight", 'bold') .text(() => `${d3.format(pair.labelFormat)(point.x)}`) svg.append('text') .classed("hDropLabel_static", true) .attr('x', xScale(xAxisScale.domain[0]) + pair.horizontalLabelOffset[0]) .attr('y', yScale(point.y) + pair.horizontalLabelOffset[1]) .style('fill', 'gray') .style('text-shadow', textShadow) .style("font-size", 18) .style("font-weight", 'bold') .text(() => `${d3.format(pair.labelFormat)(point.y)}`) } }) }4b:T2318,function appendIntersectionObjects(lines, intersectionPoints, xAxisScale, yAxisScale, isAwayFromOrigin = false) { const xScale = d3.scaleLinear().domain(xAxisScale.domain).range(xAxisScale.range) const yScale = d3.scaleLinear().domain(yAxisScale.domain).range(yAxisScale.range) if (isAwayFromOrigin) { svg .append('defs') .append('marker') .attr('id', 'arrow') .attr('viewBox', [0, 0, arrowHead.markerBoxWidth, arrowHead.markerBoxHeight]) .attr('refX', arrowHead.refX) .attr('refY', arrowHead.refY) .attr('markerWidth', arrowHead.markerBoxWidth) .attr('markerHeight', arrowHead.markerBoxHeight) .attr('orient', 'auto-start-reverse') .append('path') .attr('d', d3.line()(arrowHead.arrowPoints)); d3.select('circle.staticIntersection').raise(); // d3.selectAll("text.staticIntersection").remove(); // const tempX = d3.select("circle.staticIntersection").attr("cx") // const tempY = d3.select("circle.staticIntersection").attr("cy") // svg.append('text') // .classed("staticIntersection", true) // .attr('x', tempX ) // .attr('y', tempY) // .style('fill', 'gray') // .style('text-shadow', textShadow) // .style("font-size", 14) // // .style("font-weight", 'bold') // .text("Old equilibrium"); } // remove last objects before appending updated objects svg.selectAll("circle.intersection").remove(); svg.selectAll("line.hDrop").remove(); svg.selectAll("line.vDrop").remove(); svg.selectAll('text.vDropLabel').remove(); svg.selectAll('text.hDropLabel').remove(); svg.selectAll('line.hMeasure').remove(); svg.selectAll('line.vMeasure').remove(); d3.select("text.intersection1").remove(); // console.log("ip", intersectionPoints) intersectionPoints.map( pair => { // console.log("pair", pair) if (isAwayFromOrigin) { d3.selectAll("text.staticIntersection").remove(); const tempX = d3.select("circle.staticIntersection").attr("cx") const tempY = d3.select("circle.staticIntersection").attr("cy") svg.append('text') .classed("staticIntersection", true) .attr('x', tempX ) .attr('y', tempY) .style('fill', 'gray') .style('text-shadow', textShadow) .style("font-size", 14) // .style("font-weight", 'bold') .text(pair.oldLabel); } // Guard: in bounds // note: 'point' is intersectionPoint. change this later to be more clear. const point = intersectLines(getLineByLabel(lines, pair.labels[0]), getLineByLabel(lines, pair.labels[1]), "14"); // console.log("point", point) // console.log(point.x >= xAxisScale.domain[0] && point.x <= xAxisScale.domain[1]) // console.log (point.y >= yAxisScale.domain[0] && point.y <= yAxisScale.domain[1]) if (point.x >= xAxisScale.domain[0] && point.x <= xAxisScale.domain[1] && point.y >= yAxisScale.domain[0] && point.y <= yAxisScale.domain[1]) { // moving vertical drop line if (pair.drawVerticalDropline) { svg.append("line") .classed('vDrop', true) .style('stroke-width', dropLines.width) .style('stroke-dasharray', dropLines.dashCSS) .style('stroke', 'black') .attr("x1", xScale(point.x)).attr("y1", height - margin.bottom) .attr("x2", xScale(point.x)).attr("y2", yScale(point.y)); svg.selectAll('line.dotLineGhost').remove(); let ghostLines = document.querySelectorAll('[class^="ghost_"]') const vDropline = svg.select('.vDrop'); const vDroplineX = vDropline.attr('x1'); const vDroplineY1 = vDropline.attr('y1'); const vDroplineY2 = vDropline.attr('y2'); svg.selectAll('line').each(function() { const line = d3.select(this); // console.log("checking line", d3.select(this)) const className = line.attr('class'); if (pair.handleGhostLineIntersection) { if (className && className.startsWith('ghost_')) { const x1 = line.attr('x1'); const y1 = line.attr('y1'); const x2 = line.attr('x2'); const y2 = line.attr('y2'); const intersection = intersect(vDroplineX, vDroplineY1, vDroplineX, vDroplineY2, x1, y1, x2, y2); // console.log("intersection", intersection.y) // console.log("intersection point", point) if (intersection) { // vertical dropline intersects with this line, do something here // console.log('Vertical dropline intersects with line', line); const parts = intersection.y.split("-"); const intersectionY = parseInt(parts[0]) - parseFloat(parts[1]); // console.log("int y", intersectionY) const dotLine = svg.append('line') .attr('class', 'dotLineGhost') .attr("x1", xScale(xAxisScale.domain[0])).attr("y1", intersectionY) .attr("x2", intersection.x).attr("y2", intersectionY) .style('stroke', 'black') .style('stroke-width', dropLines.width) .style('stroke-dasharray', dropLines.dashCSS) // console.log("dotline", dotLine) // console.log("intersection", intersection) } } } }); } // check if the vertical dropline intersects with any lines if (pair.drawVerticalDropline) { } // moving horizontal drop line if(pair.drawHorizontalDropline) { svg.append("line") .classed('hDrop', true) .style('stroke-width', dropLines.width) .style('stroke-dasharray', dropLines.dashCSS) .style('stroke', 'black') .attr("x1", xScale(xAxisScale.domain[0])).attr("y1", yScale(point.y)) .attr("x2", xScale(point.x)).attr("y2", yScale(point.y)) } if(pair.drawHorizontalMeasureLine) { const hml = svg.append("line") .classed('hMeasure', true) .style('stroke-width', dropLines.width) .style('stroke', 'gray') .style('marker-end', "url(#arrow)") .attr("x1", svg.select("line.staticVDrop").attr("x1")) .attr("y1", yScale(yAxisScale.domain[0]) - 20) .attr("x2", xScale(point.x)).attr("y2", yScale(yAxisScale.domain[0]) - 20 ) // console.log("hml", hml) } if(pair.drawVerticalMeasureLine) { // console.log("v measure line") // console.log(xScale(0)) var x0 = xScale(xAxisScale.domain[0]) if(x0 < 0) { x0 = -1 * xScale(xAxisScale.domain[0]) } const vml = svg.append("line") .classed('vMeasure', true) .style('stroke-width', dropLines.width) .style('stroke', 'gray') .style('marker-end', "url(#arrow)") .attr("x1", x0 + 20).attr("y1", svg.select("line.staticHDrop").attr("y1")) .attr("x2", x0 + 20).attr("y2", yScale(point.y)) // console.log("v measure line", vml) } // moving intersection line const movingIntersection = svg.append("circle") .classed("intersection", true) .attr('cx', xScale(point.x)) .attr('cy', yScale(point.y)) .attr('r','5px') .style("stroke", () => { return (pair.isPrimary) ? 'none' : '#5A5A5A' }) .style("stroke-width", "2px") .style('fill', () => { return (pair.isPrimary) ? 'black' : 'none' }) // console.log(movingIntersection) // if (isAwayFromOrigin) { svg.append('text') .classed("intersection1", true) .attr('x', xScale(point.x)) .attr('y', yScale(point.y)) .style('fill', 'black') .style('text-shadow', textShadow) .style("font-size", 14) // .style("font-weight", 'bold') .text(pair.label); // } // moving numbers d3.selectAll('text.vDropLabel').remove(); d3.selectAll('text.hDropLabel').remove(); svg.append('text') .classed("vDropLabel", true) .attr('x', xScale(point.x) + pair.verticalLabelOffset[0]) .attr('y', height - margin.bottom + pair.verticalLabelOffset[1]) .style('fill', 'black') .style('text-shadow', textShadow) .style("font-size", 18) .style("font-weight", 'bold') .text(() => `${d3.format(pair.labelFormat)(point.x)}`) svg.append('text') .classed("hDropLabel", true) .attr('x', xScale(xAxisScale.domain[0]) + pair.horizontalLabelOffset[0]) .attr('y', yScale(point.y) + pair.horizontalLabelOffset[1]) .style('fill', 'black') .style('text-shadow', textShadow) .style("font-size", 18) .style("font-weight", 'bold') .text(() => `${d3.format(pair.labelFormat)(point.y)}`) } }) }4c:T49b,function appendAnnotations() { svg.selectAll("foreignObject.annotation").remove() svg.selectAll(".annotation") .data(annotations) .enter().append('foreignObject') .classed("annotation", true) .attr("width", (d) => d.width) .attr("height", (d) => d.height) .attr("x", (d) => { // TODO: check what type of object was attached. If it is a line, this is fine. // If it is a point, this will break since points don't have an 'x1' attribute. if (d.hasOwnProperty('parentObject')) { // console.log(d); const parentX1 = d3.select(d.parentObject).attr('x1'); return parentX1; } else { return d.x; } }) .attr("y", (d) => { // comment above applies. if (d.hasOwnProperty('parentObject')) { const parentY = d3.select(d.parentObject).attr('y1'); return parentY; } else { return d.y; } }) .append("xhtml:body") .style("text-align", d => { if ('align' in d) { return d.align; } else { return 'left' } }) .style('text-shadow', textShadow) .html((d) => d.html); }4d:[] 44:{"id":"2705a547b59cffc9","slug":"line-chart-v2","title":"Line chart - v2","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-03-10T19:39:19.322Z","update_time":"$D2023-03-17T17:23:48.038Z","view_time":null,"first_public_time":"$D2023-03-10T19:39:19.322Z","has_unpublished_edits":null,"fork":{"id":"b00b7fa4dfd60091","slug":"interactive-chart","title":"Line chart","owner":{"id":"83f7a2eafb26d158","login":"maxwalts","name":"Max Walts"}},"stars":0,"starred":false,"owner":{"type":"team","id":"83f7a2eafb26d158","login":"maxwalts","name":"Max Walts","avatar_url":"https://avatars-next.observableusercontent.com/f35246c938c9ebcd1887b65c22deac155cad356508b03c84d07df81ed7ee0a73","tier":"starter_2024","bio":"","following":false},"version":4928,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0f4badd377e13041","login":"maxwalts","name":"Max Walts","avatar_url":"https://avatars-next.observableusercontent.com/f35246c938c9ebcd1887b65c22deac155cad356508b03c84d07df81ed7ee0a73","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"0f4badd377e13041","login":"maxwalts","name":"Max Walts","avatar_url":"https://avatars-next.observableusercontent.com/f35246c938c9ebcd1887b65c22deac155cad356508b03c84d07df81ed7ee0a73","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Line chart - v2","cells":[{"id":2114,"value":"# Line chart - v2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":912,"value":"# Section 1: Chart element configuration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1521,"value":"header = ({title: \"Title\", \n subtitle: \"\"\n })\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1417,"value":" // There can be any number of lines. \ndefaultLines = [ \n {\n label: 'Demand', \n id: '1', // new attribute ID. This must be a string without spaces or other special characters.\n labelSize: \"14px\",\n point1: [20, 60], \n point2: [80, 10], \n color: colors.demandBlue,\n width: 4,\n moveX: true,\n moveY: false,\n drawOriginLine: true\n },\n {\n label: 'Supply', \n id: '2',\n labelSize: \"14px\",\n point1: [10, 10],\n point2: [80, 90],\n color: colors.supplyRed,\n width: 4,\n moveX: true,\n moveY: true,\n drawOriginLine: true\n },\n ]\n\n// append monopoly pricing as a function of a curve","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2874,"value":"// Define intersection points\n// Each point defined here gets droplines and a circle (open circle if isPrimary = false)\n// The droplines will take the color of the first label in the labels array. \ndefaultIntersectionPoints = [\n {\n label: \"Equilibrium\",\n labels: [\"Demand\", \"Supply\"],\n isPrimary: true,\n \n drawHorizontalDropline: true,\n drawVerticalDropline: true,\n \n verticalLabelOffset: [0, 0],\n verticalLabelColor: 'black',\n \n labelFormat: \".0f\", // format according to 'd3-format' spec https://github.com/d3/d3-format\n \n horizontalLabelOffset: [0, 0],\n horizontalLabelColor: 'black',\n\n drawVerticalMeasureLine: true,\n drawHorizontalMeasureLine: true\n \n }\n];\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4453,"value":"defaultYAxisScale = ({\n title: {\n width: '90px',\n height: '100px',\n // edit styling in CSS section under axisTitle class\n html: `

Price `,\n x: -90,\n y: margin.top - 20, \n size: \"13px\"\n }, \n domain: [0, 100], \n range: [height - margin.bottom, margin.top], \n numTicks: 5, \n // Define a custom set of tick values\n tickValues: [10, 20, 30, 40, 50, 60, 70, 80, 90],\n // Define format of those ticks\n tickFormat: [10, 20, 30, 40, 50, 60, 70, 80, 90],\n // length of the outer ticks\n tickSize: 0,\n tickSizeOuter: 0\n \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4456,"value":"defaultXAxisScale = ({\n title: {\n width: '170px',\n height: '90px',\n // edit styling in CSS section under axisTitle class\n html: `

Quantity

`,\n x: (width - margin.right - 160),\n y: 0,\n size: \"12px\"\n },\n\n domain: [0, 100], \n range: [margin.left, width - margin.right], \n numTicks: 5,\n // Define a custom set of tick values\n tickValues: [10, 20, 30, 40, 50, 60, 70, 80, 90],\n // Define format of those ticks\n tickFormat: [10, 20, 30, 40, 50, 60, 70, 80, 90],\n // Define length of the ticks\n tickSize: 0,\n tickSizeOuter: 0\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1761,"value":"annotations = [\n {\n width: 250, \n height: 200, \n x: margin.left, \n y: 200, \n // html: \"

TEST

\"\n html: \"\",\n align: 'left',\n // parentObject: \"#givenLine_1\"\n }\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2647,"value":"footer = ({text: \"\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3807,"value":"function interactionBoundary(xAxisScale, yAxisScale) {\n return({xMin: xAxisScale.domain[0], xMax: xAxisScale.domain[1], yMin: yAxisScale.domain[0], yMax: yAxisScale.domain[1]})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3838,"value":"// TODO: change line behavior based on this. Now it always cuts.\ncutLineOnBoundaryCross = true;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4567,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4731,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4374,"value":"config = ({header: header, footer: footer, annotations: annotations})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4071,"value":"// update things that react to user interaction\n// update initial render. TODO call this 'append'?\nfunction update(lines, intersectionPoints, xAxisScale, yAxisScale) {\n // console.log(\"in update\", lines)\n appendLabels(lines, xAxisScale, yAxisScale);\n appendIntersectionObjects(lines, intersectionPoints, xAxisScale, yAxisScale);\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4135,"value":"// update things that react to user interaction & need to be called later\nfunction dragUpdate() {\n appendAnnotations();\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"# Section 2: Style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1454,"value":" // config droplines\ndropLines = ({width: 1, dashCSS: \"8,2\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2822,"value":"// line can be at least X% of original line size\nLINE_MIN_LENGTH = 0.2;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3202,"value":"// distance in pixels from old line to dragged line before old line disappears\nGHOST_MIN_DISTANCE = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2226,"value":"// Create arrowhead marker\narrowHead = ({\n markerBoxWidth: 4,\n markerBoxHeight: 4,\n refXL: 4,\n refY: 4 / 2,\n markerWidth: 4 ,\n markerHeight: 4 ,\n arrowPoints: [[0, 0], [0, 4], [4, 2]]\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"colors = ({\n demandBlue: d3.color(\"#0066b3\"),\n supplyRed: d3.color(\"#d12244\"),\n shifterPurple: d3.color(\"#92278f\"),\n shifterGreen: d3.color(\"#007f3e\"),\n brown: d3.color(\"#8f5001\"),\n orange: d3.color(\"#c74a1b\"),\n black: d3.color(\"#000000\")\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1932,"value":"textShadow = '1px 1px 0 white, 1px 0 0 white, 0 1px 0 white, -1px -1px 0 white, -1px 0 0 white, 0 -1px 0 white, 1px -1px 0 white, -1px 1px 0 white'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3724,"value":"textShadowDark = '1px 1px 0 black, 1px 0 0 black, 0 1px 0 black, -1px -1px 0 black, -1px 0 0 black, 0 -1px 0 black, 1px -1px 0 black, -1px 1px 0 black'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"margin = ({left: width/8, \n top: getTopMargin(),\n right: width/8, \n bottom: getBottomMargin()\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1465,"value":"// currently unsued\nmeasureLines = ({strokeWidth: 44, includeArrow: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"// Defines viewport height\nheight = 700","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4371,"value":"globals = ({colors: colors, margin: margin, height: height})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2700,"value":"# Section 3: CSS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3401,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1837,"value":"# Section 4: Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3855,"value":"mutable lineMap = ({})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4304,"value":"ghostLines = [];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2028,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3541,"value":"function appendHeaderFooter() {\n if ('title' in header && header.title != \"\") {\n svg.append('xhtml:text')\n .classed(\"headerTitle\", true)\n .attr('x', margin.left)\n .attr('y', height/12)\n .text(header.title)\n svg.append('text')\n .classed(\"headerSubtitle\", true)\n .attr('x', margin.left)\n .attr('y', height/12 + 20)\n .text(header.subtitle)\n }\n\n if ('text' in footer && footer.text != \"\") {\n svg.append('text')\n .classed(\"footer\", true)\n .attr('x', margin.left)\n .attr('y', height - 38)\n .text(footer.text)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3948,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3297,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2657,"value":"// if the x1 or x2 attributes on the line have been changed due to crossing the border, append the label there instead . \n\nfunction appendLabels(lines, xAxisScale, yAxisScale) {\n const xScale = d3.scaleLinear().domain(xAxisScale.domain).range(xAxisScale.range)\n const yScale = d3.scaleLinear().domain(yAxisScale.domain).range(yAxisScale.range)\n\n svg.selectAll(\"text.label\").remove();\n\n // console.log(\"in appendLabels\", lines)\n\n svg.selectAll(\"text.label\")\n .data(lines)\n .enter().append('text')\n .classed('label', true)\n .style(\"font-size\", d => d.labelSize)\n .style('fill', d => getColor(d))\n .style('text-shadow', textShadow)\n .attr(\"x\", d => {\n return ('x2' in d) ? d.x2 : xScale(d.point2[0])\n })\n .attr(\"y\", d => {\n return ('y2' in d) ? d.y2 : yScale(d.point2[1])\n })\n .text(d => d.label);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2676,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4175,"value":"function appendSaticAnnotations() {\n svg.selectAll(\"foreignObject.annotation\").remove()\n\n\n svg.selectAll(\".annotation\")\n .data(annotations)\n .enter().append('foreignObject')\n .classed(\"annotation\", true)\n .attr(\"width\", (d) => d.width)\n .attr(\"height\", (d) => d.height)\n .attr(\"x\", (d) => d.x)\n .attr(\"y\", (d) => d.y)\n .append(\"xhtml:body\")\n .style(\"text-align\", d => {\n if ('align' in d) {\n return d.align;\n }\n else {\n return 'left'\n }\n })\n .style('text-shadow', textShadow)\n .html((d) => d.html);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2522,"value":"function getTopMargin () {\n if (header.hasOwnProperty('title') && header.title != \"\") {\n return height/5;\n }\n else {\n return height/8;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3640,"value":"function getBottomMargin () {\n if (footer.hasOwnProperty('text') && header.text != \"\") {\n return height/5;\n }\n else {\n return height/8;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3652,"value":"function getSideMargin() {\n const chartHeight = height - margin.top - margin.bottom;\n const chartWidth = width - margin.left - margin.right;\n if((chartHeight * 2) > chartWidth) {\n return (width-height / 2)\n }\n else {\n return width/8\n }\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2961,"value":"function getCursor (d) {\n if (d.moveX && d.moveY) {\n return 'pointer'\n }\n else if (d.moveX) {\n return 'ew-resize'\n }\n else if (d.moveY) {\n return 'ns-resize'\n }\n else {\n return 'default'\n }\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2446,"value":"// picks color based on label. If label does not map to a color, return user-given line color. \nfunction getColor(d, modifier = \"none\") {\n if (d.label.toUpperCase() == \"DEMAND\") {\n return colors.demandBlue;\n }\n else if (d.label.toUpperCase == \"SUPPLY\") {\n return colors.supplyRed;\n }\n else if ('color' in d) {\n return d.color;\n }\n else {\n return colors.black;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2464,"value":"// given a label, return first line in lines with that label. Capitalization does not matter.\nfunction getLineByLabel (lines, labelIn) {\n\n // console.log(\"in getline\", lines)\n return lines.find(line => (line.label.toUpperCase() === labelIn.toUpperCase()));\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2259,"value":"svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"tabindex\", 1)\n .attr(\"font-family\", 'Helvetica Neue')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"// function xScale(xAxisScale, yAxisScale, num) {\n // xScale = d3.scaleLinear().domain(xAxisScale.domain).range(xAxisScale.range)\n// return xScale(num)\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"// function yScale(xAxisScale, yAxisScale, num) {\n // yScale = d3.scaleLinear().domain(yAxisScale.domain).range(yAxisScale.range)\n// return yScale(num)\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"// yAxis = g => g\n// .attr(\"transform\", `translate(${margin.left},0)`)\n// .classed(\"y\", true)\n// // Ticks\n// .call(d3.axisLeft(yScale)\n// .ticks(yAxisScale.numTicks, \"$.2f\")\n// .tickValues(yAxisScale.tickValues)\n// .tickFormat((d, i) => yAxisScale.tickFormat[i])\n// .tickSize(yAxisScale.tickSize)\n// .tickSizeOuter(yAxisScale.tickSizeOuter)\n// )\n// // Axis title\n// .call(g => g.append(\"foreignObject\")\n// .attr(\"width\", yAxisScale.title.width)\n// .attr(\"height\", yAxisScale.title.height)\n// .attr(\"x\", yAxisScale.title.x)\n// .attr(\"y\", yAxisScale.title.y)\n// .append(\"xhtml:body\")\n// .html(yAxisScale.title.html))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"function xyScale(xAxisScale, yAxisScale, [x, y]) {\n const xScale = d3.scaleLinear().domain(xAxisScale.domain).range(xAxisScale.range)\n const yScale = d3.scaleLinear().domain(yAxisScale.domain).range(yAxisScale.range)\n return [xScale(x), yScale(y)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"function distance([x1, y1], [x2, y2]) {\n return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"function interpolate([x1, y1], [x2, y2], t) {\n return [x1 + (x2 - x1) * t, y1 + (y2 - y1) * t];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"function project([x1, y1], [x2, y2], [x3, y3]) {\n const x21 = x2 - x1, y21 = y2 - y1;\n const x31 = x3 - x1, y31 = y3 - y1;\n return (x31 * x21 + y31 * y21) / (x21 * x21 + y21 * y21);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2711,"value":"function yAxisLine(xAxisScale, yAxisScale) {\n return \n ({\n point1: [interactionBoundary(xAxisScale, yAxisScale).xMin, interactionBoundary(xAxisScale, yAxisScale).yMin],\n point2: [interactionBoundary(xAxisScale, yAxisScale).xMin, interactionBoundary(xAxisScale, yAxisScale).yMax]\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2730,"value":"function xAxisLine(xAxisScale, yAxisScale) {\n return ({\n point1: [interactionBoundary(xAxisScale, yAxisScale).xMin, interactionBoundary(xAxisScale, yAxisScale).yMin],\n point2: [interactionBoundary(xAxisScale, yAxisScale).xMax, interactionBoundary(xAxisScale, yAxisScale).yMin]\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2801,"value":"// Can use for automatic setting of boundaries\nfunction topLine(xAxisScale, yAxisScale) {\n return ({\n point1: [interactionBoundary.xMin, interactionBoundary.yMax],\n point2: [interactionBoundary.xMax, interactionBoundary.yMax]\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2805,"value":"// actual axis boundary, todo set as fallback.\nfunction rightLine(xAxisScale, yAxisScale) {\n return ({\n point1: [interactionBoundary(xAxisScale, yAxisScale).xMax, interactionBoundary(xAxisScale, yAxisScale).yMax],\n point2: [interactionBoundary(xAxisScale, yAxisScale).xMax, interactionBoundary(xAxisScale, yAxisScale).yMin]\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"function intersectLines(line1, line2, msg = \"default\") {\n\n // console.log(\"intersectLines\", msg)\n // // console.log(msg)\n\n // console.log(\"line1\", line1)\n // console.log(\"line1 point1\", line1.point1)\n // console.log(\"line1 point2\", line1.point2)\n \n const x1 = line1.point1[0], y1 = line1.point1[1], x2 = line1.point2[0], y2 = line1.point2[1], \n x3 = line2.point1[0], y3 = line2.point1[1], x4 = line2.point2[0], y4 = line2.point2[1];\n return intersect(x1, y1, x2, y2, x3, y3, x4, y4);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"// Determine the intersection point of two line segments\n// Return FALSE if the lines don't intersect\nfunction intersect(x1, y1, x2, y2, x3, y3, x4, y4) {\n\n // Check if none of the lines are of length 0\n\tif ((x1 === x2 && y1 === y2) || (x3 === x4 && y3 === y4)) {\n\t\treturn false\n\t}\n\n\tconst denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1))\n\n // Lines are parallel\n\tif (denominator === 0) {\n\t\treturn false\n\t}\n\n\tlet ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator\n\tlet ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator\n\n // is the intersection along the segments\n\tif (ua < 0 || ua > 1 || ub < 0 || ub > 1) {\n\t\treturn false\n\t}\n\n // Return a object with the x and y coordinates of the intersection\n\tlet x = x1 + ua * (x2 - x1)\n\tlet y = y1 + ua * (y2 - y1)\n\n\treturn {x, y}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"// get point on line based on the current value of Y\n// targetline is an array of 2 points [[x1, y1][x2, y2]]\n// function dropPoint(inputY, p0, p1) {\n// const xScale = d3.scaleLinear().domain(xAxisScale.domain).range(xAxisScale.range)\n// const yScale = d3.scaleLinear().domain(yAxisScale.domain).range(yAxisScale.range)\n\n\n// const dy = p1[1] - p0[1];\n// const dx = p1[0] - p0[0];\n\n// const b = p0[1] - (dy/dx) * p0[0];\n// const newX = (inputY - b) / (dy/dx);\n\n// const ans = [newX, inputY]\n// return [xScale(newX), yScale(inputY)]\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 45:"$44:body"