\\` element based tooltips are perfectly fine, able to cross given notebook \\`<iframe>\\` / cell bounds on Observable (see the tooltips for Chile / Russia’s easternmost point in the [original notebook](https://observablehq.com/@nikita-sharov/the-state-of-css)), but not that funky:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1957,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"import {checkbox, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"choropleth = () => {\n const svg = createCanvas()\n const tooltip = createTooltip(); \n addCountries(svg, tooltip);\n addLegend(svg);\n svg.append(() => tooltip.node()); // rendering order is based on the document order\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"createCanvas = () => \n d3.create(\"svg\")\n .attr(\"class\", \"choropleth\")\n .attr(\"width\", canvasWidth)\n .attr(\"height\", canvasHeight)\n .call(addBackground)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"canvasWidth = Math.max(800, width) // see: https://github.com/observablehq/stdlib#width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"canvasHeight = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"addBackground = (parent) =>\n parent.append(\"rect\")\n .attr(\"id\", \"background\")\n .attr(\"width\", canvasWidth)\n .attr(\"height\", canvasHeight)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"addCountries = (parent, tooltip) => {\n const container = parent.append(\"g\").attr(\"id\", \"countries\");\n countries.features.forEach(country => addCountry(container, country, tooltip)); \n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"addCountry = (parent, country, tooltip) => {\n const container = parent.append(\"g\")\n .attr(\"class\", \"country\")\n .attr(\"id\", country.id);\n \n const participation = getParticipation(country.id);\n const color = getCountryColor(participation);\n const surface = addSurface(container, country, color);\n if (participation !== undefined) { \n surface.on(\"mouseover\", e => tooltip.show(country, participation, color));\n surface.on(\"mousemove\", e => tooltip.move(e.offsetX, e.offsetY));\n surface.on(\"mouseout\", e => tooltip.hide());\n }\n \n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1053,"value":"addSurface = (parent, country, color) =>\n parent.append(\"path\")\n .attr(\"fill\", color)\n .attr(\"d\", path(country))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"// for projection parameters, see: https://github.com/StateOfJS/StateOfCSS-2020/blob/master/src/core/charts/demographics/ParticipationByCountryChart.js\nprojection = d3.geoMercator()\n .rotate([-11, 0]) \n .scale(118)\n .translate([0.5 * canvasWidth, 0.7 * canvasHeight])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"getCountryColor = (participation) => {\n if (participation !== undefined) {\n return scale(participation.percentage);\n }\n \n return colorScheme.defaultCountryColor;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1036,"value":"scale = d3.scaleThreshold()\n .domain(participationPercentageSlices)\n .range(colorScheme.participatingCountryColors)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"participationPercentageSlices = [1.1, 2.3, 3.4, 4.6, 5.7, 6.9, 8]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"legendMargin = ({top: 0, right: 0, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"legendMarkSideLength = 18","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"format = (percentage) => `${d3.format(\".1f\")(percentage)}%` // 0 as '0.0%'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1553,"value":"html`<style>\n#background {\n fill: ${colorScheme.backgroundColor};\n}\n\n.country {\n stroke: ${colorScheme.backgroundColor};\n stroke-width: 0.5;\n}\n\n#tooltip,\n#legend {\n dominant-baseline: central;\n font-family: \"IBM Plex Mono\", monospace; \n font-weight: 300;\n}\n\n#tooltip text {\n fill: #273aa2;\n font-size: 14px;\n}\n\n#tooltip text #participation {\n font-weight: 600;\n}\n\n#tooltip-background {\n fill: #e0e4e4;\n}\n\n#tooltip-shadow {\n fill-opacity: .15;\n}\n\n#legend { \n fill: ${colorScheme.legendTextColor};\n font-size: 11px;\n}\n</style>`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"html`<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\">\n<link href=\"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;600&display=swap\" rel=\"stylesheet\">`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body" </article></body></html>

2d:null 2e:["$","title",null,{"children":"All Roads Lead to Rome | Nikita Sharov | Observable"}] 33:T790,createTooltip = () => { const tooltip = d3.create("svg:g") .attr("id", "tooltip") .attr("visibility", "hidden"); let tooltipWidth = 200; const tooltipHeight = 32; const shadowOffset = 9; const shadow = tooltip.append("rect") .attr("id", "tooltip-shadow") .attr("x", shadowOffset) .attr("y", shadowOffset) .attr("height", tooltipHeight) const background = tooltip.append("rect") .attr("id", "tooltip-background") .attr("height", tooltipHeight) .attr("fill", "gray") const markSideLength = 12; const markMargin = { top: (tooltipHeight - markSideLength) / 2, right: 7, left: shadowOffset }; const mark = tooltip.append("rect") .attr("id", "tooltip-mark") .attr("x", markMargin.left) .attr("y", markMargin.top) .attr("width", markSideLength) .attr("height", markSideLength) const textOffset = { x: markMargin.left + markSideLength + markMargin.right, y: tooltipHeight / 2 }; const text = tooltip.append("text") .attr("dx", textOffset.x) .attr("dy", textOffset.y); tooltip.show = (country, participation, color) => { mark.attr("fill", color); text.text(`${country.properties.name}: `); text.append("tspan") .attr("id", "participation") .text(`${format(participation.percentage)} (${participation.count})`); const textWidth = Math.ceil(text.node().getBBox().width); tooltipWidth = textOffset.x + textWidth + markMargin.right; background.attr("width", tooltipWidth); shadow.attr("width", tooltipWidth); tooltip.attr("visibility", "visible"); }; tooltip.move = (x, y) => { const dx = x - (tooltipWidth / 2); const dy = y - tooltipHeight - (shadowOffset * 2); tooltip.attr("transform", `translate(${dx},${dy})`); }; tooltip.hide = () => { tooltip.attr("visibility", "hidden"); }; return tooltip; }34:T42c,addLegend = (container) => { const dx = legendMargin.left; const dy = canvasHeight - ((participationPercentageSlices.length * legendMarkSideLength) + legendMargin.bottom); const legend = container.append("g") .attr("id", "legend") .attr("transform", `translate(${dx},${dy})`); let percentageSliceLowerBound = 0; for (let i = 0; i < participationPercentageSlices.length; i++) { const percentageSliceUpperBound = participationPercentageSlices[i]; const mark = legend.append("g") .attr("class", "mark"); mark.append("rect") .attr("y", legendMarkSideLength * i) .attr("width", legendMarkSideLength) .attr("height", legendMarkSideLength) .attr("fill", colorScheme.participatingCountryColors[i]); mark.append("text") .attr("dx", legendMarkSideLength + 10) .attr("dy", (legendMarkSideLength * i) + (legendMarkSideLength / 2)) .text(`${format(percentageSliceLowerBound)} - ${format(percentageSliceUpperBound)}`) percentageSliceLowerBound = percentageSliceUpperBound; } }35:[{"id":"f3d8968631658d319927601d5a1783ef1d3a54eb0c1da4cc9da30b99e5a1e8f63e04d7c7d155a0f73691c89c35efd872c5e5a38f50a8c62d3b39d0dde0b3ae4c","href":"https://static.observableusercontent.com/files/f3d8968631658d319927601d5a1783ef1d3a54eb0c1da4cc9da30b99e5a1e8f63e04d7c7d155a0f73691c89c35efd872c5e5a38f50a8c62d3b39d0dde0b3ae4c","name":"results-backup.json","type":"application/json","lastModified":1609777588243.718,"size":19518}] 31:{"id":"fe0c3c65f0e0e4b6","slug":"all-roads-lead-to-rome","title":"All Roads Lead to Rome","thumbnail":"bc83f7221caeaf1bbe1c54c6fa614d369ff381835ee93953cfe9ef76dbb6657a","access_level":"public","create_time":"$D2021-01-04T08:18:59.108Z","update_time":"$D2021-05-08T15:39:49.593Z","view_time":null,"first_public_time":"$D2021-01-05T13:16:57.496Z","has_unpublished_edits":null,"fork":{"id":"8152cc445e165e2e","slug":"the-state-of-css","title":"The State of CSS","owner":{"id":"6c49d8d38db08400","login":"nikita-sharov","name":"Nikita Sharov"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6c49d8d38db08400","login":"nikita-sharov","name":"Nikita Sharov","avatar_url":"https://avatars-next.observableusercontent.com/544afb614871e9f3bee546cbff7e689f2a454464b16ac434007893bde877f2df","tier":"starter_2024"},"version":2073,"publish_version":2073,"role":null,"authored":false,"authors":[{"type":"individual","id":"ee7c67b988c5530c","login":"nikita-sharov","name":"Nikita Sharov","avatar_url":"https://avatars-next.observableusercontent.com/544afb614871e9f3bee546cbff7e689f2a454464b16ac434007893bde877f2df","tier":null}],"members":[{"type":"individual","id":"ee7c67b988c5530c","login":"nikita-sharov","name":"Nikita Sharov","avatar_url":"https://avatars-next.observableusercontent.com/544afb614871e9f3bee546cbff7e689f2a454464b16ac434007893bde877f2df","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"0d8b57ba92da7b34","slug":"apis","title":"APIs","owner":{"id":"6c49d8d38db08400","login":"nikita-sharov","name":"Nikita Sharov"}},"type":"notebook","body":{"title":"All Roads Lead to Rome","cells":[{"id":0,"value":"md`# All Roads Lead to Rome\n\nImplementation alternatives considered for the forked notebook\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"choropleth()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1165,"value":"viewof survey = radio({\n title: \"Survey\",\n options: [\n {label: \"State of CSS\", value: \"state_of_css\"},\n {label: \"State of JS\", value: \"state_of_js\"}\n ],\n value: \"state_of_css\",\n description: \"stateofcss.com launched in 2019 as a spin-off from stateofjs.com, launched in 2016.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"viewof year = radio({\n title: \"Year\",\n options: [\"2019\", \"2020\"],\n value: \"2020\",\n description: \"Participation-by-country data is availible from 2019 on, for both surveys.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1889,"value":"viewof source = radio({\n title: \"Source\",\n options: [\n {label: \"File attachment\", value: \"file-attachment\"},\n {label: \"GraphQL API\", value: \"graphql-api\"}\n ],\n value: \"file-attachment\",\n description: \"Closed survey results do / should not change over time.\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1156,"value":"md`---\n## Data\n\nRetrieval via GraphQL API, having [Graph*i*QL](https://github.com/graphql/graphiql) set up for its [live exloration](https://graphiql.stateofjs.com/):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1159,"value":"proxiedApiUrl = {\n const demoProxyUrl = \"https://cors-anywhere.herokuapp.com\"; // enables cross-origin requests to anywhere\n const apiUrl = \"https://api.stateofjs.com/graphql\";\n return `${demoProxyUrl}/${apiUrl}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"createQuery = (survey, year) => `{\n survey(survey: ${survey}) {\n surveyName\n demographics {\n country {\n year(year: ${year}) {\n year\n buckets {\n id\n count\n percentage\n }\n }\n }\n }\n }\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"createOptions = (query) => {\n return {\n method: \"POST\",\n headers: { \n \"Content-Type\": \"application/json\",\n \"Accept\": \"application/json\"\n },\n body: JSON.stringify({query})\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1175,"value":"fetchParticipationByCountry = async (survey, year) => {\n const query = createQuery(survey, year);\n const options = createOptions(query);\n const response = await d3.json(proxiedApiUrl, options); \n return response.data.survey.demographics.country.year;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1178,"value":"participationByCountry = {\n if (source === \"graphql-api\") {\n return fetchParticipationByCountry(survey, year); \n } \n\n return restoreParticipationByCountry(survey, +year); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1779,"value":"restoreParticipationByCountry = (survey, year) => {\n const resultsByYear = resultsBackup.filter(d => d.surveyName === survey);\n const annualResults = resultsByYear.find(d => d.demographics.country.year.year === year);\n return annualResults.demographics.country.year;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1780,"value":"resultsBackup = FileAttachment(\"results-backup.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1193,"value":"md`### TopoJSON\n\n[Pre-built](https://github.com/topojson/world-atlas) from [Natural Earth](https://www.naturalearthdata.com/downloads/), used by several [D3 examples](https://observablehq.com/@d3):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"// see: https://github.com/topojson/world-atlas#countries-110m.json\ntopology = d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1201,"value":"topojson = require(\"topojson-client@3\") // converts TopoJSON to GeoJSON (required by D3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"countries = {\n const countries = topojson.feature(topology, topology.objects.countries);\n const usa = countries.features.find(d => d.properties.name === \"United States of America\"); \n usa.properties.name = \"United States\"; // shortening for the tooltip\n return countries;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1235,"value":"md`Mapping the three-digit [ISO 3166-1 numeric](https://en.wikipedia.org/wiki/ISO_3166-1_numeric) country codes, such as`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"countries.features[0].id","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"md`to the three-letter [ISO 3166-1 alpha-3](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3) codes, such as`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1230,"value":"participationByCountry.buckets[0].id","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1803,"value":"getParticipation = (numericCountryCode) => {\n const country = countryCodes.find(d => d[\"country-code\"] === numericCountryCode);\n if (country === undefined) {\n return undefined;\n }\n \n const threeLetterCode = country[\"alpha-3\"]; \n return participationByCountry.buckets.find(d => d.id === threeLetterCode);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"// see: https://github.com/lukes/ISO-3166-Countries-with-Regional-Codes#slim-3json\ncountryCodes = d3.json(\"https://raw.githubusercontent.com/lukes/ISO-3166-Countries-with-Regional-Codes/master/slim-3/slim-3.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`--- \n## Representation\n\nProviding dual modular redundancy 😉\n\n### Original color schemes\n\n[Picking colors](https://stackoverflow.com/a/46857594/14273692) from the [2019.stateofjs.com](https://2019.stateofjs.com/demographics/) (2020 results page is not released yet, at the moment of writing) and [2019.stateofcss.com](https://2019.stateofcss.com/demographics/) demographic choropleths, the former rendered on canvas, the latter as SVG:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1747,"value":"colorSchemes = [\n {\n survey: \"state_of_js\",\n backgroundColor: \"#2a2d33\", // closely matches page background color, mismatching Observable's background color\n defaultCountryColor: \"#222429\",\n participatingCountryColors: [\n \"#41c7c7\", \"#65e0e0\", \"#94eeee\", \"#f8a8a8\", \"#fe6a6a\", \"#ec5555\", \"#be3737\"\n ],\n legendTextColor: \"#41c7c7\" // matches original navigation bar text color\n },\n {\n survey: \"state_of_css\",\n backgroundColor: \"#1a1f35\",\n defaultCountryColor: \"#303652\",\n participatingCountryColors: [\n \"#3c52d1\", \"#808ee1\", \"#b2bbee\", \"#d3bbf2\", \"#d68df0\", \"#ec75cb\", \"#f649a7\"\n ],\n legendTextColor: \"#a3cacd\" // matches page text color\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1761,"value":"colorScheme = colorSchemes.find(d => d.survey === survey)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1883,"value":"md`### Tooltips\n\nThe SVG \\`\\` element based tooltips are perfectly fine, able to cross given notebook \\`<iframe>\\` / cell bounds on Observable (see the tooltips for Chile / Russia’s easternmost point in the [original notebook](https://observablehq.com/@nikita-sharov/the-state-of-css)), but not that funky:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1957,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"import {checkbox, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"choropleth = () => {\n const svg = createCanvas()\n const tooltip = createTooltip(); \n addCountries(svg, tooltip);\n addLegend(svg);\n svg.append(() => tooltip.node()); // rendering order is based on the document order\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"createCanvas = () => \n d3.create(\"svg\")\n .attr(\"class\", \"choropleth\")\n .attr(\"width\", canvasWidth)\n .attr(\"height\", canvasHeight)\n .call(addBackground)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"canvasWidth = Math.max(800, width) // see: https://github.com/observablehq/stdlib#width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"canvasHeight = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"addBackground = (parent) =>\n parent.append(\"rect\")\n .attr(\"id\", \"background\")\n .attr(\"width\", canvasWidth)\n .attr(\"height\", canvasHeight)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"addCountries = (parent, tooltip) => {\n const container = parent.append(\"g\").attr(\"id\", \"countries\");\n countries.features.forEach(country => addCountry(container, country, tooltip)); \n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"addCountry = (parent, country, tooltip) => {\n const container = parent.append(\"g\")\n .attr(\"class\", \"country\")\n .attr(\"id\", country.id);\n \n const participation = getParticipation(country.id);\n const color = getCountryColor(participation);\n const surface = addSurface(container, country, color);\n if (participation !== undefined) { \n surface.on(\"mouseover\", e => tooltip.show(country, participation, color));\n surface.on(\"mousemove\", e => tooltip.move(e.offsetX, e.offsetY));\n surface.on(\"mouseout\", e => tooltip.hide());\n }\n \n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1053,"value":"addSurface = (parent, country, color) =>\n parent.append(\"path\")\n .attr(\"fill\", color)\n .attr(\"d\", path(country))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"// for projection parameters, see: https://github.com/StateOfJS/StateOfCSS-2020/blob/master/src/core/charts/demographics/ParticipationByCountryChart.js\nprojection = d3.geoMercator()\n .rotate([-11, 0]) \n .scale(118)\n .translate([0.5 * canvasWidth, 0.7 * canvasHeight])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"getCountryColor = (participation) => {\n if (participation !== undefined) {\n return scale(participation.percentage);\n }\n \n return colorScheme.defaultCountryColor;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1036,"value":"scale = d3.scaleThreshold()\n .domain(participationPercentageSlices)\n .range(colorScheme.participatingCountryColors)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"participationPercentageSlices = [1.1, 2.3, 3.4, 4.6, 5.7, 6.9, 8]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"legendMargin = ({top: 0, right: 0, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"legendMarkSideLength = 18","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"format = (percentage) => `${d3.format(\".1f\")(percentage)}%` // 0 as '0.0%'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1553,"value":"html`<style>\n#background {\n fill: ${colorScheme.backgroundColor};\n}\n\n.country {\n stroke: ${colorScheme.backgroundColor};\n stroke-width: 0.5;\n}\n\n#tooltip,\n#legend {\n dominant-baseline: central;\n font-family: \"IBM Plex Mono\", monospace; \n font-weight: 300;\n}\n\n#tooltip text {\n fill: #273aa2;\n font-size: 14px;\n}\n\n#tooltip text #participation {\n font-weight: 600;\n}\n\n#tooltip-background {\n fill: #e0e4e4;\n}\n\n#tooltip-shadow {\n fill-opacity: .15;\n}\n\n#legend { \n fill: ${colorScheme.legendTextColor};\n font-size: 11px;\n}\n</style>`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"html`<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\">\n<link href=\"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;600&display=swap\" rel=\"stylesheet\">`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body" </article></body></html>