3f:null 40:["$","title",null,{"children":"Line Chart | Stevenson and Wolfers | Observable"}] 46:T1cda,function LineChart( data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => +y, // given d in data, returns the (quantitative) y-value z = () => "seriesOne", // given d in data, returns the (categorical) z-value title = "", tooltipFn = null, // given d in data, returns the title text (for tooltips) defined, // for gaps in data lineLabelText = () => "", lineLabelTextWidth = 0, // lineLabelTextWidth = data // .map((d) => lineLabelText(d)) // .reduce((a, b) => (a.length > b.length ? a : b)).length * 8, lineLabelDotRadius = 5, lineLabelSeparation = 14, annotations = [], arrows = [], curve = d3.curveLinear, // method of interpolation between points marginTop = 10, // top margin, in pixels marginRight = 10, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleUtc, // the x-scale type xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight - lineLabelTextWidth], // [left, right] xFormat = "%b %Y", // yType = d3.scaleLinear, // the y-scale type yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] yFormat = ",~s", // a format specifier string for the y-axis yLabel, // a label for the y-axis zDomain, // array of z-values color = d3.scaleOrdinal( data.map((d) => d.series), swColors.map((d) => d.color) ), // stroke color of line strokeLinecap = "round", // stroke line cap of the line strokeLinejoin = "round", // stroke line join of the line strokeWidth = 4, // stroke width of line, in pixels strokeOpacity = 1, // stroke opacity of line mixBlendMode = "multiple", // blend mode of lines eliminateOutliers = false, outlierSD = 6 // Don't illustrate anything more than 6 SD's from the chart mean // chartTitle, // Title across the top of the chart // chartSubtitle // Subtitle under the title } = {} ) { // Compute values / default domains const X = d3.map(data, x); // array of the x values const Y = d3.map(data, y); // array of the y values const Z = d3.map(data, z); // array of the z values if (eliminateOutliers === true) { // TO FINISH: do this by Z group. Also include gray shading and a note. let outlierMax = d3.mean(Y) + outlierSD * d3.deviation(Y); let outlierMin = d3.mean(Y) - outlierSD * d3.deviation(Y); Y.forEach((d, i) => { if (d > outlierMax || d < outlierMin) { Y[i] = NaN; } }); } const O = d3.map(data, (d) => d); // array of objects containing x, y and z (used for tooltips if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); const D = d3.map(data, defined); // array of whether we have values for X and Y const L = d3.map(data, lineLabelText); // array of the corresponding line Labels // Compute default domains, and unique the z-domain. if (xDomain === undefined) xDomain = d3.extent(X); let yMin = 0 + (d3.min(Y) < 0) * (d3.min(Y) - 0.5 * d3.deviation(Y)) + (d3.min(Y) > 3 * d3.deviation(Y)) * (d3.min(Y) - 0.5 * d3.deviation(Y)); if (yDomain === undefined) yDomain = [yMin, d3.max(Y, (d) => (typeof d === "string" ? +d : d))]; if (zDomain === undefined) zDomain = Z; zDomain = new d3.InternSet(zDomain); // Omit any data not present in the z-domain. const I = d3.range(X.length).filter((i) => zDomain.has(Z[i])); // array of the index of each valid datapoint // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3 .axisBottom(xScale) .ticks(width / 150) .tickSizeOuter(0) .tickSize(4); const yAxis = d3.axisLeft(yScale).ticks(5, yFormat).tickSize(4); // Construct a line generator. const line = d3 .line() // path generator. Inputs an array of [x,y] values; outputs path instructions .defined((i) => D[i]) // ensures we jump over series breaks .curve(curve) .x((i) => xScale(X[i])) .y((i) => yScale(Y[i])); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .style("overflow", "visible"); definitions(svg); svg .append("g") .classed("xAxis", true) .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .attr("color", "gray"); svg .append("g") .classed("yAxis", true) .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("color", "gray"); const path = svg .append("g") // a group with all the paths in it .classed("lines", true) .attr("stroke-opacity", strokeOpacity) .selectAll("g.line") .data(d3.group(I, (i) => Z[i])) // groups indices by series .join("g") // each g has an array of indices associated with it .attr("class", "line") .attr("id", ([k, v]) => k) .attr("stroke", typeof color === "function" ? ([z]) => color(z) : null) .attr("fill", typeof color === "function" ? ([z]) => color(z) : null) .attr("color", typeof color === "function" ? ([z]) => color(z) : null) .call((g) => { g.append("path") .attr("d", ([, v]) => line(v)) .attr("fill", "none") .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .style("mix-blend-mode", mixBlendMode) .call((p) => changePathColor(p)); g.append("circle") .attr("cx", ([k, v]) => xScale(X[v.slice(-1)])) .attr("cy", ([k, v]) => yScale(Y[v.slice(-1)])) .attr("r", lineLabelDotRadius) .call( d3.drag().on("drag", function (event, d) { marginRight = marginRight - event.dx; // d3.select(this) // .attr("opacity", 0.5) // .attr("cx", (d) => (d.x += event.dx)) // .attr("cy", (d) => (d.y += event.dy)); }) ); let fo = g // Add line labels .append("foreignObject") .classed("lineLabel", true) .attr("width", width / 2) .attr("height", 200) .attr("x", ([k, v]) => xScale(X[v.slice(-1)]) + 8) // .attr("y", ([k, v]) => yScale(Y[v.slice(-1)])) .call( dodgeAttr, "y", ([k, v]) => yScale(Y[v.slice(-1)]) - 10, // use fo height/2 lineLabelSeparation ); let lineLabel = ([k, v]) => L[v.slice(-1)] == Y[v.slice(-1)] ? yScale.tickFormat(1000, yFormat)(L[v.slice(-1)]) : L[v.slice(-1)] == X[v.slice(-1)] ? xScale.tickFormat(null, xFormat)(L[v.slice(-1)]) : L[v.slice(-1)]; fo.append("xhtml:div") .text(lineLabel) .attr("class", "chartAnnotation") .call(makeEditable); }); addTitle(svg, title); addArrows(svg, arrows); addAnnotations(svg, annotations, xScale, yScale); addTooltips( svg, tooltipFn, xFormat, yFormat, mixBlendMode, strokeOpacity, xScale, yScale, X, Y, Z, I, O, path ); return svg.node(); }47:Tb45,function addTooltips( svg, tooltipFn, xFormat, yFormat, mixBlendMode, strokeOpacity, xScale, yScale, X, Y, Z, I, O, path ) { svg // attach event listeners .on("pointerenter", pointerentered) // tooltip .on("pointermove", pointermoved) //tooltip .on("pointerleave", pointerleft) //tooltip .on("touchstart", (event) => event.preventDefault()); //tooltip // Format values if (tooltipFn == null) { const formatDate = xScale.tickFormat(null, xFormat); const formatValue = yScale.tickFormat(1000, yFormat); tooltipFn = (i) => new Set(Z).size > 1 ? `${Z[i]}\n${formatDate(X[i])}\n${formatValue(Y[i])}` : `${formatDate(X[i])}\n ${formatValue(Y[i])}`; } else { const O = d3.map(data, (d) => d); const T = tooltipFn; tooltipFn = (i) => T(O[i], i, data); } const tooltip = svg .append("g") .style("pointer-events", "none") .classed("tooltip", true); function pointermoved(event) { const [xm, ym] = d3.pointer(event); const i = d3.least(I, (i) => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym) ); path .attr("stroke-opacity", ([z]) => (Z[i] === z ? strokeOpacity : "0.5")) .filter(([z]) => Z[i] === z) .raise(); tooltip.style("display", null); tooltip.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`); const tooltipLoc = tooltip .selectAll("path") .data([,]) .join("path") .attr( "fill", d3 .select("#" + Z[i]) .node() .getAttribute("stroke") ) .attr("stroke", "black") .attr("opacity", 0.2); const tooltipText = tooltip .selectAll("text") .data([,]) .join("text") .call((text) => text .selectAll("tspan") .data(`${tooltipFn(i)}`.split(/\n/)) .join("tspan") .attr("x", 0) .attr("y", (_, i) => `${i * 1.1}em`) .attr("font-weight", (_, i) => (i ? null : "bold")) .text((d) => d) ); const { x, y, width: w, height: h } = tooltipText.node().getBBox(); // creates the tooltip box tooltipText.attr("transform", `translate(${-w / 2},${25 - y})`); tooltipLoc.attr( "d", `M${-w / 2 - 10},15H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z` ); svg.property("value", O[i]).dispatch("input", { bubbles: true }); } function pointerentered() { // path.style("mix-blend-mode", null).style("stroke", "#ddd"); // dot.attr("display", null); } function pointerleft() { path.style("mix-blend-mode", mixBlendMode).style("stroke", null); path.attr("stroke-opacity", strokeOpacity); tooltip.style("display", "none"); svg.node().value = null; svg.dispatch("input", { bubbles: true }); } } //tooltip construction starts here // Compute titles (for tooltips)48:T13f3,function addArrows(svg, arrows) { let allArrows = svg.append("g").classed("arrows", true); // Put all arrows into their own "group" let arrowColor = swColors[0].color; const arrowGroup = svg // Not strictly necessary .select("g.arrows") .selectAll(".chartArrow") .data(arrows) .join("g") .attr("class", (d) => d.id) .attr("fill", arrowColor) .classed("chartArrow", true) .attr("transform", (d) => "translate(" + d.x1 + "," + d.y1 + ")"); arrowGroup .append("polyline") .style("stroke", arrowColor) .attr("stroke-width", 3) .style("fill", "none") .attr("points", (d) => [ [d.x1, d.y1], [d.x2, d.y2] ]) .attr("marker-end", "url(#arrow)"); // If I want bendy arrows: arrowGroup //start .append("circle") .attr("r", 10) .attr("cx", (d) => d.x1) .attr("cy", (d) => d.y1) .style("fill", "yellow") .style("filter", "url(#glow)") .style("opacity", 0) .attr("cursor", "nwse-resize") .classed("arrowStart", true) .on("mouseover", function () { d3.select(this).style("opacity", 0.5); }) .on("mouseout", function () { d3.select(this).style("opacity", 0); }) .call( d3 .drag() .on("start", function (event, d) { d3.select(this.parentNode).selectAll("circle").style("opacity", 0.5); }) .on("drag", function (event, d) { d3.select(this) .attr("cx", (d.x1 = event.x)) .attr("cy", (d.y1 = event.y)); d3.select(this.parentNode) .select("polyline") .attr("points", [ [d.x1, d.y1], [d.x2, d.y2] ]); d3.select(this.parentNode) .select("circle.dragger") .attr("cx", (d) => (d.x1 + d.x2) / 2) .attr("cy", (d) => (d.y1 + d.y2) / 2); }) .on("end", function (event, d) { d3.select(this.parentNode).selectAll("circle").style("opacity", 0); }) ); arrowGroup //end .append("circle") .attr("r", 10) .attr("cx", (d) => d.x2) .attr("cy", (d) => d.y2) .style("fill", "yellow") .style("filter", "url(#glow)") .style("opacity", 0) .attr("cursor", "nwse-resize") .classed("arrowEnd", true) .on("mouseover", function () { d3.select(this).style("opacity", 0.5); }) .on("mouseout", function () { d3.select(this).style("opacity", 0); }) .call( d3 .drag() .on("start", function (event, d) { d3.select(this.parentNode).selectAll("circle").style("opacity", 0.5); }) .on("drag", function (event, d) { d3.select(this) .attr("cx", (d.x2 = event.x)) .attr("cy", (d.y2 = event.y)); d3.select(this.parentNode) .select("polyline") .attr("points", [ [d.x1, d.y1], [d.x2, d.y2] ]); d3.select(this.parentNode) .select("circle.dragger") .attr("cx", (d) => (d.x1 + d.x2) / 2) .attr("cy", (d) => (d.y1 + d.y2) / 2); }) .on("end", function (event, d) { d3.select(this.parentNode).selectAll("circle").style("opacity", 0); }) ); arrowGroup //drag by middle .append("circle") // change this .classed("dragger", true) .attr("r", 10) .attr("cx", (d) => (d.x1 + d.x2) / 2) .attr("cy", (d) => (d.y1 + d.y2) / 2) .style("fill", "green") .style("filter", "url(#glow)") .style("opacity", 0) .attr("cursor", "move") .on("mouseover", function () { d3.select(this).style("opacity", 0.5); }) .on("mouseout", function () { d3.select(this).style("opacity", 0); }) .call( d3 .drag() .on("start", function (event, d) { d3.select(this.parentNode).selectAll("circle").style("opacity", 0.5); }) .on("drag", function (event, d) { d.x1 += event.dx; d.y1 += event.dy; d.x2 += event.dx; d.y2 += event.dy; d3.select(this) .attr("cx", (d.x1 + d.x2) / 2) .attr("cy", (d.y1 + d.y2) / 2); d3.select(this.parentNode) .select("polyline") .attr("points", (d) => [ [d.x1, d.y1], [d.x2, d.y2] ]); d3.select(this.parentNode) .select(".arrowStart") .attr("cx", d.x1) .attr("cy", d.y1); d3.select(this.parentNode) .select(".arrowEnd") .attr("cx", d.x2) .attr("cy", d.y2); }) .on("end", function (event, d) { d3.select(this.parentNode).selectAll("circle").style("opacity", 0); }) .container(svg) ); }49:T9b0,function addAnnotations(svg, annotations, xScale, yScale) { let allAnnotations = svg.append("g").classed("annotations", true); // Put all annotations into their own "folder" or group (including handles) const annotationGroup = svg // Not strictly necessary .select("g.annotations") .selectAll(".chartAnnotation") .data(annotations) .join("g") .attr("class", (d) => d.id) .classed("chartAnnotation", true) .attr( "transform", (d) => "translate(" + xScale(+d.x) + "," + yScale(+d.y) + ")" ); annotationGroup .append("foreignObject") .attr("width", (d) => d.width) .attr("height", (d) => d.height) // Try to resize automagically https://stackoverflow.com/questions/11385421/scale-svg-shape-to-fit-to-contents-where-contents-includes-foreignobject. This might be better: https://jsfiddle.net/mp9007/bg3hftna/ // .style("resize", "both") .style("overflow", "auto") .append("xhtml:div") .html((d) => d.text) .style("width", "fit-content") .style("max-width", "100%") // .style("resize", "both") // .style("overflow", "auto") .call(makeEditable); let annotationHandleSize = 30; annotationGroup // handle for dragging the annotation .append("rect") // .attr("class", (d) => d.id) .attr("x", (d) => 0 - annotationHandleSize) .attr("y", (d) => 0) .attr("width", annotationHandleSize) .attr("height", annotationHandleSize) .style("fill", "lightgray") .attr("cursor", "move") .style("opacity", "0%") .call( d3 .drag() .on("start", function (event, d) { d3.select(this.parentNode) .select("foreignObject") .style("background-color", "yellow") .style("opacity", "50%"); }) .on("drag", function (event, d) { console.log(event); d.x = xScale.invert(xScale(+d.x) + event.dx); d.y = yScale.invert(yScale(+d.y) + event.dy); d3.select(this.parentNode).attr( "transform", (d) => "translate(" + xScale(event.subject.x) + "," + yScale(event.subject.y) + ")" ); }) .on("end", function (event, d) { d3.select(this.parentNode) .select("foreignObject") .style("background-color", "inherit") .style("opacity", "inherit"); }) .container(svg) ); }4a:T521,function definitions(svg) { //Container for the gradients var defs = svg.append("defs"); //Filter for the outside glow var filter = defs.append("filter").attr("id", "glow"); filter .append("feGaussianBlur") .attr("stdDeviation", "12.5") .attr("result", "coloredBlur"); var feMerge = filter.append("feMerge"); feMerge.append("feMergeNode").attr("in", "coloredBlur"); feMerge.append("feMergeNode").attr("in", "SourceGraphic"); //Arrow heads const w = 6 + width / 200; const markerBoxWidth = w; const markerBoxHeight = 0.75 * markerBoxWidth; const refX = markerBoxWidth / 2; const refY = markerBoxHeight / 2; const markerWidth = markerBoxWidth / 2; const markerHeight = markerBoxHeight / 2; const arrowPoints = [ [-markerBoxWidth / 2, 0], [-markerBoxWidth / 2, markerBoxHeight], [1 + markerBoxWidth / 2, markerBoxHeight / 2] ]; var arrow = defs .append("marker") .attr("id", "arrow") .attr("viewBox", [0, 0, markerBoxWidth, markerBoxHeight]) .attr("refX", refX) .attr("refY", refY) .attr("markerWidth", markerBoxWidth) .attr("markerHeight", markerBoxHeight) .attr("orient", "auto-start-reverse") .append("path") .attr("d", d3.line()(arrowPoints)); // .style("fill", "gray"); //context-fill not working(?) }4b:T45a,displayPalettes = (palettes = [], showText = false, displayIndex = false) => { const w = 300; const h = 20; const margin = 5; if (typeof palettes[0] === "string") palettes = [palettes]; return svg``; }4c:[{"id":"de259092d525c13bd10926eaf7add45b15f2771a8b39bc541a5bba1e0206add4880eb1d876be8df469328a85243b7d813a91feb8cc4966de582dc02e5f8609b7","href":"https://static.observableusercontent.com/files/de259092d525c13bd10926eaf7add45b15f2771a8b39bc541a5bba1e0206add4880eb1d876be8df469328a85243b7d813a91feb8cc4966de582dc02e5f8609b7","name":"aapl.csv","type":"application/octet-stream","lastModified":1677707529428.774,"size":22707}] 44:{"id":"56c5af7c788fa934","slug":"line-chart","title":"Line Chart","thumbnail":"804a8981b81bf19ddea1285de168707b6b76fe651aa45a9035485a02884f07fc","access_level":"public","create_time":"$D2023-03-01T21:52:09.428Z","update_time":"$D2024-03-07T05:11:05.760Z","view_time":null,"first_public_time":"$D2023-03-01T21:52:09.428Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"28d85ddf7b82db71","login":"stevensonwolfers","name":"Stevenson and Wolfers","avatar_url":"https://avatars-next.observableusercontent.com/9d55cdad1d5650955034297eaa7e144b4de574ebcf436d5eff55b9198ced303f","tier":"starter_2024","bio":"Working on interactive graphics for intro econ pedagogy","following":false},"version":3012,"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"},{"type":"team","id":"28d85ddf7b82db71","login":"stevensonwolfers","name":"Stevenson and Wolfers","avatar_url":"https://avatars-next.observableusercontent.com/9d55cdad1d5650955034297eaa7e144b4de574ebcf436d5eff55b9198ced303f","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Line Chart","cells":[{"id":1,"value":"# Line Chart\n\nThis time-series line chart is my adaptation of the original line chart provided by shows the daily close of Apple stock. Compare to a [log *y*-scale showing change](/@d3/change-line-chart), an [area chart](/@d3/area-chart), a [horizon chart](/@d3/horizon-chart-ii), a [candlestick chart](/@d3/candlestick-chart), and an [index chart](/@d3/index-chart). To inspect values, consider a [tooltip](/@d3/line-chart-with-tooltip). For multiple series, use a [multi-line chart](/@d3/multi-line-chart). Data: [Yahoo Finance](https://finance.yahoo.com/lookup)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1904,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2918,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2998,"value":"+d3.min(data.map((d) => d.date))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2893,"value":"xSca = d3.scaleUtc(d3.extent(data.map((d) => d.date)), [10, width - 10 - 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2920,"value":"Plot.plot({\n marks: [\n Plot.auto(null, {})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2905,"value":"xSca(new Date(2011, 1, 1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2936,"value":"xSca.invert(400)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2618,"value":"msg = \"\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2695,"value":"// viewof xvariable = Inputs.select(Object.keys(data[0]), {\n// value: \"date\",\n// label: \"x variable\"\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2713,"value":"viewof variables = Inputs.form(\n {\n x: Inputs.select(Object.keys(data[0]), {\n value: \"date\",\n label: \"x variable:\"\n }),\n y: Inputs.select(Object.keys(data[0]), {\n value: Object.keys(data[0])[1],\n label: \"y variable:\"\n }),\n z: Inputs.select(Object.keys(data[0]), {\n value: Object.keys(data[0])[2],\n label: \"z variable (series id):\"\n })\n },\n {\n template: (inputs) =>\n htl.html`

${Object.values(\n inputs\n )}

` //source: https://observablehq.com/@tophtucker/horizontal-inputs\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"chart = LineChart(data, {\n x: (d) => +d[variables.x],\n y: (d) => d[variables.y],\n z: (d) => d[variables.z],\n title: \"This is my chart title\",\n yLabel: \"↑ Daily close ($)\",\n yFormat: \",s\",\n width,\n annotations: annotate,\n arrows: arrowList,\n height: 500,\n lineLabelText: (d) => d.series,\n lineLabelTextWidth: 30,\n eliminateOutliers: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2797,"value":"annotate","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1637,"value":"viewof annotate = Inputs.button(\n [\n [\n \"Add an annotation\",\n (value) =>\n value.concat([\n {\n text: \"annotation_\" + value.length,\n x:\n (d3.min(data.map((d) => +d[variables.x])) +\n d3.max(data.map((d) => +d[variables.x]))) /\n 2,\n y: d3.max(data.map((d) => d[variables.y])),\n id: \"annotation_\" + value.length,\n width: \"15%\",\n height: \"3em\"\n }\n ])\n ]\n ],\n {\n value: []\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3011,"value":"variables","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1738,"value":"viewof arrowList = Inputs.button(\n [\n [\n \"Add an arrow\",\n (value) =>\n value.concat([\n {\n text: \"arrow_\" + value.length,\n x1: 100 + 10 * value.length,\n y1: 30 + 5 * value.length,\n x2: 100 + 10 * value.length,\n y2: 80 + 5 * value.length,\n id: \"arrow_\" + value.length,\n color: \"gray\"\n }\n ])\n ]\n ],\n {\n value: []\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1348,"value":"downloadButton(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1372,"value":"viewof yF = Inputs.select(yFormats, {\n format: (d) => d.l,\n label: \"Number format\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1879,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"aapl = FileAttachment(\"aapl.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"data = aapl\n .map((o) => ({ ...o, series: \"aapl\" }))\n .concat(\n aapl.map((d) => ({\n date: d.date,\n close: (d.close > 400) & (d.close < 500) ? \".\" : d.close / 0.9,\n series: \"two\"\n }))\n )\n .concat(\n aapl.map((d) => ({\n date: d.date,\n close: (6 * d.close) / 0.7,\n series: \"three\"\n }))\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1881,"value":"### Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2570,"value":"### Change graph appearance\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2616,"value":"function changePathColor(p) {\n // Click on paths to change color\n p.on(\"click\", (event) => {\n // let st = getComputedStyle(event.currentTarget);\n // console.log(\"Old color: \", st.stroke);\n let currentColor = event.currentTarget.parentNode.getAttribute(\"stroke\");\n let currentColorIndex = swColors.findIndex((d) => d.color == currentColor);\n let nextColorIndex =\n currentColorIndex + 1 < swColors.length ? currentColorIndex + 1 : 0;\n let nextColor = swColors[nextColorIndex].color;\n event.currentTarget.parentNode.setAttribute(\"stroke\", nextColor); // path\n event.currentTarget.parentNode.setAttribute(\"fill\", nextColor); // final circle\n event.currentTarget.parentNode.setAttribute(\"color\", nextColor); // line label\n d3.select(\".tooltip\").select(\"path\").node().setAttribute(\"fill\", nextColor); /// tooltip box\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1875,"value":"### Annotate the graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2983,"value":"function addTitle(svg, title) {\n // Create a title object, and join it as data (as per annotationGroup)\n svg\n .append(\"g\")\n .classed(\"chartTitle\", true)\n .append(\"foreignObject\")\n .attr(\"width\", width)\n .attr(\"height\", \"1em\") // Try to resize automagically\n .style(\"resize\", \"both\")\n .style(\"overflow\", \"auto\")\n\n .append(\"xhtml:div\")\n .html(title)\n .style(\"width\", \"fit-content\")\n .style(\"max-width\", \"100%\")\n // .style(\"resize\", \"both\")\n // .style(\"overflow\", \"auto\")\n .call(makeEditable);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2670,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1740,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2133,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1353,"value":"// Block out some areas with gray bars:\n // dataRecession.forEach((d) => {\n // dataLayer\n // .append(\"rect\")\n // .attr(\"x\", xScale(d.startDate))\n // .attr(\"y\", margin.top)\n // .attr(\"width\", xScale(d.endDate) - xScale(d.startDate))\n // .attr(\"height\", heightGraph - margin.top - margin.bottom)\n // .attr(\"fill\", \"#D1D3D4\");\n // });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1618,"value":"makeEditable = function makeEditable(el) {\n // calling this on an element will make it click editable\n el.attr(\"contentEditable\", \"true\")\n .style(\"max-width\", \"100%\")\n .on([\"focus\"], (event) => {\n event.currentTarget.setHTML(\n event.currentTarget.innerHTML // used to be event.currentTarget.innerHTML.trim().replace(\"/
$/i\", \"\")\n );\n event.currentTarget.innerText = event.currentTarget.innerHTML.replaceAll(\n \"
\",\n \"\\n
\"\n );\n })\n .on(\"blur\", (event, d) => {\n event.currentTarget.setHTML(\n event.currentTarget.innerText\n .replaceAll(\"\\n
\", \"
\")\n .replaceAll(\"\\n\", \"
\")\n );\n d.text = event.currentTarget.innerHTML;\n\n });\n\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1622,"value":"// Dodge heuristic to ensure that line labels don't overlap\n function dodgeAttr(selection, name, value, separation) {\n const V = dodge(selection.data().map(value), separation);\n selection.attr(name, (_, i) => V[i]);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1626,"value":"// Given an array of positions V, offsets positions to ensure the given separation.\nfunction dodge(V, separation, maxiter = 10, maxerror = 1e-1) {\n const n = V.length;\n if (!V.every(isFinite)) throw new Error(\"invalid position\");\n if (!(n > 1)) return V;\n let I = d3.range(V.length);\n for (let iter = 0; iter < maxiter; ++iter) {\n I.sort((i, j) => d3.ascending(V[i], V[j]));\n let error = 0;\n for (let i = 1; i < n; ++i) {\n let delta = V[I[i]] - V[I[i - 1]];\n if (delta < separation) {\n delta = (separation - delta) / 2;\n error = Math.max(error, delta);\n V[I[i - 1]] -= delta;\n V[I[i]] += delta;\n }\n }\n if (error < maxerror) break;\n }\n return V;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1973,"value":"### Defs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1975,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1350,"value":"import { button as downloadButton } from \"@jeremiak/download-data-button\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2815,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"# Experiments","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1364,"value":"yFormats = [\n { l: \"(automatic)\", f: null },\n { l: \"1,000[.00]\", f: \"0,0.[00]\" },\n { l: \"0\", f: \"0\" },\n { l: \"0.0\", f: \"0.0\" },\n { l: \"0.00\", f: \"0.00\" },\n { l: \"0.000\", f: \"0.000\" },\n { l: \"0.[0]\", f: \"0.[0]\" },\n { l: \"0.[00]\", f: \"0.[00]\" },\n { l: \"0%\", f: \"0%\" },\n { l: \"0.0%\", f: \"0.0%\" },\n { l: \"0.00%\", f: \"0.00%\" },\n { l: \"0.[0]%\", f: \"0.[0]%\" },\n { l: \"0.[00]%\", f: \"0.[00]%\" },\n { l: \"10,000\", f: \"0,0\" },\n { l: \"1st\", f: \"0o\" },\n { l: \"123k\", f: \"0a\" },\n { l: \"123.4k\", f: \"0.[0]a\" },\n { l: \"123.45k\", f: \"0.[00]a\" }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1368,"value":"xFormats = [\n { l: \"2023, 2024\", f: \"YYYY\" },\n { l: \"2023, '24, '25\", f: \"YYYY~~'YY\" },\n { l: \"2023 Q1, 2023 Q2\", f: \"YYYY [Q]Q\" },\n { l: \"2023, Q2, Q3\", f: \"YYYY|[Q]Q\" },\n { l: \"2023, Feb, Mar\", f: \"YYYY|MMM\" },\n { l: \"2023-24, 2024-25\", f: \"BB\" },\n { l: \"’23-’24, ’24-’25\", f: \"B\" },\n { l: \"’23, ’24\", f: \"’YY\" },\n { l: \"April, May\", f: \"MMMM\" },\n { l: \"Apr, May\", f: \"MMM\" },\n { l: \"Apr ’23, May ’23\", f: \"MMM ’YY\" },\n { l: \"April, 2, 3\", f: \"MMM|DD\" }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"swColors = [\n { name: \"blue\", color: d3.color(\"#0066b3\") },\n { name: \"red\", color: d3.color(\"#d12244\") },\n { name: \"purple\", color: d3.color(\"#92278f\") },\n { name: \"green\", color: d3.color(\"#007f3e\") },\n { name: \"brown\", color: d3.color(\"#8f5001\") },\n { name: \"orange\", color: d3.color(\"#c74a1b\") },\n { name: \"pink\", color: d3.color(\"#ec008c\") },\n { name: \"black\", color: d3.color(\"#333333\") },\n { name: \"dkgray\", color: d3.color(\"#6E6E70\") },\n { name: \"gray\", color: d3.color(\"#818284\") },\n { name: \"ltgray\", color: d3.color(\"#A8A9AC\") },\n { name: \"vltgray\", color: d3.color(\"#D2D3D5\") }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2808,"value":"swColors.filter((d) => d.name == \"gray\")[0].color","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2179,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2177,"value":"displayPalettes([swColors.map((d) => d.color)], false)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"# Future development \n- ~~Click on lines to change color~~ (~~fix clicking on line label~~)\n- Wrap line labels https://observablehq.com/@jtrim-ons/svg-text-wrapping\n- Eliminate outliers\n- Datawrapper [style](https://observablehq.com/@observablehq/plot-datawrapper-style-date-axis) dates.\n- Incorporate titles\n- Ensure arrows ~~and annotations~~ move when screen resizes (use xScale etc).\n- Context menus: https://plnkr.co/edit/hAx36JQhb0RsvVn7TomS?p=preview&preview","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 45:"$44:body"