3e:null 3f:["$","title",null,{"children":"{Interview Fork} Supply and Demand chart | Max Walts | Observable"}] 45:T460,{ // clear old objects svg.selectAll("line").remove(); svg.selectAll("g").remove(); svg.selectAll("text").remove(); // Append axes svg.append("g").call(xAxis); svg.append("g").call(yAxis); // 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.originalP1 = d.point1; // d.originalP2 = d.point2; 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) // append things that will not change based on user interaction. appendHeaderFooter(); appendStaticIntersectionObjects(); update(); return svg.node(); }46:T2319,drag = { // d is the line that is being dragged // event is the mouse event function dragstarted(event, d) { console.log("line", svg.select(`line.ghost_${d.id}`)) console.log("text", svg.select(`text.ghost_${d.id}`)) console.log("appended", this) // 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')) { // create a group for every line, a group for every intersection? var g = svg.append('g'); console.log(g); g .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)') g .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(d.isAwayFromOrigin); } function dragged(event, d) { dragUpdate(); svg.selectAll("line.vDrop").remove(); svg.selectAll("line.hDrop").remove(); appendLabels(); 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.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.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.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.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 { if (intersectLines(d, yAxisLine)) { // console.log("intersecting Y at", intersectLines(d, yAxisLine)); d.il = true; if (xScale(d.point1[0]) < xScale(interactionBoundary.xMin)) { d.x1 = xScale(interactionBoundary.xMin); d.y1 = yScale(intersectLines(d, yAxisLine).y); } else if (xScale(d.point2[0]) < xScale(interactionBoundary.xMin)) { d.x2 = xScale(interactionBoundary.xMin); d.y2 = yScale(intersectLines(d, yAxisLine).y); } } if(intersectLines(d, xAxisLine)) { 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.yMin)) { d.x1 = xScale(intersectLines(d, xAxisLine).x); d.y1 = yScale(interactionBoundary.yMin); } else if (yScale(d.point2[1]) > yScale(interactionBoundary.yMin)) { d.x2 = xScale(intersectLines(d, xAxisLine).x); d.y2 = yScale(interactionBoundary.yMin); } } if(intersectLines(d, topLine)) { d.it = true; if (yScale(d.point1[1]) < yScale(yAxisScale.domain[1])) { d.x1 = xScale(intersectLines(d, topLine).x); d.y1 = yScale(topLine.point1[1]); } else if (yScale(d.point2[1]) < yScale(yAxisScale.domain[1])) { d.x2 = xScale(intersectLines(d, topLine).x); d.y2 = yScale(topLine.point1[1]); } } if (intersectLines(d, rightLine)) { d.ir = true; if (xScale(d.point1[0]) > xScale(xAxisScale.domain[1])) { d.x1 = xScale(rightLine.point1[0]); d.y1 = yScale(intersectLines(d, rightLine).y); } else if (xScale(d.point2[0]) > xScale(xAxisScale.domain[0])) { d.x2 = xScale(rightLine.point1[0]); d.y2 = yScale(intersectLines(d, rightLine).y); } } } // if the edit would make the line too short, bounce it. if (distance(xyScale(d.point1), xyScale(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(); } function dragended(event, d) { 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; } } // appendLabels(); // appendIntersectionObjects(); update(); 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); }47:Ta30,function appendStaticIntersectionObjects() { intersectionPoints.map( pair => { // Guard: in bounds const point = intersectLines(getLineByLabel(pair.labels[0]), getLineByLabel(pair.labels[1])); 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.verticalLabelFormat)(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.horizontalLabelFormat)(point.y)}`) } }) }48:T14dc,function appendIntersectionObjects(isAwayFromOrigin = false) { 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(); intersectionPoints.map( pair => { // Guard: in bounds const point = intersectLines(getLineByLabel(pair.labels[0]), getLineByLabel(pair.labels[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)); } // 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)) } // moving if(pair.drawHorizontalMeasureLine) { 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(0) - 20) .attr("x2", xScale(point.x)).attr("y2", yScale(0) - 20 ) } if(pair.drawVerticalMeasureLine) { svg.append("line") .classed('vMeasure', true) .style('stroke-width', dropLines.width) .style('stroke', 'gray') .style('marker-end', "url(#arrow)") .attr("x1", xScale(0) + 20 ).attr("y1", svg.select("line.staticHDrop").attr("y1")) .attr("x2", xScale(0) + 20 ).attr("y2", yScale(point.y) ) } // moving intersection line 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' }) // 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.verticalLabelFormat)(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.horizontalLabelFormat)(point.y)}`) } }) }49:T491,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); }4a:[] 43:{"id":"7b7da6af434ee21d","slug":null,"title":"{Interview Fork} Supply and Demand chart","thumbnail":"f7dcf87f76ccc340e58da5b2114fae633a79d79c92d945ea5addc6d8e4154813","access_level":"public","create_time":"$D2023-02-01T21:53:06.385Z","update_time":"$D2023-02-01T21:53:35.039Z","view_time":null,"first_public_time":"$D2023-02-01T21:53:06.385Z","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":4339,"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":"{Interview Fork} Supply and Demand chart","cells":[{"id":2114,"value":"# {Interview Fork} Supply and Demand chart","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: \"Supply and Demand\", \n subtitle: \"\"\n })\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1417,"value":"// Lines to draw.\n // There can be any number of lines. \n // color variations can be made with with color.brighter(x) or color.darker(x) where 0 <= x <= 3.\n lines = [ \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: [10, 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\n// append monopoly pricing as a function of a curve","pinned":false,"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. \nintersectionPoints = [\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 verticalLabelFormat: \".0f\", // format according to 'd3-format' spec https://github.com/d3/d3-format\n \n horizontalLabelOffset: [0, 0],\n horizontalLabelColor: 'black',\n horizontalLabelFormat: \".0f\",\n\n drawVerticalMeasureLine: true,\n drawHorizontalMeasureLine: true\n \n }\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1893,"value":"xAxisScale = ({\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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1904,"value":"yAxisScale = ({\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":false,"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: width/2, \n // y: 200, \n // html: \"

This is an annotation that fits the width of the container. You can also use html for styles and colors.

\",\n // // 'center', 'left', 'right', or 'justify'\n // align: 'right'\n // },\n {\n width: 250, \n height: 200, \n // this is the initial x,y which applies until something is dragged.\n x: margin.left, \n y: 200, \n // contents of annotation\n html: \"

TEST

\",\n align: 'left',\n // object to connect the annotation to. This can be blank for static annotations. \n // parentObject: \"#givenLine_1\"\n }\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2647,"value":"footer = ({text: \"\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3807,"value":"interactionBoundary = ({xMin: xAxisScale.domain[0], xMax: xAxisScale.domain[1], yMin: yAxisScale.domain[0], yMax: yAxisScale.domain[1]})","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$45","pinned":false,"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\n// update initial render. TODO call this 'append'?\nfunction update() {\n appendLabels();\n appendIntersectionObjects();\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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":"$46","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('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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3948,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3297,"value":"$48","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() {\n svg.selectAll(\"text.label\").remove();\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":"$49","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":false,"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":false,"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":false,"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":false,"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":false,"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.\n// Capitalization does not matter.\nfunction getLineByLabel (labelIn) {\n return lines.find(line => (line.label.toUpperCase() === labelIn.toUpperCase()));\n};","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"xScale = d3.scaleLinear()\n .domain(xAxisScale.domain).range(xAxisScale.range)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"yScale = d3.scaleLinear()\n .domain(yAxisScale.domain)\n .range(yAxisScale.range)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"xAxis = g => g\n .classed(\"x\", true)\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xScale)\n .ticks(xAxisScale.numTicks)\n .tickValues(xAxisScale.tickValues)\n .tickFormat((d, i) => xAxisScale.tickFormat[i])\n .tickSize(xAxisScale.tickSize)\n .tickSizeOuter(xAxisScale.tickSizeOuter)\n )\n .call(g => g.append(\"foreignObject\")\n .attr(\"width\", xAxisScale.title.width)\n .attr(\"height\", xAxisScale.title.height)\n .attr(\"x\", xAxisScale.title.x)\n .attr(\"y\", xAxisScale.title.y)\n .append(\"xhtml:body\")\n .html(xAxisScale.title.html))","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"function xyScale([x, y]) {\n return [xScale(x), yScale(y)];\n}","pinned":false,"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":false,"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":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2711,"value":"// yAxisLine = ({\n// point1: [],\n// point2: [, yAxisScale.domain[1]]\n// })\nyAxisLine = ({\n point1: [interactionBoundary.xMin, interactionBoundary.yMin],\n point2: [interactionBoundary.xMin, interactionBoundary.yMax]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2730,"value":"// xAxisLine = ({\n// point1: [],\n// point2: [xAxisScale.domain[1], ]\n// })\n\nxAxisLine = ({\n point1: [interactionBoundary.xMin, interactionBoundary.yMin],\n point2: [interactionBoundary.xMax, interactionBoundary.yMin]\n})","pinned":false,"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\n\n// topLine = ({\n// point1: [0, yAxisScale.domain[1]],\n// point2: [xAxisScale.domain[1], yAxisScale.domain[1]]\n// })\n\ntopLine = ({\n point1: [interactionBoundary.xMin, interactionBoundary.yMax],\n point2: [interactionBoundary.xMax, interactionBoundary.yMax]\n})\n","pinned":false,"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.\n// rightLine = ({\n// point1: [xAxisScale.domain[1], yAxisScale.domain[1]],\n// point2: [xAxisScale.domain[1], 0]\n// })\nrightLine = ({\n point1: [interactionBoundary.xMax, interactionBoundary.yMax],\n point2: [interactionBoundary.xMax, interactionBoundary.yMin]\n})","pinned":false,"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) {\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":false,"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":false,"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]]\nfunction dropPoint(inputY, p0, p1) {\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":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 44:"$43:body"