31:[] 2f:{"title":"Line charts - a collection of Plot examples","cells":[{"id":0,"value":"# Line charts - a collection of Plot examples \n\nA copy of the Plot examples (sometimes slightly adjusted) provided for the [d3 charts](https://observablehq.com/@d3/charts) to have them in one place.","pinned":false,"hidden":false,"mode":"md"},{"id":520,"value":"heading(\"Basic line chart\", 1, k, bg)","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"Plot.plot({\n marks: [Plot.line(aapl, { x: \"date\", y: \"close\", stroke: \"steelblue\" })],\n width,\n height: 500,\n y: {\n grid: true,\n label: \"↑ Daily close ($)\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"heading(\"Line chart, Bollinger bands\", 2, k, bg)","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"Plot.plot({\n marks: [\n Plot.lineY(aapl, { x: \"date\", y: \"close\", stroke: \"#eee\" }),\n Plot.lineY(\n aapl,\n Plot.windowY({\n x: \"date\",\n y: \"close\",\n k: 20,\n anchor: \"end\",\n stroke: \"green\",\n reduce: (V) => d3.mean(V) - 2 * d3.deviation(V)\n })\n ),\n Plot.lineY(\n aapl,\n Plot.windowY({\n x: \"date\",\n y: \"close\",\n k: 20,\n anchor: \"end\",\n stroke: \"steelblue\"\n })\n ),\n Plot.lineY(\n aapl,\n Plot.windowY({\n x: \"date\",\n y: \"close\",\n k: 20,\n anchor: \"end\",\n stroke: \"red\",\n reduce: (V) => d3.mean(V) + 2 * d3.deviation(V)\n })\n )\n ],\n width,\n y: {\n grid: true,\n label: \"↑ close ($)\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"heading(\"Index chart - static version\", 3, k, bg)","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"Plot.plot({\n marks: [\n Plot.line(\n indices,\n Plot.normalizeY({\n basis: \"first\",\n x: \"Date\",\n y: \"Close\",\n stroke: \"Symbol\"\n })\n )\n ],\n width,\n y: {\n type: \"log\",\n domain: [0.1, 6],\n grid: true\n },\n color: {\n legend: true\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"indices","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"heading(\"Index chart - interactive version\", 4, k, bg)","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"viewof index = Scrubber(d3.range(1260), {\n autoplay: false,\n format: (d) =>\n indices[d].Date.toLocaleString(\"en\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"Plot.plot({\n width,\n marginRight: 80,\n y: {\n type: \"log\",\n //domain: [0.1, 6],\n domain: [10, 600],\n grid: true,\n percent: true\n },\n color: {\n legend: true\n },\n\n marks: [\n Plot.line(\n indices,\n Plot.normalizeY({\n basis: (d) => d[index],\n x: \"Date\",\n y: \"Close\",\n stroke: \"Symbol\"\n })\n ),\n Plot.ruleX([indices[index].Date]),\n Plot.text([1], {\n text: [\n indices[index].Date.toLocaleString(\"en\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\"\n })\n ],\n x: indices[index].Date,\n y: 0.1,\n dx: 5,\n dy: -10,\n textAnchor: \"start\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"heading(\"Line chart with inline labels\", 5, k, bg)","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"Plot.plot({\n marks: [\n Plot.line(sales, { x: \"date\", y: \"sales\", stroke: \"fruit\" }),\n Plot.dot(sales, { x: \"date\", y: \"sales\", r: 10, fill: \"white\" }),\n Plot.text(sales, { x: \"date\", y: \"sales\", text: \"sales\" }),\n Plot.text(\n sales,\n Plot.selectLast({\n x: \"date\",\n y: \"sales\",\n text: \"fruit\",\n z: \"fruit\",\n textAnchor: \"start\",\n dx: 10,\n fontWeight: \"bold\"\n })\n )\n ],\n width,\n height: 500,\n y: { axis: null, inset: 15 },\n marginRight: 55\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"heading(\"Line chart with missing data\", 6, k, bg)","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"Plot.plot({\n width,\n marks: [\n // first create line for reduced data set without NaN rows, so a straight line connects the missing parts\n Plot.line(aaplMissing, {\n filter: (d) => !isNaN(d.close),\n x: \"date\",\n y: \"close\",\n stroke: \"#eee\"\n }),\n // second draw line for the data set with NaN rows, the missing parts are not (over-)drawn\n Plot.line(aaplMissing, {\n x: \"date\",\n y: \"close\",\n stroke: \"steelblue\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"heading(\"Line chart with tooltip\", 7, k, bg)","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"addTooltips(\n Plot.plot({\n marks: [\n Plot.line(aapl, {\n x: \"date\",\n y: \"close\",\n stroke: \"steelblue\",\n title: (d) =>\n `date: ${d.date.toLocaleString(\"en-US\", {\n day: \"numeric\",\n month: \"numeric\",\n year: \"numeric\"\n })} \\n close: ${d.close}` // \\n makes a new line\n })\n ],\n width,\n height: 500,\n y: {\n grid: true,\n label: \"↑ Daily close ($)\"\n }\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"heading(\"Line chart with multiple lines\", 8, k, bg)","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"Plot.plot({\n width,\n marks: [\n Plot.line(unemployment, {\n x: \"date\",\n y: \"unemployment\",\n z: \"division\", // or stroke: \"division\" to also choose different colors for each line\n stroke: \"steelblue\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":592,"value":"k = 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"bg = \"blue\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"import { aapl } from \"@d3/line-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"import { indices } from \"@d3/index-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"import { sales } from \"@d3/inline-labels\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"import { aaplMissing } from \"@d3/line-with-missing-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"import { unemployment } from \"@d3/multi-line-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"import { addTooltips } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"#### Misc","pinned":false,"hidden":false,"mode":"md"},{"id":518,"value":"import { heading } from \"@ee2dev/formatting-in-observable\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}