2b:null 2c:["$","title",null,{"children":"Slides-1: Interaction patterns for Plot | ee2dev | Observable"}] 31:Tc27,viewof combined = Plot.plot({ inset: 5, marks: [ Plot.frame(), Plot.dot(penguins, { x: "body_mass_g", y: "culmen_length_mm", fx: "species", fy: "sex" }), // A mark with a custom render function that listens to the pointer Plot.dot(penguins, { x: "body_mass_g", y: "culmen_length_mm", fx: "species", fy: "sex", fill: "orange", render: function (index, scales, values, dimensions, context, next) { const mark = this; const { marginLeft: l, marginTop: t, marginRight, marginBottom, width, height, r = width - marginRight, b = height - marginBottom } = dimensions; const { ownerSVGElement, document } = context; ownerSVGElement.value = null; // Note: while this uses svg`` for convenience, for genericity we could use document.createElement const xh = svg``; const yh = svg``; let selected = svg``; // for the closest penguin const g = svg` ${xh}${yh} ${selected} `; function move(event) { if (mark.sticky) return; const [x, y] = d3.pointer(event, g); if (x < l || x > r || y < t || y > b) { selected.replaceWith((selected = svg``)); return; } const i = d3.least( index, (i) => (values.x[i] - x) ** 2 + (values.y[i] - y) ** 2 ); selected.replaceWith( (selected = next([i], scales, values, dimensions, context)) ); ownerSVGElement.value = { x: scales.x?.invert?.(x) ?? x, y: scales.y?.invert?.(y) ?? y, facet: g.__data__, datum: mark.data[i] }; mark._position = [x, y]; ownerSVGElement.dispatchEvent(new Event("input")); } ownerSVGElement.addEventListener("pointermove", move); g.addEventListener("click", (event) => { mark.sticky = !mark.sticky; move(event); }); g.addEventListener("pointerleave", (event) => { if (mark.sticky) return; ownerSVGElement.value = null; ownerSVGElement.dispatchEvent(new Event("input")); }); ownerSVGElement.addEventListener("input", (event) => { const { value, screen } = ownerSVGElement; if (value == null) { g.setAttribute("visibility", "hidden"); } else { const [x, y] = mark._position; yh.setAttribute("x1", x); yh.setAttribute("x2", x); xh.setAttribute("y1", y); xh.setAttribute("y2", y); g.setAttribute("visibility", "visible"); } }); return g; } }) ] })32:Tcda,graph_13 = { return Plot.plot({ inset: 5, marks: [ Plot.frame(), Plot.dot(penguins, { x: "body_mass_g", y: "culmen_length_mm", fx: "species", fy: "sex" }), // A mark with a custom render function that listens to the pointer Plot.dot(penguins, { x: "body_mass_g", y: "culmen_length_mm", fx: "species", fy: "sex", fill: "orange", render: function (index, scales, values, dimensions, context, next) { const mark = this; const { marginLeft: l, marginTop: t, marginRight, marginBottom, width, height, r = width - marginRight, b = height - marginBottom } = dimensions; const { ownerSVGElement, document } = context; ownerSVGElement.value = null; // Note: while this uses svg`` for convenience, for genericity we could use document.createElement const xh = svg``; const yh = svg``; let selected = svg``; // for the closest penguin const g = svg` ${xh}${yh} ${selected} `; function move(event) { if (mark.sticky) return; const [x, y] = d3.pointer(event, g); if (x < l || x > r || y < t || y > b) { selected.replaceWith((selected = svg``)); return; } const i = d3.least( index, (i) => (values.x[i] - x) ** 2 + (values.y[i] - y) ** 2 ); selected.replaceWith( (selected = next([i], scales, values, dimensions, context)) ); ownerSVGElement.value = { x: scales.x?.invert?.(x) ?? x, y: scales.y?.invert?.(y) ?? y, facet: g.__data__, datum: mark.data[i] }; mark._position = [x, y]; ownerSVGElement.dispatchEvent(new Event("input")); } ownerSVGElement.addEventListener("pointermove", move); g.addEventListener("click", (event) => { mark.sticky = !mark.sticky; move(event); }); g.addEventListener("pointerleave", (event) => { if (mark.sticky) return; ownerSVGElement.value = null; ownerSVGElement.dispatchEvent(new Event("input")); }); ownerSVGElement.addEventListener("input", (event) => { const { value, screen } = ownerSVGElement; if (value == null) { g.setAttribute("visibility", "hidden"); } else { const [x, y] = mark._position; yh.setAttribute("x1", x); yh.setAttribute("x2", x); xh.setAttribute("y1", y); xh.setAttribute("y2", y); g.setAttribute("visibility", "visible"); } }); return g; } }) ] }); }33:T430,graph_14 = { return Plot.plot({ width: 1000, marginLeft: 60, marginBottom: 120, height: 410, x: { label: null }, color: { type: "categorical" }, marks: [ Plot.ruleY([0]), Plot.text( staggered_data.filter((d) => d.patient === 1), Plot.pointerX( staggered({ x: "pos", dy: 30, text: "residue", frameAnchor: "bottom", fontWeight: "normal", fontSize: 7, fill: "#888" }) ) ), Plot.lineY( staggered_data, Plot.windowY( { k: 4 }, Plot.map( { y: normalize === "one" ? (d) => d : Plot.normalize(normalize) }, { x: "pos", y: "value", z: "patient", stroke: "patient", channels: { residue: "residue" }, tip: true } ) ) ), Plot.ruleX(staggered_data, Plot.pointerX({ x: "pos" })) ] }); }34:T9fe,Plot.plot({ marginLeft: 50, width: 928, y: { grid: true, label: "↑ Unemployed (thousands)" }, marks: [ Plot.areaY(grouped_data, { x: "date", y: "unemployed", fill: "industry", sort: { color: "-y" } }), Plot.ruleX( grouped_data, Plot.pointerX(Plot.binX({}, { x: "date", thresholds: 100, insetTop: 20 })) ), Plot.tip( grouped_data, Plot.pointerX( Plot.binX( { title: (v) => v }, { x: "date", thresholds: 100, render(index, scales, values, dimensions, context) { const g = d3.select(context.ownerSVGElement).append("g"); const [i] = index; if (i !== undefined) { const data = values.title[i]; g.attr( "transform", `translate(${Math.min( values.x1[i], dimensions.width - dimensions.marginRight - 200 )}, 20)` ).append(() => Plot.plot({ marginTop: 14, height: 85, width: 195, axis: null, y: { domain: scales.scales.color.domain }, marks: [ Plot.frame({ fill: "white", stroke: "currentColor" }), Plot.dot(data, { y: "industry", fill: (d) => scales.color(d.industry), // 👉 ensure color consistency r: 5, frameAnchor: "left", symbol: "square2", dx: 7 }), Plot.text(data, { y: "industry", text: "industry", frameAnchor: "left", dx: 14 }), Plot.text(data, { y: "industry", text: "unemployed", frameAnchor: "right", dx: -2 }), Plot.text([data[0]], { frameAnchor: "top-left", dy: -13, text: "date" }) ] }) ); } return g.node(); } } ) ) ), Plot.ruleY([0]) ] })35:Tad1,graph_15 = { return Plot.plot({ marginLeft: 50, width: 928, y: { grid: true, label: "↑ Unemployed (thousands)" }, marks: [ Plot.areaY(grouped_data, { x: "date", y: "unemployed", fill: "industry", sort: { color: "-y" } }), Plot.ruleX( grouped_data, Plot.pointerX( Plot.binX({}, { x: "date", thresholds: 100, insetTop: 20 }) ) ), Plot.tip( grouped_data, Plot.pointerX( Plot.binX( { title: (v) => v }, { x: "date", thresholds: 100, render(index, scales, values, dimensions, context) { const g = d3.select(context.ownerSVGElement).append("g"); const [i] = index; if (i !== undefined) { const data = values.title[i]; g.attr( "transform", `translate(${Math.min( values.x1[i], dimensions.width - dimensions.marginRight - 200 )}, 20)` ).append(() => Plot.plot({ marginTop: 14, height: 85, width: 195, axis: null, y: { domain: scales.scales.color.domain }, marks: [ Plot.frame({ fill: "white", stroke: "currentColor" }), Plot.dot(data, { y: "industry", fill: (d) => scales.color(d.industry), // 👉 ensure color consistency r: 5, frameAnchor: "left", symbol: "square2", dx: 7 }), Plot.text(data, { y: "industry", text: "industry", frameAnchor: "left", dx: 14 }), Plot.text(data, { y: "industry", text: "unemployed", frameAnchor: "right", dx: -2 }), Plot.text([data[0]], { frameAnchor: "top-left", dy: -13, text: "date" }) ] }) ); } return g.node(); } } ) ) ), Plot.ruleY([0]) ] }); }36:[] 2f:{"id":"9bbb5b182dcd96fb","slug":"slides-1-interaction-patterns-for-plot","title":"Slides-1: Interaction patterns for Plot","thumbnail":"41992cb42262e29039ec487a71025d3c7304e3a38035ef935abc8561aa1ee0b7","access_level":"public","create_time":"$D2025-07-06T12:16:12.083Z","update_time":"$D2025-07-08T22:20:19.688Z","view_time":null,"first_public_time":"$D2025-07-08T22:21:02.940Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"e6e1e2a0da500bb6","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":"starter_2024"},"version":1321,"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"},{"type":"team","id":"e6e1e2a0da500bb6","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Slides-1: Interaction patterns for Plot","cells":[{"id":646,"value":"# Slides-1: Interaction patterns for Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":905,"value":"slide.md`# Interaction patterns for common visualizations\n
\nMihael Ankerst\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1265,"value":"slide.md`\n## 1 Five techniques to improve chart annotations in data visualizations\n
\nhttps://observablehq.com/blog/five-techniques-to-improve-chart-annotations\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":917,"value":"slide.md`\n#### 1.1 Pointer-driven marks\n
\n- “If you make a tooltip, assume no one will ever see it”\n- **Make an interactive tip with a visible default state**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":920,"value":"slide.md`\n#### 1.1 Pointer-driven marks\n
\n${graph_11}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":944,"value":"slide.md`#### 1.2 Continuous crosshairs\n
\n- Sometimes, you don't want to display at the pointer position\n- to understand where there is no data\n- or to give a sense of orientation\n- **Then you may want to focus on the axes** \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":963,"value":"slide.md`\n#### 1.2 Continuous crosshairs\n\n
\n${graph_12b}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":901,"value":"slide.md`\n#### 1.2 Continuous crosshairs (second example)\n
\n${graph_12}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":953,"value":"slide.md`\n#### 1.3 Cross-facet crosshairs\n
\n- Can we highlight all ‘related points’ across all facets?\n- **You may also want to highlight the closest point**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":968,"value":"slide.md`\n#### 1.3 Cross-facet crosshairs\n
\n${graph_13}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":981,"value":"slide.md`\n#### 1.4 Staggered axes\n
\n- Sometimes you have too many tick labels to display on an axis\n- Avoid occlusion by staggering axis text on alternating rows\n- **Extreme example: Text staggering by offsetting labels across 10 rows**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":983,"value":"slide.md`\n#### 1.4 Staggered axes\n
\n${graph_14}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1017,"value":"slide.md`\n#### 1.5 Grouped tips\n
\n- tooltip for charts with multiple series\n- **display the y values for all the series at a given x position**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1019,"value":"slide.md`\n#### 1.5 Grouped tips\n
\n${graph_15}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1032,"value":"slide.md`\n#### 1.6 Reordering stacked bar charts\n
\n- click on a a category to be reorder\n- selected category is shown on the common baseline\n- from Dylan Wootton, @woottondylan\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1034,"value":"slide.md`\n#### 1.6 Reordering stacked bar charts\n
\n${vegaView}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1029,"value":"slide.md`\n## 2 What about color?\n
\nimplemented with the help from @observablehq community, esp. @mootari (Fabian Iwand) \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1041,"value":"slide.md`\n#### 2.1 Mapping a categorical attribute to colors\n
\n- show a legend with categories and corresponding colors\n- allow selection and deselection (filtering) of categories\n- allow color mapping one category vs rest\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1039,"value":"slide.md`\n#### 2.1 Mapping a categorical attribute to colors\n
\n${graph_21}\n${selectionView}\n${modeView}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1090,"value":"slide.md`\n#### 2.2 Mapping a numerical attribute to colors\n
\n- show a legend with intervals and their corresponding colors\n- allow adjusting the intervals\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1092,"value":"slide.md`\n#### 2.2 Mapping a numerical attribute to colors\n
\n${graph_22}\n${slider_22View}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1117,"value":"slide.md`\n## 3 Digging deeper ...\n
\nhttps://observablehq.com/@ee2dev/3-digging-deeper-bonus-section\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":869,"value":"---\n

\n### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":887,"value":"keyBindings","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":923,"value":"import { outcomePollingAverage as graph_11 } from \"@ee2dev/plot-interaction-pointer-driven-marks\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":874,"value":"import { builder, builderFontSize } from \"@anjana/the-power-of-js-generators\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":879,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":892,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":883,"value":"import { slide, notes, style, keyBindings } from \"@visnup/slides\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":871,"value":"## Content as cells","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":651,"value":"### 1 Five techniques to improve chart annotations in data visualizations\nhttps://observablehq.com/blog/five-techniques-to-improve-chart-annotations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":664,"value":"#### 1.1 Pointer-driven marks\n- “If you make a tooltip, assume no one will ever see it”\n- **Make an interactive tip with a visible default state**\n\nhttps://observablehq.com/@observablehq/plot-pointer-driven-marks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":674,"value":"outcomePollingAverage","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":668,"value":"import { outcomePollingAverage } from \"@observablehq/plot-pointer-driven-marks\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":653,"value":"#### 1.2 Continuous crosshairs\n- Sometimes, you don't want to display at the pointer position\n- to understand where there is no data\n- or to give a sense of orientation\n- **Then you may want to focus on the axes** ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":957,"value":"Plot.plot({\n height: 500,\n width: 800,\n x: { nice: true },\n marks: [\n Plot.lineY(aapl, { x: \"Date\", y: \"Close\" }),\n hair({\n tickFormatX: \"%Y\\n%b\",\n tickFormatY: \".0f\",\n intervalX: \"1 day\",\n intervalY: 1,\n stroke: \"red\",\n strokeOpacity: 1\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":844,"value":"graph_12 = {\n return Plot.plot({\n height: 500,\n width: 800,\n x: { nice: true },\n marks: [\n Plot.lineY(aapl, { x: \"Date\", y: \"Close\" }),\n hair({\n tickFormatX: \"%Y\\n%b\",\n tickFormatY: \".0f\",\n intervalX: \"1 day\",\n intervalY: 1,\n stroke: \"red\",\n strokeOpacity: 1\n })\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":960,"value":"graph3 = {\n return Plot.plot({\n height: 640,\n marginLeft: 44,\n color: {\n scheme: \"bupu\",\n type: \"symlog\"\n },\n marks: [\n Plot.rect(\n diamonds,\n Plot.bin({ fill: \"count\" }, { x: \"carat\", y: \"price\", thresholds: 100 })\n ),\n hair({\n tickFormatX: (d) => (Math.floor(d * 20) / 20).toFixed(2),\n tickFormatY: \",d\"\n })\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":660,"value":"graph_12b = {\n return Plot.plot({\n height: 640,\n marginLeft: 44,\n color: {\n scheme: \"bupu\",\n type: \"symlog\"\n },\n marks: [\n Plot.rect(\n diamonds,\n Plot.bin({ fill: \"count\" }, { x: \"carat\", y: \"price\", thresholds: 100 })\n ),\n hair({\n tickFormatX: (d) => (Math.floor(d * 20) / 20).toFixed(2),\n tickFormatY: \",d\"\n })\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":657,"value":"import { hair } from \"@observablehq/plot-continuous-crosshair\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":690,"value":"#### 1.3 Cross-facet crosshairs\n- Can we highlight all ‘related points’ across all facets?\n- **You may also want to highlight the closest point**\nhttps://observablehq.com/@observablehq/cross-facet-crosshair","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":696,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":701,"value":"combined","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":966,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":704,"value":"#### 1.4 Staggered axes\n- Sometimes you have too many tick labels to display on an axis\n- Avoid occlusion by staggering axis text on alternating rows\n- **Extreme example: Text staggering by offsetting labels across 10 rows**\nhttps://observablehq.com/@observablehq/plot-staggered-axis\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":713,"value":"Plot.plot({\n width,\n marginLeft: 60,\n marginBottom: 120,\n height: 410,\n x: { label: null },\n color: { type: \"categorical\" },\n marks: [\n Plot.ruleY([0]),\n Plot.text(\n staggered_data.filter((d) => d.patient === 1),\n Plot.pointerX(\n staggered({\n x: \"pos\",\n dy: 30,\n text: \"residue\",\n frameAnchor: \"bottom\",\n fontWeight: \"normal\",\n fontSize: 7,\n fill: \"#888\"\n })\n )\n ),\n Plot.lineY(\n staggered_data,\n Plot.windowY(\n { k: 4 },\n Plot.map(\n { y: normalize === \"one\" ? (d) => d : Plot.normalize(normalize) },\n {\n x: \"pos\",\n y: \"value\",\n z: \"patient\",\n stroke: \"patient\",\n channels: { residue: \"residue\" },\n tip: true\n }\n )\n )\n ),\n Plot.ruleX(staggered_data, Plot.pointerX({ x: \"pos\" }))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":711,"value":"viewof normalize = Inputs.radio([\"max\", \"median\", \"mean\", \"one\"], {\n value: \"median\",\n label: \"normalize\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":988,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":994,"value":"normalize2 = {\n return Inputs.radio([\"max\", \"median\", \"mean\", \"one\"], {\n value: \"median\",\n label: \"normalize\"\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":715,"value":"import {\n staggered,\n data as staggered_data\n} from \"@observablehq/plot-staggered-axis\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":708,"value":"#### 1.5 Grouped tips\n- tooltip for charts with multiple series\n- **display the y values for all the series at a given x position**\nhttps://observablehq.com/@observablehq/plot-grouped-tips\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":727,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1023,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":732,"value":"import { data as grouped_data } from \"@observablehq/plot-grouped-tips\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":865,"value":"#### 1.6 Reordering stacked \n- click on a a category to be reorder\n- selected category is shown on the common baseline\n- from Dylan Wootton, @woottondylan\n- https://twitter.com/woottondylan/status/1646596161548046346?s=46&t=5OWmdHzW_1fgEpt5RdRmSQ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1233,"value":"See https://observablehq.com/@vega/hello-vega-embed","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1240,"value":"vegaView = {\n return embed(spec);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1235,"value":"embed = require(\"vega-embed@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1222,"value":"spec = ({\n $schema: \"https://vega.github.io/schema/vega-lite/v5.json\",\n width: 500,\n height: 500,\n data: { url: \"https://vega.github.io/vega-datasets/data/barley.json\" },\n params: [\n {\n name: \"ALX_SELECTION_click_FILTER\",\n select: { type: \"point\", encodings: [\"color\"], fields: [\"site\"] }\n }\n ],\n transform: [\n {\n calculate:\n \"if(ALX_SELECTION_click_FILTER.site && datum.site === ALX_SELECTION_click_FILTER.site[0], 0, if(datum.site === 'Grand Rapids', 1, 2))\",\n as: \"siteOrder\"\n }\n ],\n mark: \"bar\",\n encoding: {\n x: { aggregate: \"sum\", field: \"yield\" },\n y: { field: \"variety\" },\n color: { field: \"site\" },\n order: { field: \"siteOrder\" }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":739,"value":"### 2 How to interact with colors?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":741,"value":"#### 2.1 Mapping a categorical attribute to colors\n- show a legend with categories and corresponding colors\n- allow selection and deselection (filtering) of categories\n- allow color mapping one category vs rest\n\nwith help from @observable community, esp. @mootari (Fabian Iwand) \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":744,"value":"Plot.plot({\n inset: 8,\n grid: true,\n // adjust the color scale in case of \"One vs all\"\n color: {\n domain: selectionMode === \"One vs all\" ? [selection] : colorScale.domain,\n range:\n selectionMode === \"One vs all\"\n ? [colorScale.range[colorScale.domain.indexOf(selection)]]\n : colorScale.range,\n unknown: \"lightgrey\"\n },\n marks: [\n Plot.dot(penguins_new, {\n x: \"flipper_length_mm\",\n y: \"body_mass_g\",\n stroke: \"island\",\n stroke: \"grey\",\n strokeWidth: 1,\n fill: \"island\",\n // fillOpacity: 0.5,\n r: 4\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"viewof selectionMode = Inputs.radio([\"Filter categories\", \"One vs all\"], {\n label: \"Selection mode:\",\n value: \"Filter categories\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"viewof selection = selectionMode === \"Filter categories\"\n ? filterLegend(colorScale.domain, colorScale.range)\n : radioButtonLegend(colorScale.domain, colorScale.range)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1050,"value":"graph_21 = {\n return Plot.plot({\n inset: 8,\n grid: true,\n // adjust the color scale in case of \"One vs all\"\n color: {\n domain:\n modeValue === \"One vs all\" ? [selectionValue] : colorScale_demo.domain,\n range:\n modeValue === \"One vs all\"\n ? [\n colorScale_demo.range[\n colorScale_demo.domain.indexOf(selectionValue)\n ]\n ]\n : colorScale_demo.range,\n unknown: \"lightgrey\"\n },\n marks: [\n Plot.dot(penguins_demo, {\n x: \"flipper_length_mm\",\n y: \"body_mass_g\",\n stroke: \"island\",\n stroke: \"grey\",\n strokeWidth: 1,\n fill: \"island\",\n // fillOpacity: 0.5,\n r: 4\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1055,"value":"modeView = Inputs.radio([\"Filter categories\", \"One vs all\"], {\n label: \"Selection mode:\",\n value: \"Filter categories\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1057,"value":"modeValue = Generators.input(modeView)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1067,"value":"selectionView = modeValue === \"Filter categories\"\n ? filterLegend(colorScale_demo.domain, colorScale_demo.range)\n : radioButtonLegend(colorScale_demo.domain, colorScale_demo.range)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1071,"value":"selectionValue = Generators.input(selectionView)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1076,"value":"colorScale_demo = {\n return Plot.plot({\n inset: 8,\n grid: true,\n marks: [\n Plot.dot(penguins, {\n x: \"flipper_length_mm\",\n y: \"body_mass_g\",\n stroke: \"island\"\n })\n ]\n }).scale(\"color\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1084,"value":"penguins_demo = penguins.filter((d) =>\n modeValue === \"Filter categories\" ? selectionValue.includes(d.island) : true\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":753,"value":"#### 2.2 Mapping a numerical attribute to colors\n- show a legend with intervals and their corresponding colors\n- allow adjusting the intervals\n\nwith help from @observable community, esp. @mootari (Fabian Iwand) ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":530,"value":"addTooltips(\n // Add tooltips\n Plot.plot({\n projection: \"albers-usa\",\n marks: [\n Plot.geo(counties, {\n fill: (d) => broadband_access_2018.get(d.id),\n title: (d) =>\n `${d.properties.name} County \\n ${percent(\n broadband_access_2018.get(d.id) // Custom tooltip text\n )}`\n }),\n Plot.geo(states, { stroke: \"#fff\", strokeWidth: 0.5 })\n ],\n color: {\n scheme: \"Spectral\",\n scheme: \"purples\",\n unknown: \"#ddd\",\n type: \"linear\",\n type: \"threshold\",\n label: \"% of county population with home broadband\",\n legend: true,\n percent: true,\n domain: thresholds // update the domain thresholds\n }\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":558,"value":"viewof demo2 = inputTemplate(\n Inputs.form(\n linkRanges(\n d3.pairs([0, 25, 50, 75, 100]).map((value, i) =>\n interval([0, 100], {\n value,\n color: colorScale2.range[i],\n // Hide values\n // format: (d) => htl.html.fragment``,\n step: 1,\n width: 800\n })\n )\n )\n ),\n { label: \"% with home broadband\", width: 200 }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1098,"value":"graph_22 = {\n return addTooltips(\n // Add tooltips\n Plot.plot({\n projection: \"albers-usa\",\n marks: [\n Plot.geo(counties, {\n fill: (d) => broadband_access_2018.get(d.id),\n title: (d) =>\n `${d.properties.name} County \\n ${percent(\n broadband_access_2018.get(d.id) // Custom tooltip text\n )}`\n }),\n Plot.geo(states, { stroke: \"#fff\", strokeWidth: 0.5 })\n ],\n color: {\n scheme: \"Spectral\",\n scheme: \"purples\",\n unknown: \"#ddd\",\n type: \"linear\",\n type: \"threshold\",\n label: \"% of county population with home broadband\",\n legend: true,\n percent: true,\n domain: thresholds_22 // update the domain thresholds\n }\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1101,"value":"slider_22View = {\n return inputTemplate(\n Inputs.form(\n linkRanges(\n d3.pairs([0, 25, 50, 75, 100]).map((value, i) =>\n interval([0, 100], {\n value,\n color: colorScale2.range[i],\n // Hide values\n // format: (d) => htl.html.fragment``,\n step: 1,\n width: 800\n })\n )\n )\n ),\n { label: \"% with home broadband\", width: 200 }\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1109,"value":"slider_22Value = Generators.input(slider_22View)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1105,"value":"thresholds_22 = [slider_22Value[1][0], slider_22Value[2][0], slider_22Value[3][0]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":862,"value":"import { interval } from \"@mootari/range-slider@1786\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":758,"value":"#### 2.2 Mapping a numerical attribute to colors (Extension)\n- show a legend with intervals and their corresponding colors\n- allow adjusting the intervals\n- allow different default intervals (number and ranges)\n- allow increasing and decreasing the number of intervals\n- allow one vs all color mapping","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":769,"value":"### 3 Digging deeper","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":771,"value":"#### 3.1 Finding default intervals for numerical data\n- d3.bin() offers different ways to find intervals\n- you can define your own algorithm\n- ... or use k-means clustering","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1127,"value":"graph_31 = draw_buckets(bin25_demo, distributionsValue)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1174,"value":"chunksView = {\n return Inputs.range([2, 20], {\n value: 10,\n step: 1,\n label: \"# of intervals\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1138,"value":"chunksValue = Generators.input(chunksView)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1132,"value":"distributionsView = select_distribution(\"Normal\", \"\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1134,"value":"distributionsValue = Generators.input(distributionsView)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":775,"value":"import { draw_buckets, bin25, select_distribution } from \"@d3/d3-bin\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1147,"value":"import { bin25 as bin25_demo } with { chunksValue as chunks } from \"@d3/d3-bin\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":811,"value":"#### 3.2 Dealing with a large number of categories\n- mapping categories to colors is limited to a small number\n- one strategy is to reduce the number of categories \n- let's do this interactively by deciding the size of \"other\"\n\ncredit: Heman Robinson @heman","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":823,"value":"cat1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1195,"value":"graph_32 = cat1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":817,"value":"import { cat1, cat2 } from \"@ee2dev/dynamic-top-n-and-binning\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":825,"value":"#### 3.3 Multiple Dimensions\n- you can extend this approach to multiple dimensions\n- e.g. create a heatmap with categorical and continuous binning","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":834,"value":"cat2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"#### 👉Desired functionality\n- shows legend with categories and corresponding colors\n- allow selection and deselection (filtering) of categories\n- allow color mapping one category vs rest ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":289,"value":"#### 👉Prototype\nbased on [@tophtucker/interactive-plot-legend](https://observablehq.com/@tophtucker/interactive-plot-legend)\n~~~js\nimport {filterButton, radioButtonLegend} from '@observable/huhu'\n~~~\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":247,"value":"#### 1.1 Filter data based on the selection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":240,"value":"penguins_new = penguins.filter((d) =>\n selectionMode === \"Filter categories\" ? selection.includes(d.island) : true\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":245,"value":"#### 1.2 Expose the color scale of the original Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":187,"value":"colorScale = {\n return Plot.plot({\n inset: 8,\n grid: true,\n marks: [\n Plot.dot(penguins, {\n x: \"flipper_length_mm\",\n y: \"body_mass_g\",\n stroke: \"island\"\n })\n ]\n }).scale(\"color\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"#### 1.3 Call Plot by modifying the color scale ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":201,"value":"Plot.plot({\n inset: 8,\n grid: true,\n // adjust the color scale in case of \"One vs all\"\n color: {\n domain: selectionMode === \"One vs all\" ? [selection] : colorScale.domain,\n range:\n selectionMode === \"One vs all\"\n ? [colorScale.range[colorScale.domain.indexOf(selection)]]\n : colorScale.range,\n unknown: \"lightgrey\"\n },\n marks: [\n Plot.dot(penguins_new, {\n x: \"flipper_length_mm\",\n y: \"body_mass_g\",\n stroke: \"island\",\n stroke: \"grey\",\n strokeWidth: 1,\n fill: \"island\",\n // fillOpacity: 0.5,\n r: 4\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":622,"value":"#### 1.4 To Do\nCheck out: (Alterative: Custom checkbox legend from https://observablehq.com/@jwolondon/teaching-utilities)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":13,"value":"import { set } from \"@tophtucker/interactive-plot-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"filterLegend = (domain, range) => {\n const value = new Map(domain.map((d) => [d, true]));\n const _set = () =>\n set(\n node,\n [...value].filter((d) => d[1]).map((d) => d[0])\n );\n const oninput = (e) => (value.set(e.target.id, e.target.checked), _set());\n const node = htl.html`

\n ${domain.map(\n (d, i) => htl.html`

\n ${d}\n

`\n )}\n

`;\n _set();\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"radioButtonLegend = (domain, range) => {\n const oninput = (e) => {\n node.value = e.target.id.slice(3);\n node.dispatchEvent(new Event(\"input\", { bubbles: true }));\n };\n const node = htl.html`

\n ${domain.map(\n (d, i) => htl.html`

\n \n ${d}\n

`\n )}\n

`;\n node.value = domain[0];\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":428,"value":"heading(\n \"Mapping a numerical attribute to colors\",\n 3,\n k,\n \"purple\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":445,"value":"#### 👉Desired functionality\n- shows legend with intervals and their corresponding colors\n- allow different default intervals (number and ranges)\n- allow increasing and decreasing the number of intervals\n- allow adjusting the intervals\n- allow one vs all color mapping","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":439,"value":"import {\n linkRanges,\n inputTemplate,\n interval as interval2\n} from \"c826aea92a8ae6d4\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":450,"value":"viewof demo = inputTemplate(\n Inputs.form(\n linkRanges(\n d3.pairs([0, 0.25, 0.5, 0.75, 1]).map((value, i) =>\n interval([0, 1], {\n value,\n color: [\"#f00\", \"#0c0\", \"#fa0\", \"#5af\"][i],\n // Hide values\n // format: (d) => htl.html.fragment``,\n step: 0.01,\n width: 800\n })\n )\n )\n ),\n { label: \"Color mapping for *attribute*\", width: 200 }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":548,"value":"#### 2.1 Expose the color scale of the original Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":553,"value":"colorScale2 = {\n return Plot.plot({\n projection: \"albers-usa\",\n marks: [\n Plot.geo(counties, {\n fill: (d) => broadband_access_2018.get(d.id),\n title: (d) =>\n `${d.properties.name} County \\n ${percent(\n broadband_access_2018.get(d.id) // Custom tooltip text\n )}`\n }),\n Plot.geo(states, { stroke: \"#fff\", strokeWidth: 0.5 })\n ],\n color: {\n scheme: \"Spectral\",\n scheme: \"purples\",\n unknown: \"#ddd\",\n type: \"linear\",\n type: \"threshold\",\n label: \"% of county population with home broadband\",\n legend: true,\n percent: true,\n domain: [25, 50, 75]\n }\n }).scale(\"color\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":579,"value":"demo2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":581,"value":"thresholds = [demo2[1][0], demo2[2][0], demo2[3][0]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":625,"value":"#### 2.3 To Do\nCheck out: Binning continuous data, natural breaks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":591,"value":"counties","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":532,"value":"import {\n states,\n addTooltips,\n counties,\n broadband_access_2018,\n percent\n} from \"@observablehq/build-your-first-choropleth-map-with-observable-plot\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":405,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":392,"value":"import { heading } from \"@ee2dev/formatting-in-observable\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":408,"value":"k = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"