3e:null 3f:["$","title",null,{"children":"Mousetrap: Monopoly pricing | Justin Wolfers | Observable"}] 45:T48d,{ // 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(); appendIntersectionObjects(); } return svg.node(); }46:T194e,drag = { function dragstarted(event, d) { d.originalP1 = d.point1; d.originalP2 = d.point2; // First time if (d.drawOriginLine && !d.hasOwnProperty('isAwayFromOrigin')) { svg.selectAll(`line.ghost${d.label}`).remove(); svg.append('line') .classed(`ghost${d.label}`, 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.selectAll(`text.ghost${d.label}`).remove(); svg.append('text') .classed(`ghost${d.label}`, true) .attr('x', xScale(d.originalP2[0])) .attr('y', yScale(d.originalP2[1])) .style('fill', getColor(d)) .style("font-size", d.labelSize) .style('text-shadow', textShadow) .attr('filter', 'brightness(2)') .text(() => `Old ${d.label}`); d.isAwayFromOrigin = true; } // following times, add color back else if (d.drawOriginLine && !d.isAwayFromOrigin) { svg.select(`line.ghost${d.label}`) .attr('opacity', '1') d3.select(`text.ghost${d.label}`) .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(); } 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; if (intersectLines(d, yAxisLine)) { // console.log("intersecting Y at", intersectLines(d, yAxisLine)); d.il = true; if (xScale(d.point1[0]) < xScale(0)) { d.x1 = xScale(0); d.y1 = yScale(intersectLines(d, yAxisLine).y); } else if (xScale(d.point2[0]) < xScale(0)) { d.x2 = xScale(0); d.y2 = yScale(intersectLines(d, yAxisLine).y); } } if(intersectLines(d, xAxisLine)) { // console.log("intersecting X at", intersectLines(d, xAxisLine)); d.ib = true; if (yScale(d.point1[1]) > yScale(0)) { d.x1 = xScale(intersectLines(d, xAxisLine).x); d.y1 = yScale(0); } else if (yScale(d.point2[1]) > yScale(0)) { d.x2 = xScale(intersectLines(d, xAxisLine).x); d.y2 = yScale(0); } } 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(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) } svg.selectAll("text.label") .data(lines) .enter().append('text') .classed('label', true) .style("font-size", d => d.labelSize) .style("font-family", 'Helvetica Neue, sans-serif') .style('fill', d => getColor(d)) .style('text-shadow', textShadow) .attr("x", d => { return ('x2' in d) ? d.x2 : d.point2[0] }) .attr("y", d => { return ('y2' in d) ? d.y2 : d.point2[1] }) .text(d => d.label); appendIntersectionObjects(); } function dragended(event, d) { if (d.drawOriginLine) { const ghostLineX1 = d3.select(`line.ghost${d.label}`).attr("x1") const draggedLineX1 = xScale(d.point1[0]) const ghostLineY1 = d3.select(`line.ghost${d.label}`).attr("y1") 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)) { d3.select(`line.ghost${d.label}`) .attr('opacity', '0') d3.select(`text.ghost${d.label}`) .attr('opacity', '0') d.isAwayFromOrigin = false; } } 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:T6bc,function appendIntersectionObjects() { // remove last objects before appending updated objects svg.selectAll("circle.intersection").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 svg.append("line") .classed('vDrop', true) .style('stroke-width', dropLines.width) .style('stroke-dasharray', dropLines.dashCSS) .style('stroke', () => getColor(getLineByLabel(pair.labels[0]))) .attr("x1", xScale(point.x)).attr("y1", yScale(0)) .attr("x2", xScale(point.x)).attr("y2", yScale(point.y)); svg.append("line") .classed('hDrop', true) .style('stroke-width', dropLines.width) .style('stroke-dasharray', dropLines.dashCSS) .style('stroke', () => getColor(getLineByLabel(pair.labels[0]))) .attr("x1", xScale(0)).attr("y1", yScale(point.y)) .attr("x2", xScale(point.x)).attr("y2", yScale(point.y)) 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' }) } }) }48:[] 43:{"id":"12b97d29708abdea","slug":null,"title":"Mousetrap: Monopoly pricing","thumbnail":"c22e92773b7b46a0584ba2e2a4272a726caa47aed1ce9e8486453967eb358538","access_level":"public","create_time":"$D2022-12-07T15:17:09.743Z","update_time":"$D2022-12-07T15:53:39.812Z","view_time":null,"first_public_time":"$D2022-12-07T15:17:09.743Z","has_unpublished_edits":null,"fork":{"id":"2155547e28e9152d","slug":null,"title":"Mousetrap","owner":{"id":"83f7a2eafb26d158","login":"maxwalts","name":"Max Walts"}},"stars":1,"starred":false,"owner":{"type":"team","id":"05aa5493a3df5105","login":"jwolfers","name":"Justin Wolfers","avatar_url":"https://avatars-next.observableusercontent.com/4d33134949c7317b44fe2f420aa05c7ad094e1a5d1b50be01c4da0f751f18b4a","tier":"pro_2026","bio":"","following":false},"version":3727,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc564bcf2081989e","login":"jwolfers","name":"Justin Wolfers","avatar_url":"https://avatars-next.observableusercontent.com/4d33134949c7317b44fe2f420aa05c7ad094e1a5d1b50be01c4da0f751f18b4a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"dc564bcf2081989e","login":"jwolfers","name":"Justin Wolfers","avatar_url":"https://avatars-next.observableusercontent.com/4d33134949c7317b44fe2f420aa05c7ad094e1a5d1b50be01c4da0f751f18b4a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mousetrap: Monopoly pricing","cells":[{"id":2114,"value":"# Mousetrap: Monopoly pricing","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: \"Setting prices and quantities when you have market power\", \n subtitle: \"How many units should you sell, and what price should you charge?\"\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: 'Firm demand curve', \n labelSize: \"14px\",\n point1: [1, 24000], \n point2: [6, 19000], \n color: colors.demandBlue,\n width: 4,\n moveX: true,\n moveY: false,\n drawOriginLine: true\n },\n {\n label: 'Marginal revenue', \n labelSize: \"14px\",\n point1: [1, 24000],\n point2: [5, 16000],\n color: colors.shifterPurple,\n width: 4,\n moveX: true,\n moveY: true,\n drawOriginLine: true\n },\n {\n label: 'Marginal cost', \n labelSize: \"14px\",\n point1: [0, 20000],\n point2: [7, 20000],\n color: colors.supplyRed, \n width: 4,\n moveX: false,\n moveY: true,\n drawOriginLine: false\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// 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 labels: [\"Marginal cost\", \"Marginal revenue\"],\n isPrimary: true\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: '100px',\n height: '80px',\n // edit styling in CSS section under axisTitle class\n html: `

Quantity of cars sold

(per week)

`,\n x: (width - margin.right - 90),\n y: 0,\n size: \"12px\"\n },\n\n domain: [0, 6.9], \n range: [margin.left, width - margin.right], \n numTicks: 5,\n // Define a custom set of tick values\n tickValues: [0, 1, 2, 3, 4, ,5, 6],\n // Define format of those ticks\n tickFormat: ['0', '1', '2', '3', '4', '5', '6'],\n // Define length of the ticks\n tickSize: 4,\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

(or marginal revenue

`,\n x: -90,\n y: margin.top - 20, \n size: \"13px\"\n }, \n domain: [16000, 24999], \n range: [height - margin.bottom, margin.top], \n numTicks: 5, \n // Define a custom set of tick values\n tickValues: [16000, 18000, 20000, 22000, 24000],\n // Define format of those ticks\n tickFormat: ['$16,000', '$18,000', '$20,000', '$22,000', '$24,000'],\n // length of the outer ticks\n tickSize: 4,\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: \"This is some footer text. There is just one line.\"})","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":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":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":3297,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2657,"value":"function 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 => xScale(d.point2[0]))\n .attr(\"y\", d => yScale(d.point2[1]))\n .text(d => d.label);\n}","pinned":false,"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: [0, 0],\n point2: [0, yAxisScale.domain[1]]\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: [0, 0],\n point2: [xAxisScale.domain[1], 0]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2801,"value":"topLine = ({\n point1: [0, yAxisScale.domain[1]],\n point2: [xAxisScale.domain[1], yAxisScale.domain[1]]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2805,"value":"rightLine = ({\n point1: [xAxisScale.domain[1], yAxisScale.domain[1]],\n point2: [xAxisScale.domain[1], 0]\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":"$W48","stdlib":"1"}} 44:"$43:body"