2c:null 2d:["$","title",null,{"children":"Line charts - a collection of Plot examples | ee2dev | Observable"}] 32:[] 30:{"id":"4f11eec50aba7869","slug":"line-charts-a-collection-of-plot-examples","title":"Line charts - a collection of Plot examples","thumbnail":"51a554ba435f9a7ee2d2452a988f57e9f8ffa6b79e01b975965070a812d22ad9","access_level":"public","create_time":"$D2022-02-17T00:03:53.503Z","update_time":"$D2022-12-09T15:03:36.276Z","view_time":null,"first_public_time":"$D2022-02-23T18:23:30.548Z","has_unpublished_edits":null,"fork":{"id":"37e93cbb45aeeda3","slug":"the-function-mark-a-collection-of-plot-examples","title":"The function mark - a collection of Plot examples","owner":{"id":"e6e1e2a0da500bb6","login":"ee2dev","name":""}},"stars":3,"starred":false,"owner":{"type":"team","id":"e6e1e2a0da500bb6","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":"starter_2024"},"version":743,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null}],"members":[{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"a77077bc9385c1d7","slug":"plot","title":"Plot","owner":{"id":"e6e1e2a0da500bb6","login":"ee2dev","name":""}},"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":520,"value":"heading(\"Basic line chart\", 1, k, bg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"heading(\"Line chart, Bollinger bands\", 2, k, bg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"heading(\"Index chart - static version\", 3, k, bg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"indices","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"heading(\"Index chart - interactive version\", 4, k, bg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"heading(\"Line chart with inline labels\", 5, k, bg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"heading(\"Line chart with missing data\", 6, k, bg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"heading(\"Line chart with tooltip\", 7, k, bg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"heading(\"Line chart with multiple lines\", 8, k, bg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":592,"value":"k = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"bg = \"blue\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"import { aapl } from \"@d3/line-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"import { indices } from \"@d3/index-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"import { sales } from \"@d3/inline-labels\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"import { aaplMissing } from \"@d3/line-with-missing-data\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"import { unemployment } from \"@d3/multi-line-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"import { addTooltips } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"#### Misc","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":518,"value":"import { heading } from \"@ee2dev/formatting-in-observable\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"