2f:["$","title",null,{"children":"Dot Density Map (based on national data) | Nicolas Lambert | Observable"}] 34:T860,map = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, 500]) .style("width", "100%") .style("height", "auto"); svg .append("g") .append("path") .datum(sphere) .attr("class", "graticuleOutline") .attr("d", path) .style('fill', "#9ACBE3"); svg .append("g") .append("path") .datum(d3.geoGraticule10()) .attr("class", "graticule") .attr("d", path) .attr("clip-path", "url(#clip)") .style('fill', "none") .style('stroke', "white") .style('stroke-width', .8) .style('stroke-opacity', .5) .style('stroke-dasharray', 2); svg .append("g") .append("path") .datum(equator) .attr("d", path) .style('fill', "none") .attr("stroke", "white") .style('stroke-width', 1.4) .style('stroke-opacity', .5) .style('stroke-dasharray', 2); svg .append("path") .datum(topojson.feature(world, world.objects.world_countries_data)) .attr("fill", "#e0daa2") .attr("stroke", "white") .attr("stroke-width", 0.3) .attr("d", path); svg .append("g") .attr("fill", "#ba2d55") .attr("stroke", "#731531") .attr("stroke-width", 0.2) .selectAll("circle") .data(dotdensitylayer) .join("circle") .attr("cx", d => projection(d.geometry.coordinates)[0]) .attr("cy", d => projection(d.geometry.coordinates)[1]) .attr("r", radius); // Layout const txtlegend = ( "One point represents\n" + peoplePerPoint + " million people" ).split("\n"); const txtx2 = 790; svg .append('line') .style("stroke", "#1f235c") .style("stroke-width", 1) .attr("x1", txtx2 + 5) .attr("y1", 385) .attr("x2", txtx2 + 5) .attr("y2", 415); var legend = svg .append("text") .attr("y", 380) .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("fill", "#1f235c") .style("font-size", "15px") .attr("fill-opacity", 0.7); txtlegend.forEach(d => { legend .append("tspan") .attr("x", txtx2) .attr("dy", 16) .text(d); }); return svg.node(); }35:[] 32:{"id":"832ad5d28684d5d6","slug":"dot-density-map-from-countries","title":"Dot Density Map (based on national data)","thumbnail":"8c835797ef856a435a6cfaed4b113a6e7d7a6eda0b1805a9d45b3bfdec480fe4","access_level":"public","create_time":"$D2021-03-03T09:37:49.818Z","update_time":"$D2022-06-14T08:41:18.448Z","view_time":null,"first_public_time":"$D2021-03-05T16:27:10.689Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024"},"version":1485,"publish_version":1485,"role":null,"authored":false,"authors":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}],"members":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"88d706e4a6d0417c","slug":"how-to","title":"How To?","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"type":"notebook","body":{"title":"Dot Density Map (based on national data)","cells":[{"id":0,"value":"md`# Dot Density Map (based on national data)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"md`This notebook is a variation of [that one](https://observablehq.com/@neocartocnrs/dotdensity-map) published yesterday. The difference is that is this case, I use national data instead of gridded data. Consequently, I had to go through a step of polygons splitting in order to correctly manage multi-part units and assign the values in proportion to the surface area of the different polygons (for lack of better). For that, I built the functions **split()** & **splitAll()** (see below). Obviously, with this kind of method, the more geographically precise the initial data, the more accurate the map will be. The map based on gridded data is therefore better. Anyway, having data by country is the most common case. So let's move on...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"viewof peoplePerPoint = Range([0.5, 20], {\n step: 0.5,\n value: 3,\n label: \"Dot value (million inh.)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"viewof radius = Range([0.4, 3], {\n value: 1,\n label: \"size \"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"md`**1.** To start, we import a base map containing the geometries of the countries of the world and their population & we define the map projection & other stuffs for cartography (path, height, ...).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1297,"value":"world = d3.json(\n \"https://raw.githubusercontent.com/neocarto/resources/master/geometries/World/world_countries.topojson\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"countries = topojson.feature(world, world.objects.world_countries_data).features","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1171,"value":"projection = d3.geoNaturalEarth2()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1175,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1178,"value":"sphere = ({ type: \"Sphere\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1184,"value":"equator = ({\n type: \"LineString\",\n coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"md`**2.** The second step here consists in splitting all multi-part polygons. To do that, we build the functions **split()** & **splitAll()**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"split = function(feature) {\n var result = [];\n if (feature.geometry.type == \"MultiPolygon\") {\n //if (feature.geometry.coordinates.length != 1) {\n feature.geometry.coordinates.forEach(function(coords) {\n var poly = {\n type: \"Feature\",\n properties: feature.properties,\n geometry: { type: 'Polygon', coordinates: coords }\n };\n result.push(poly);\n });\n } else result.push(feature);\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"split_all = features => {\n let result = [];\n for (let i = 0; i < features.length; i++) {\n const tmp = split(features[i]);\n result = result.concat(tmp);\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"splittedCountries = split_all(countries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"md`**3.** We calculate the value of population in each polygon **in proportion to the surface area**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1241,"value":"planarArea = (geom, id) => {\n return new Map(geom.map(d => [d.properties[id], path.area(d)]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"areas = planarArea(countries, \"ISO3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"final = splittedCountries.map(d => ({\n type: d.type,\n id: d.properties.ISO3,\n name: d.properties.NAMEen,\n areaAll: areas.get(d.properties.ISO3),\n areaPart: path.area(d),\n share: (path.area(d) / areas.get(d.properties.ISO3)) * 100,\n popbypoly:\n (d.properties.PopTotal * path.area(d)) / areas.get(d.properties.ISO3),\n geometry: d.geometry\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"md`**4.** After that, we calculate random dots within polygons after defining the value of each point. For that, we build the functions **dotsInPoly()** & **dotsInPolys()**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"dotsInPoly = (feature, value, valuePerPoint) => {\n let points = [];\n let hits = 0;\n let count = 0;\n const nbdots = Math.round(value / valuePerPoint);\n const bounds = turf.bbox(feature);\n while (hits < nbdots && count < nbdots * 10) {\n const coords = turf.randomPosition(bounds);\n const randomPoint = turf.point(coords);\n if (turf.booleanPointInPolygon(randomPoint, feature)) {\n points.push(randomPoint);\n hits++;\n }\n count++;\n }\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"dotsInPolys = (features, data, valuePerPoint) => {\n let result = [];\n for (let i = 0; i < features.length; i++) {\n const dots = dotsInPoly(features[i], data[i], valuePerPoint);\n result = result.concat(dots);\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"dotdensitylayer = dotsInPolys(\n final,\n final.map(d => d.popbypoly),\n peoplePerPoint * 1000000\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"md`**5.** It's done. You can see the result of all of that at the beginning of this notebook. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"md`**6.** You can also have a look at that [other notebook](https://observablehq.com/@neocartocnrs/dot-density-map) where I make a dot map from the CIESEN data. The data is more accurate so the graphic rendering is more faithful to reality.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"import { Range } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"turf = require(\"@turf/turf@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@6\", \"d3-geo-projection@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body" 2e:E{"digest":"NEXT_REDIRECT;replace;/@neocarto/dot-density-map-from-countries;307;"}