2d:null 2e:["$","title",null,{"children":"Interactive Choropleth Map | Marko Lalovic | Observable"}] 33:T775,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.prop; colorScale .domain(propsLegend) .range(propsColors); break; default: colorValue = d => d.properties.income_grp; 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}); }34:[] 31:{"id":"d6afe89d45200a9c","slug":"interactive-choropleth-map","title":"Interactive Choropleth Map","thumbnail":"eb43e58cae5fa4b6ceba2981b60544e2e0b014b86e3925e0543b1cca09b188b8","access_level":"public","create_time":"$D2020-06-10T07:56:27.154Z","update_time":"$D2021-10-07T09:30:48.089Z","view_time":null,"first_public_time":"$D2020-06-10T12:25:04.495Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"1d1a2582caf5fc60","login":"markolalovic","name":"Marko Lalovic","avatar_url":"https://avatars-next.observableusercontent.com/16070004cabbc8527717f526f34d2f607b4d0d67a7bdabfe1fcce1b23904a308","tier":"starter_2024"},"version":358,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"070c06762986c2d4","login":"markolalovic","name":"Marko Lalovic","avatar_url":"https://avatars-next.observableusercontent.com/16070004cabbc8527717f526f34d2f607b4d0d67a7bdabfe1fcce1b23904a308","tier":null}],"members":[{"type":"individual","id":"070c06762986c2d4","login":"markolalovic","name":"Marko Lalovic","avatar_url":"https://avatars-next.observableusercontent.com/16070004cabbc8527717f526f34d2f607b4d0d67a7bdabfe1fcce1b23904a308","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":14,"collection":null,"type":"notebook","body":{"title":"Interactive Choropleth Map","cells":[{"id":0,"value":"md`# Interactive Choropleth Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"viewof selectedRisk = selectRisk()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":73,"value":"html`

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

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`# Load Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":172,"value":"countries = {\n const countries = topojson.feature(topoJSONData, topoJSONData.objects.countries);\n const rowById = csvData.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 });\n return countries;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`# Imports and Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"import { choroplethMap } from \"db260fb930c4c3a6\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"import { colorLegend } from \"68dea28bb2061884\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"chart.render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"