3e:null 3f:["$","title",null,{"children":"(v2) IS-MP chart | Max Walts | Observable"}] 45:T4b6,{ // TODO responsive width // TODO lines easier to grab // 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('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) // update svg at end of render update(); function update() { appendHeaderFooter(); appendAnnotations(); appendLabels(); appendStaticIntersectionObjects(); appendIntersectionObjects(); } return svg.node(); }46:T20f8,drag = { function dragstarted(event, d) { d.originalP1 = d.point1; d.originalP2 = d.point2; // First time if (d.drawOriginLine && !d.hasOwnProperty('isAwayFromOrigin')) { // create ghost lines svg.append('line') .classed(`ghost_${d.id}`, true) .attr('x1', xScale(d.originalP1[0])) .attr('y1', yScale(d.originalP1[1])) .attr('x2', xScale(d.originalP2[0])) .attr('y2', yScale(d.originalP2[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.originalP2[0])) .attr('y', yScale(d.originalP2[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}`); // save coordinates of ghost lines lineMap[`line.ghost_${d.id}_x1`] = xScale(d.originalP1[0]); lineMap[`line.ghost_${d.id}_y1`] = yScale(d.originalP1[1]); lineMap[`line.ghost_${d.id}_x2`] = xScale(d.originalP2[0]); lineMap[`line.ghost_${d.id}_y2`] = yScale(d.originalP2[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) { 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] += (xAxisScale.domain[1] - xAxisScale.domain[0]) / 100; d.point2[1] += (xAxisScale.domain[1] - xAxisScale.domain[0]) / 100; } else if (d.point1[1] > interactionBoundary.yMax) { d.point1[1] -= (xAxisScale.domain[1] - xAxisScale.domain[0]) / 100; d.point2[1] -= (xAxisScale.domain[1] - xAxisScale.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] += (xAxisScale.domain[1] - xAxisScale.domain[0]) / 100; d.point2[1] += (xAxisScale.domain[1] - xAxisScale.domain[0]) / 100; } if (d.it) { d.point1[1] -= (xAxisScale.domain[1] - xAxisScale.domain[0]) / 100; d.point2[1] -= (xAxisScale.domain[1] - xAxisScale.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(); 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:T58c,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]) { 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)); 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)) 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') } }) }48:Te01,function appendIntersectionObjects(isAwayFromOrigin = false) { if (isAwayFromOrigin) { 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(); 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]) { // TODO: enable styling with CSS // 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 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' }) // 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', pair.verticalLabelColor) .style('text-shadow', textShadow) .style("font-size", 18) .style("font-weight", 'bold') .text(() => `${d3.format(pair.verticalLabelFormat)(point.x/100)}`) 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', pair.horizontalLabelColor) .style('text-shadow', textShadow) .style("font-size", 18) .style("font-weight", 'bold') .text(() => `${d3.format(pair.horizontalLabelFormat)(point.y/100)}`) } }) }49:[] 43:{"id":"a7e2b12abac7fc19","slug":null,"title":"(v2) IS-MP chart","thumbnail":"3e8c9de295c22790549540dd31d45500bdb3f793715eb033ae9b5c1a6f1e7a00","access_level":"public","create_time":"$D2023-01-23T10:21:21.915Z","update_time":"$D2023-01-23T11:56:51.522Z","view_time":null,"first_public_time":"$D2023-01-23T10:21:21.915Z","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":4127,"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":1,"collection":{"id":"8707369181d61f2d","slug":"interactive-graphs-1","title":"Interactive Graphs 1","owner":{"id":"83f7a2eafb26d158","login":"maxwalts","name":"Max Walts"}},"type":"notebook","body":{"titling":"auto","title":"(v2) IS-MP chart","cells":[{"id":2114,"value":"# (v2) IS-MP 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: \"Figure 9 | The IS-MP Framework\", \n subtitle: \"The state of the economy is determined by the intersection of the IS curve and the MP curve.\"\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: 'MP curve', \n id: '1', //new attribute\n labelSize: \"14px\",\n point1: [-10, 3], \n point2: [7, 3], \n color: colors.supplyRed,\n width: 4,\n moveX: false,\n moveY: true,\n drawOriginLine: true\n },\n {\n label: 'IS curve', \n id: '2',\n labelSize: \"14px\",\n point1: [-10, 5],\n point2: [5, 0.1],\n color: colors.demandBlue,\n width: 4,\n moveX: true,\n moveY: false,\n drawOriginLine: true\n },\n\n ]\n\n","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\n// Default behavior:\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. \n// the first label in labels will define the color of the horizontal dropline\n// the second label in labels will define the color of the vertical dropline\n\nintersectionPoints = [\n {\n labels: [\"MP curve\", \"IS curve\"],\n isPrimary: true,\n drawHorizontalDropline: false,\n drawVerticalDropline: true,\n verticalLabelOffset: [0, 0],\n verticalLabelColor: 'black',\n horizontalLabelOffset: [0, 0],\n verticalLabelFormat: \".2%\",\n horizontalLabelFormat: \".1%\",\n horizontalLabelColor: colors.supplyRed\n }\n];","pinned":true,"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: `

Output gap (Output relative to potential output)

`,\n x: (width - margin.right - 160),\n y: 0,\n size: \"12px\"\n },\n\n domain: [-10, 12], \n range: [margin.left, width - margin.right], \n numTicks: 5,\n // Define a custom set of tick values\n tickValues: [-5, 0, 5],\n // Define format of those ticks\n tickFormat: ['-5%', '0%', '5%'],\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: `

Real Interest Rate `,\n x: -90,\n y: margin.top - 20, \n size: \"13px\"\n }, \n domain: [0, 6], \n range: [height - margin.bottom, margin.top], \n numTicks: 5, \n // Define a custom set of tick values\n tickValues: [3],\n // Define format of those ticks\n tickFormat: ['3%'],\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 // x: margin.left, \n // y: 200, \n // html: \"

Another note

\",\n // align: 'left'\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":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 / 2,\n markerHeight: 4 / 2,\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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2028,"value":"$46","pinned":false,"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":false,"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":"function appendAnnotations() {\n svg.selectAll(\"text.annotation\").remove()\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":false,"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":"$W49","stdlib":"1"}} 44:"$43:body"