3e:null 3f:["$","title",null,{"children":"Interactive Choropleth Map | Rene Wilhelm | Observable"}] 45:T78f,chart = { // domain and range arrays let incomeColors = ['rgb(208,28,139)','rgb(241,182,218)','rgb(184,225,134)', 'rgb(77,172,38)','darkgrey']; let incomeLegend = ['No data', '4. High income', '3. Upper middle income', '2. Lower middle income', '1. Low income'].reverse(); let propsColors = ['rgb(166,97,26)','rgb(223,194,125)','rgb(128,205,193)', 'rgb(1,133,113)','darkgrey']; let propsLegend = ['No data', '<5%', '5- 10%', '10- 20%', '>20%'].reverse(); let svg = d3.select('svg.worldmap'); // choropleth map let map = svg.selectAll('g.map').data([null]); map = map.enter() .append('g') .attr('class', 'map') .merge(map); // update legend on each property switch let legend = svg.selectAll('g.legend').data([null]); legend = legend.enter() .append('g') .attr('class', 'legend') .merge(legend) .attr('transform', `translate(40, 310)`); const colorScale = d3.scaleOrdinal(); let colorValue; let selectedColorValue; let features = countries.features; function handleMouseOver(d, i) { selectedColorValue = d; render(); }; function handleMouseOut(d, i) { selectedColorValue = null; render(); } function render() { switch (selectedRisk) { case 0: colorValue = d => d.properties.numVoteRegistrations; colorScale .domain(propsLegend) .range(propsColors); break; default: colorValue = d => d.properties.numVoteRegistrations; colorScale .domain(incomeLegend) .range(incomeColors); break; } map.call(choroplethMap, { features, colorScale, colorValue, selectedColorValue, }); legend.call(colorLegend, { colorScale, circleRadius: 8, spacing: 20, textOffset: 12, backgroundRectWidth: 235, selectedColorValue, handleMouseOver, handleMouseOut }); } return Object.assign(svg.node(), {render}); }46:T600,//import { choroplethMap } from "db260fb930c4c3a6" choroplethMap = (selection, props) => { const projection = d3.geoNaturalEarth1(); const pathGenerator = d3.geoPath().projection(projection); const { features, colorScale, colorValue, selectedColorValue } = props; const gUpdate = selection.selectAll('g') .data([null]); const gEnter = gUpdate.enter() .append('g'); const g = gUpdate.merge(gEnter); gEnter .append('path') .attr('class', 'sphere') .attr('d', pathGenerator({type: 'Sphere'})) .merge(gUpdate.select('.sphere')) .attr('opacity', selectedColorValue ? 0.05 : 1); selection.call(d3.zoom().on('zoom', () => { g.attr('transform', d3.event.transform); })); const countryPaths = g.selectAll('.country') .data(features); const countryPathsEnter = countryPaths .enter().append('path') .attr('class', 'country'); countryPaths .merge(countryPathsEnter) .attr('d', pathGenerator) .attr('fill', d => colorScale(colorValue(d))) .attr('opacity', d => (!selectedColorValue || selectedColorValue === colorValue(d)) ? 1 : 0.1 ) .classed('highlighted', d => selectedColorValue && selectedColorValue === colorValue(d) ); countryPathsEnter.append('title') // give user info from worldmap-fixed.csv: name,economy,income_grp,iso_n3,prop .text(d => d.properties.name + ': ' + '\n' + 'Votes: ' + d.properties.numVoteRegistrations + '\n') };47:[] 43:{"id":"ac0bc5907b1a7930","slug":null,"title":"Interactive Choropleth Map","thumbnail":"2afbbfa2d48952b89ca154294787d219b373600d42badab9442fd2ac4d7e6f4c","access_level":"public","create_time":"$D2023-03-11T01:24:48.741Z","update_time":"$D2023-03-25T20:34:25.318Z","view_time":null,"first_public_time":"$D2023-03-11T01:24:48.741Z","has_unpublished_edits":null,"fork":{"id":"d6afe89d45200a9c","slug":"interactive-choropleth-map","title":"Interactive Choropleth Map","owner":{"id":"1d1a2582caf5fc60","login":"markolalovic","name":"Marko Lalovic"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d96ce4ac22d75980","login":"rwl","name":"Rene Wilhelm","avatar_url":"https://avatars-next.observableusercontent.com/ac1a6dbda0e37b0da6da5595fa36e8ddeb78b482f3db1484cef2066bd8d6c7ca","tier":"starter_2024","bio":"","following":false},"version":420,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8ef7ada3ad602f57","login":"renewilhelm","name":"rene","avatar_url":"https://avatars-next.observableusercontent.com/f7cdc9bb4ec18ca6a568c8643145d365b9719a37d7fc9c082a93654c480ffa14","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"8ef7ada3ad602f57","login":"renewilhelm","name":"rene","avatar_url":"https://avatars-next.observableusercontent.com/f7cdc9bb4ec18ca6a568c8643145d365b9719a37d7fc9c082a93654c480ffa14","tier":null,"role":"editor"},{"type":"team","id":"d96ce4ac22d75980","login":"rwl","name":"Rene Wilhelm","avatar_url":"https://avatars-next.observableusercontent.com/ac1a6dbda0e37b0da6da5595fa36e8ddeb78b482f3db1484cef2066bd8d6c7ca","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactive Choropleth Map","cells":[{"id":0,"value":"md`# Interactive Choropleth Map\n## Work in progress\n\nExperimenting with this forked copy to understand how it all works`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"viewof selectedRisk = selectRisk()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"{\n if (selectedRisk === 0) {\n return html`\n `\n } else {\n return html`\n `\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"html`

\n\t\n\n\t\t\n\t\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"html`You can hover over the legend items to select, or hover over the map to get information about the country it represents.\nSource: \nWorld Atlas TopoJSON \nand references listed below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"md`# References\n\n#### Data Visualization Course 2018 by Curran Kelleher\n\nOnline course on data visualization analysis, design & construction with D3.js.\nhttps://curran.github.io/dataviz-course-2018/\n\n#### Choropleth Map with Interactive Filtering\n\nTemplates on VizHub.\nhttps://vizhub.com/curran/5c907e49d0294538aad03ad1f41e1e28?edit=files&file=choroplethMap.js\n\n# Data Sources\n\n#### World Atlas TopoJSON\nNatural Earth’s vector data and income by country data.\nhttps://github.com/topojson/world-atlas\n\n#### Demographics to calculate the proportion of people over 60\nPopulation Pyramids of the World from 1950 to 2100, 2020 (accessed May 27, 2020). https://www.populationpyramid.net/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`# Load Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"topoJSONData = d3.json('https://gist.githubusercontent.com/markolalovic/79320d72f56c760660b6f14b0cdb4807/raw/ce5fcaeba59644b4726ebb7981ec040140553225/worldmap-covid-risks.json');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"iso3166=await d3.csv(\"https://gist.githubusercontent.com/jashkenas/59c7c820265537b941251dabe33a8413/raw/7ccd0d24ef50b3152ce848e7c3f9ce21a0d75af6/country-codes.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"csvData = d3.csv('https://gist.githubusercontent.com/markolalovic/a8de50a0e5627613e05980064968b52d/raw/881c856572763a34f66069cdba1540a2710971ab/worldmap-covid-risks.csv');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"Registrations = { const meeting='May 2023'\n const reg = await d3.json(\"https://www-static.ripe.net/dynamic/vote-registrations/\" +\n 'gm-' + meeting.toLocaleLowerCase().replace(/ /,'-') + '.json');\n // correct for UK, if exists. Not a valid ISO code\n const index = reg.findIndex ( d => d.country == 'UK');\n if (index != -1) {reg[index].country = 'GB'}\n\n // add fields\n reg.map(d=> {d.meeting = meeting});\n\n reg.map(d=> {\n const found = iso3166.find(\n codes => codes['alpha-2'] == d.country\n )\n d.iso_n3 = found['country-code']\n d.name = found.name})\n \n return reg}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"countries = {\n const countries = topojson.feature(topoJSONData, topoJSONData.objects.countries);\n const rowById = Registrations.reduce((accumulator, d) => {\n accumulator[d.iso_n3] = d;\n return accumulator;\n }, {});\n countries.features.forEach(d => {\n Object.assign(d.properties, rowById[d.id]);\n d.properties.name = iso3166.find(\n codes => codes['country-code'] == d.id\n )?.['name'];\n });\n return countries;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"rowById[\"724\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"rowById = Registrations.reduce((accumulator, d) => {\n accumulator[d.iso_n3] = d;\n return accumulator;\n }, {})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`# Imports and Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"import { colorLegend } from \"68dea28bb2061884\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"chart.render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"selectRisk = () => {\n const buttons = html`\n \n `\n buttons.value = 0\n\n buttons.demography.onclick = event => {\n buttons.value = 0;\n event.preventDefault();\n buttons.dispatchEvent(new CustomEvent(\"input\")); \n }\n buttons.income.onclick = event => {\n buttons.value = 1;\n event.preventDefault();\n buttons.dispatchEvent(new CustomEvent(\"input\")); \n }\n return buttons\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"