3e:null 3f:["$","title",null,{"children":"Interactive Choropleth Map | SayehGorjifard | Observable"}] 45:T795,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.scaleThreshold(); 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.Average_WDVE; colorScale .domain([0,30]) .range(d3.schemeBlues[7]); break; default: colorValue = d => d.properties.Average_income; colorScale .domain([0,100000]) .range(d3.schemeBlues[7]); 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:[{"id":"2a7fb79a9634b703be338556532b8ffaf9b3cc0d9d2bd955a6560343bc7c9b3248983be11f31bcd4e5d787ffe27261f0d7967a4b449c3043d855cad607d287f3","href":"https://static.observableusercontent.com/files/2a7fb79a9634b703be338556532b8ffaf9b3cc0d9d2bd955a6560343bc7c9b3248983be11f31bcd4e5d787ffe27261f0d7967a4b449c3043d855cad607d287f3","name":"temp@1.csv","type":"text/csv","lastModified":1685071591326.462,"size":1664}] 43:{"id":"0a0b0ea0264cc8e1","slug":null,"title":"Interactive Choropleth Map","thumbnail":"885d6487190269d3bcd67686d1add646eeb1307ff70449d8ae0950155643d14b","access_level":"public","create_time":"$D2023-05-25T19:09:18.801Z","update_time":"$D2023-05-26T03:44:23.072Z","view_time":null,"first_public_time":"$D2023-05-25T19:09:18.801Z","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":"82e226ff2d97eb51","login":"sayehgorjifard","name":"SayehGorjifard","avatar_url":"https://avatars-next.observableusercontent.com/ba6e7b24cd306775ac8aac045b532736a5294787a0fd89b338be88fcd65d5480","tier":"starter_2024","bio":"","following":false},"version":390,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2a7b189ac7adae6f","login":"lampoona","name":"Sayeh Gorjifard","avatar_url":"https://avatars-next.observableusercontent.com/4c4c7bebf452b0686fd6cc121048974da6589f69a16c4f0762e61529af481678","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"2a7b189ac7adae6f","login":"lampoona","name":"Sayeh Gorjifard","avatar_url":"https://avatars-next.observableusercontent.com/4c4c7bebf452b0686fd6cc121048974da6589f69a16c4f0762e61529af481678","tier":null,"role":"editor"},{"type":"team","id":"82e226ff2d97eb51","login":"sayehgorjifard","name":"SayehGorjifard","avatar_url":"https://avatars-next.observableusercontent.com/ba6e7b24cd306775ac8aac045b532736a5294787a0fd89b338be88fcd65d5480","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`","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":false,"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":false,"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":43,"value":"csvData3 = 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":350,"value":"csvData = FileAttachment(\"temp@1.csv\").csv()","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 = 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","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":"import { choroplethMap } from \"db260fb930c4c3a6\"","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":"$W46","stdlib":"1"}} 44:"$43:body"