2d:null 2e:["$","title",null,{"children":"Choropleth maps based on ternary compositions | Matthieu Viry | Observable"}] 33:T778,{ const meanCentering = chbx.indexOf('Mean centering') > -1; const showLines = chbx.indexOf('Show line') > -1; const showCenter = chbx.indexOf('Show center') > -1; const rotateTickLabels = chbx.indexOf('Rotate tick labels') > -1; const data = nuts2.features.map((ft) => [ft.properties.ed_0to2, ft.properties.ed_3to4, ft.properties.ed_5to8]); const div = htl.html`

`; const dims = { width: lgdSize, height: lgdSize, margin: { top: 30, right: 30, bottom: 30, left: 30 } }; const center = meanCentering ? tcl.CompositionUtils.center(data) : [1/3, 1/3, 1/3]; const labels = labelPosition === 'corner' ? ['0 to 2', '3 to 4', '5 to 8'] : ['⟵ 0 to 2', '⟵ 3 to 4', '5 to 8 ⟶']; let svg; if (type === 'Discrete') { svg = tcl.Viz.createDiscretePlot(data, { center, hue, chroma, lightness, contrast, spread, labels, showCenter, showLines, labelPosition, rotateTickLabels, breaks: classes, }, dims); } else if (type === "Continuous") { svg = tcl.Viz.createContinuousPlot(data, { center, hue, chroma, lightness, contrast, spread, labels, showCenter, showLines, labelPosition, rotateTickLabels, }, dims); } const tooltip = d3tip() .html((e) => { const d = e.target.__data__; return `

id: ${nuts2.features[d.id].properties.id}
ed_0to2: ${d3.format(".3f")(d.point[0])}
ed_3to4: ${d3.format(".3f")(d.point[1])}
ed_5to8: ${d3.format(".3f")(d.point[2])}

`}); d3.select(svg) .call(tooltip) .selectAll('circle') .on("mouseover", tooltip.show) .on("mouseout", tooltip.hide); div.appendChild(svg); return div; }34:T61f,chart = { const meanCentering = chbx.indexOf('Mean centering') > -1; const showLines = chbx.indexOf('Show line') > -1; const showCenter = chbx.indexOf('Show center') > -1; const svg = d3.create("svg") .attr('id', 'svg-map') .attr("width", 975) .attr("height", 610) .attr("viewBox", [0, 0, 975, 610]) .attr("style", "max-width: 100%; height: auto;"); const tooltip = d3tip() .html((e) => { const d = e.target.__data__.properties; return `

id: ${d.id}
ed_0to2: ${d.ed_0to2}
ed_3to4: ${d.ed_3to4}
ed_5to8: ${d.ed_5to8}

`}); svg.call(tooltip); const data = nuts2.features.map((ft) => [ft.properties.ed_0to2, ft.properties.ed_3to4, ft.properties.ed_5to8]); const center = meanCentering ? tcl.CompositionUtils.center(data) : [1/3, 1/3, 1/3]; const colors = tcl.tricolore(data, { center, breaks: type.startsWith('Disc') ? classes : 100, hue, chroma, lightness, contrast, spread, }); const proj = d3.geoAzimuthalEqualArea() .rotate([-10, -52, 0]) .fitExtent([[0, 0], [975, 610]], nuts2); const path = d3.geoPath(proj); svg.append("g") .selectAll("path") .data(nuts2.features) .join("path") .attr("fill", (d, i) => colors[i]) .attr('stroke', 'darkgrey') .attr("d", path) .on("mouseover", tooltip.show) .on("mouseout", tooltip.hide); return svg.node(); }35:[{"id":"d86e54df7ebcacd2b0193049f2760ec6641839c94f6fadd27dcdff06c9b75954bd55484fbe0af172b1ff2fe239344fa2c7054d0dd4636825f3a72b70a1fa347a","href":"https://static.observableusercontent.com/files/d86e54df7ebcacd2b0193049f2760ec6641839c94f6fadd27dcdff06c9b75954bd55484fbe0af172b1ff2fe239344fa2c7054d0dd4636825f3a72b70a1fa347a","name":"euro_basemap.geojson","type":"application/geo+json","lastModified":1755625620422.091,"size":386195}] 31:{"id":"2ff9d873146e79e7","slug":"choropleth-maps-based-on-ternary-composition","title":"Choropleth maps based on ternary compositions","thumbnail":"405036809ea365e23bef3c7bf7b866ea2b73a70691c1257828263c433996eb01","access_level":"public","create_time":"$D2025-07-31T14:16:30.935Z","update_time":"$D2026-08-03T15:48:48.127Z","view_time":null,"first_public_time":"$D2025-08-29T07:46:01.230Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"25213e2b9755731d","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":"starter_2024"},"version":811,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null}],"members":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null,"role":"editor"},{"type":"team","id":"25213e2b9755731d","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"cbbbea71a9b4864a","slug":"magrit","title":"Magrit","owner":{"id":"25213e2b9755731d","login":"mthh","name":"Matthieu Viry"}},"type":"notebook","body":{"title":"Choropleth maps based on ternary compositions","cells":[{"id":0,"value":"# Choropleth maps based on ternary compositions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"This is an experiment to see what options would need to be offered to users if we implement choropleth maps based on ternary compositions in [Magrit](https://magrit.cnrs.fr) (related issue on GitHub: [#158](https://github.com/riatelab/magrit/issues/158)).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":626,"value":"The values used to control colors are as follows:\n\n- Hue: Defines the hue of the first component (p1 - left corner). The hues of the other two components are automatically set to +120° (for p2 - top corner) and +240° (for p3 - right corner) on the color wheel, forming a triadic scheme.\n- Chroma: Controls the maximum saturation/intensity of the pure colors at the corners of the triangle. The higher this value, the more vivid and distinct the colors.\n- Lightness: Determines the overall brightness of the palette. Affects all colors in the triangle.\n- Contrast: Controls the difference in brightness and saturation between the center (balanced mix) and the corners (pure components). Higher contrast makes the corners more distinct from the center.\n- Spread: Controls the extent of the color gradient around the center. A higher value concentrates color differentiation near the center.\n\nSee also the [\"sextant\" version](https://observablehq.com/@mthh/choropleth-maps-based-on-ternary-compositions-sext).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"### Options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"viewof type = Inputs.select(['Discrete', 'Continuous'], {label: ''})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"viewof classes = Inputs.select(new Map([[4, 2], [9, 3], [16, 4]]), {label: \"Number of classes (only for discrete)\", value: 4, disabled: !type.startsWith('Disc')})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"viewof chbx = Inputs.checkbox([\"Mean centering\", \"Show center\", \"Show line\", \"Rotate tick labels\"], { label: ''})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"viewof hue = Inputs.range([0, 360], {label: \"Hue\", value: 10, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"viewof chroma = Inputs.range([0, 200], {label: \"Chroma\", value: 120, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"viewof lightness = Inputs.range([0, 100], {label: \"Lightness\", value: 70, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"viewof contrast = Inputs.range([0, 1], {label: \"Contrast\", value: 0.2, step: 0.05})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"viewof spread = Inputs.range([0, 5], {label: \"Spread\", value: 1, step: 0.1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"viewof lgdSize = Inputs.range([180, 500], {label: \"Legend width\", step: 1, value: 360})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"viewof labelPosition = Inputs.select(new Map([['Edge', 'edge'], ['Corner', 'corner']]), {label: \"Axis label position\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"### Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":454,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"### Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"### Other stuff","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":255,"value":"Data: Eurostat (2016)\n\nGeometries: GISCO\n\nRetrieved using [data preparation script of `tricolore` R package](https://github.com/jschoeley/tricolore/blob/master/data-raw/euro_example.R).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":593,"value":"### JavaScript implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":536,"value":"This notebook uses the [`tricolore.js`](https://github.com/riatelab/tricolore.js) library (licensed under GPL-3.0).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":442,"value":"tcl = require(\"tricolore@0.8.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"d3tip = require(\"d3-tip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"nuts2 = FileAttachment(\"euro_basemap.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"