2c:null 2d:["$","title",null,{"children":"Choropleth maps based on ternary compositions - Sextant version | Matthieu Viry | Observable"}] 32:T472,{ const div = document.createElement('div'); const i0 = document.createElement('input'); i0.type = 'color'; i0.value = color0; i0.onchange = function() { mutable color0 = this.value; }; const i1 = document.createElement('input'); i1.type = 'color'; i1.value = color1; i1.onchange = function() { mutable color1 = this.value; }; const i2 = document.createElement('input'); i2.type = 'color'; i2.value = color2; i2.onchange = function() { mutable color2 = this.value; }; const i3 = document.createElement('input'); i3.type = 'color'; i3.value = color3; i3.onchange = function() { mutable color3 = this.value; }; const i4 = document.createElement('input'); i4.type = 'color'; i4.value = color4; i4.onchange = function() { mutable color4 = this.value; }; const i5 = document.createElement('input'); i5.type = 'color'; i5.value = color5; i5.onchange = function() { mutable color5 = this.value; }; div.appendChild(i0); div.appendChild(i1); div.appendChild(i2); div.appendChild(i3); div.appendChild(i4); div.appendChild(i5); return div; }33:T5c6,{ 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, }; const center = meanCentering ? tcl.CompositionUtils.center(data) : [1/3, 1/3, 1/3]; const svg = tcl.Viz.createSextantPlot(data, { center, labels: labelPosition === 'corner' ? ['0 to 2', '3 to 4', '5 to 8'] : ['⟵ 0 to 2', '⟵ 3 to 4', '5 to 8 ⟶'], values: [color0, color1, color2, color3, color4, color5], 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:T5e1,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.tricoloreSextant(data, { center, values: [color0, color1, color2, color3, color4, color5], }); 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":1756452314571.627,"size":386195}] 30:{"id":"1bed29d59755f18e","slug":"choropleth-maps-based-on-ternary-compositions-sext","title":"Choropleth maps based on ternary compositions - Sextant version","thumbnail":"04b4e32fbb6b7ca6e4f5832ae922e52a5948d71e5edc2687910ca1b26a70b5a7","access_level":"public","create_time":"$D2025-08-29T07:25:14.571Z","update_time":"$D2026-08-03T15:46:58.427Z","view_time":null,"first_public_time":"$D2025-08-29T07:46:13.402Z","fork":{"id":"2ff9d873146e79e7","slug":"choropleth-maps-based-on-ternary-composition","title":"Choropleth maps based on ternary compositions","owner":{"id":"25213e2b9755731d","login":"mthh","name":"Matthieu Viry"}},"stars":3,"starred":false,"owner":{"type":"team","id":"25213e2b9755731d","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":"starter_2024"},"version":840,"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,"subscribed":null,"forks":0,"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 - Sextant version","cells":[{"id":0,"value":"# Choropleth maps based on ternary compositions - Sextant version","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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"},{"id":626,"value":"In the *sextant* version of the plot, you can choose 6 colors, for each of the sextants.\n\nSee also the [*continuous* or *discrete* color mapping based on a triadic scheme](https://observablehq.com/@mthh/choropleth-maps-based-on-ternary-composition).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":16,"value":"### Options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":808,"value":"

Colors of the 6 sextants, clockwise, starting from the one at the bottom left:

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":766,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":786,"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"},{"id":8,"value":"### Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":454,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":718,"value":"### Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":181,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"### Other stuff","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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"},{"id":593,"value":"### JavaScript implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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"},{"id":442,"value":"tcl = require(\"tricolore@0.8.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":751,"value":"mutable color0 = '#FFFF00'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":757,"value":"mutable color1 = '#B3DCC3'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":758,"value":" mutable color2 = '#01A0C6'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":761,"value":" mutable color3 = '#B8B3D8'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":763,"value":" mutable color4 = '#F11D8C'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":764,"value":" mutable color5 = '#FFB3B3'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":289,"value":"d3tip = require(\"d3-tip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"nuts2 = FileAttachment(\"euro_basemap.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":307,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"