31:T13ad,map = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "55%") .style("height", "auto"); var defs = svg.append("defs"); const filter = defs .append('filter') .attr('id', 'border-blur') .append('feGaussianBlur') .attr('in', 'SourceGraphic') .attr('stdDeviation', 7) .attr('result', 'shadow'); const pattern = defs .append("pattern") .attr("id", "hatch") .attr("patternUnits", "userSpaceOnUse") .attr("width", 8) .attr("height", 8); pattern .append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", 8) .attr("y1", 8) .attr("stroke", "white") .attr("stroke-width", 0.3) .attr("stroke-opacity", 0.8); svg .append("g") .append("path") .datum(sphere) .attr("class", "graticuleOutline") .attr("d", path) .style('fill', "#9ACBE3"); svg .append("g") .append("path") .datum(sphere) .attr("class", "graticuleOutline") .attr("d", path) .attr('fill', "url('#hatch')"); //.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') .selectAll("path") .data(countries.features) .join('path') .attr("d", path) .attr("fill", "white") .attr("fill-opacity", 0.15); svg .append("clipPath") .attr("id", "clip") .append("rect") .attr("x", 0) .attr("y", height - 20) .attr("width", width) .attr("height", 20); svg .append("g") .append("path") .datum(sphere) .attr("d", path) .attr("clip-path", "url(#clip)") .attr("fill", '#C84742'); svg .append('text') .attr("x", width / 2) .attr("y", height - 7) .attr("fill", 'white') .attr("font-family", "sans-serif") .style("font-size", "11px") .attr("text-anchor", "middle") .attr("fill-opacity", 1) .text(source); let txt1 = svg .append('text') .attr("x", 310) .attr("y", 670) .attr("font-weight", "bold") .attr("font-family", "sans-serif") .style("font-size", "140px") .attr("fill", "#fbd14b") .attr("stroke-width", 4) .attr("stroke", "#C84742"); let txt2 = svg .append('text') .attr("x", 340) .attr("y", 695) .attr("font-weight", "bold") .attr("font-family", "sans-serif") .style("font-size", "25px") .attr("fill", "#C84742"); let txt3 = svg .append('text') .attr("x", 340) .attr("y", 740) .attr("font-weight", "bold") .attr("font-family", "sans-serif") .style("font-size", "50px") .attr("fill", "#C84742"); let txt4 = svg .append('text') .attr("x", 340) .attr("y", 760) .attr("font-weight", "bold") .attr("font-family", "sans-serif") .style("font-size", "15px") .attr("fill", "#C84742") .attr("fill-opacity", 0.7); let leg = svg .append("g") .attr("transform", `translate(360, 555)`) .call(legcircles); const ctr = svg.append('g'); const t = svg.transition().duration(750); return Object.assign(svg.node(), { update(who) { let data; let col; let col2; if (who.name == "- - - - -") { data = countries.features; col = "#94a1a8"; col2 = "#C84742"; txt1.text(""); txt2.text(""); txt3.text(language ? "Kinh tế của các nước" : "The Wealth of Nations"); txt4.text( language ? "Tổng thu nhập quốc dân năm 2019 (tỷ US$)" : "Gross domestic product in 2019 (US$ billion)" ); leg.attr("opacity", 1); } else { data = countries.features.filter( d => +gdpbyid.get(d.properties.ISO3) <= +who["value"] * 1000000000 || gdpbyid.get(d.properties.ISO3) == "NA" ); col = "#C84742"; col2 = "#fbd14b"; txt1.text(data.length); txt2.text( language ? "quốc gia có GDP năm 2019 thấp hơn" : "countries with 2019 GDP lower than" ); txt3.text(who.name); txt4.text( language ? "Tài sản ước tính theo thời gian thực là " + who.fortune + " tỷ." : "Estimated wealth in real time of " + who.fortune + " billions." ); leg.transition(300).attr("opacity", 0); } ctr .selectAll("path") .data(data, d => d) .join( enter => countriesEnter(enter, col), update => update, exit => countriesExit(exit) ); ctr .selectAll("circle") .data(data, d => d) .join( enter => circlesEnter(enter, col2), update => update, exit => circlesExit(exit) ); } }); }32:[{"id":"8de855c9a3e7801b5e9477acee2a3ca6099cde37669cbb7c76e93a943997f52e40a1f5377df3cf6d6a8f21fff844ea37765396cf94e5bf2241a334eb7201826a","href":"https://static.observableusercontent.com/files/8de855c9a3e7801b5e9477acee2a3ca6099cde37669cbb7c76e93a943997f52e40a1f5377df3cf6d6a8f21fff844ea37765396cf94e5bf2241a334eb7201826a","name":"billionaires_2021-1-1.csv","type":"text/csv","lastModified":1744885014591.819,"size":2171},{"id":"455fab5c4477c47e96a67b0a9181770ab88681f80921c79294f0d7cfcbce194566d72427bb030d5077457062d7598fc3a2e6f76cb2c1ae74c44ede304ac4c257","href":"https://static.observableusercontent.com/files/455fab5c4477c47e96a67b0a9181770ab88681f80921c79294f0d7cfcbce194566d72427bb030d5077457062d7598fc3a2e6f76cb2c1ae74c44ede304ac4c257","name":"billionaires_2021-1-1@1.csv","type":"text/csv","lastModified":1744885058240.361,"size":2172},{"id":"0ee72e9acc36d048dd48791b42b5afcd22a77872c6ff59b74f31fa6eda4ed5fe6cadd04a8c84b1adfc4bf7b8957fde244f44c6de5d5cbef32b7c7e78f6488a96","href":"https://static.observableusercontent.com/files/0ee72e9acc36d048dd48791b42b5afcd22a77872c6ff59b74f31fa6eda4ed5fe6cadd04a8c84b1adfc4bf7b8957fde244f44c6de5d5cbef32b7c7e78f6488a96","name":"billionaires_2021-1-1@2.csv","type":"text/csv","lastModified":1744885127584.067,"size":2171},{"id":"feb270a0b04bd6fd27a076308ca35627b30962bb31501cd4fffbfe9344cf17b5d60efc1ad3c065c92bd0f2fb18fb4e954885b1b524939fc2a3a9c520173abd12","href":"https://static.observableusercontent.com/files/feb270a0b04bd6fd27a076308ca35627b30962bb31501cd4fffbfe9344cf17b5d60efc1ad3c065c92bd0f2fb18fb4e954885b1b524939fc2a3a9c520173abd12","name":"billionaires_2021-1-1@3.csv","type":"text/csv","lastModified":1744885318029.232,"size":2176},{"id":"c2da9f64da157119df7a7e7bb2cc809bc9a4167fe146aeb83385798d4c7d38e53d5562da1a3ef2c0e070305ced4e0876d9bd74c1a2a12f60b4e9087e5e3a95bc","href":"https://static.observableusercontent.com/files/c2da9f64da157119df7a7e7bb2cc809bc9a4167fe146aeb83385798d4c7d38e53d5562da1a3ef2c0e070305ced4e0876d9bd74c1a2a12f60b4e9087e5e3a95bc","name":"billionaires_2021@1.csv","type":"text/csv","lastModified":1617964326633.29,"size":2050},{"id":"7a5905608da1bc591a66d06d59d38e83e987575746c3e04d7243948c1fc3b87de8e44292d0803240ced27f8a4f09b4cd8bada83532183d9cc5760d205e93cd3b","href":"https://static.observableusercontent.com/files/7a5905608da1bc591a66d06d59d38e83e987575746c3e04d7243948c1fc3b87de8e44292d0803240ced27f8a4f09b4cd8bada83532183d9cc5760d205e93cd3b","name":"billionaires_2021-1.csv","type":"text/csv","lastModified":1692780184518.03,"size":2080},{"id":"766f437ea502bdcc7334f55624d81a8529eea35af4de1750eba12ba8df9e6a0c89cc1ef67c263037d9ef88608d463ddb009ca29fddd46f7c030bcf813863ba5e","href":"https://static.observableusercontent.com/files/766f437ea502bdcc7334f55624d81a8529eea35af4de1750eba12ba8df9e6a0c89cc1ef67c263037d9ef88608d463ddb009ca29fddd46f7c030bcf813863ba5e","name":"billionaires_2021-1@1.csv","type":"text/csv","lastModified":1693045963035.899,"size":2080}] 2f:{"title":"Countries vs Billionaires","cells":[{"id":0,"value":"md`# Countries *vs* Billionaires`","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"md`This map shows that one person can be richer than countries. But when we look at the size of the circles, we also see that because of their economic power, the rich states are largely able to oppose these new masters. Sharing or accumulating? It's up to us to decide...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1385,"value":"dashboard = html` \n \n \n \n \n

\n ${viewof language}\n

\n ${viewof who}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1247,"value":"viewof language = Toggle({ label: md`Tiếng Việt`, value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"viewof who = Select(billionaires, {\n label: language ? md`Chọn 1 tỷ phú` : md`Choose a billionaire` ,\n value: billionaires.find(t => t.name === \"Pham Nhat Vuong\"),\n format: x => x.name == \"- - - - -\" ? \"- 2019 GDP of Countries -\": x.name + \" (\" + x.company+\")\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1299,"value":"md `

**WARNING**: his map compares the wealth accumulated by individual billionaires with the gross domestic product of nations, i.e. the wealth produced during a year by the whole population. In other words, it compares a stock (accumulated wealth) and a flow (wealth produced during a year). While this comparison is not very robust methodologically, it does allow us to understand the orders of magnitude.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"update = map.update(who)","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`**1. Data import**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"billionaires = d3.csvParse(await FileAttachment(\"billionaires_2021-1-1@3.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":1329,"value":"//billionaires.unshift({name: \"- - - - -\", company: \"\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"gdp = d3.csv(\n \"https://nlambert.gitpages.huma-num.fr/resources/datasets/UNSTATS/gdp2019.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"world = d3.json(\n \"https://nlambert.gitpages.huma-num.fr/resources/datasets/UNSTATS/world.topojson\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`**2. Data Handling**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"countries = topojson.feature(world, world.objects.world)","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"gdpbyid = new Map(gdp.map(d => [d.ISO3, d.GDP2019]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`**3. Configuration of the map**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"projection = d3\n .geoGilbert()\n .scale(500)\n .translate([width / 2, height / 2 + 100])\n .precision(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"sphere = ({ type: \"Sphere\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"md`**4. Centroids & circles**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"Poly2Center = function(d) {\n if (d.geometry.type == \"MultiPolygon\") {\n var best = {};\n var bestArea = 0;\n d.geometry.coordinates.forEach(function(coords) {\n var poly = { type: 'Polygon', coordinates: coords };\n var area = d3.geoArea(poly);\n if (area > bestArea) {\n bestArea = area;\n best = poly;\n }\n });\n return path.centroid(best);\n } else {\n return path.centroid(d);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"centersbyid = new Map(\n countries.features.map(d => [d.properties.ISO3, Poly2Center(d)])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"radius = d3.scaleSqrt([0, d3.max(gdp.map(d => +d.GDP2019))], [0, 65])","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"md`** 5. Enter, Exit, Update **`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"function transform(d, size) {\n const [x, y] = path.centroid(d);\n return `\n translate(${x},${y})\n scale(${Math.sqrt(size)})\n translate(${-x},${-y})\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"function countriesEnter(enter, col) {\n enter.call(g =>\n g\n .append('path')\n .attr(\"d\", path)\n .attr(\"fill-opacity\", 1)\n //.attr(\"fill\", \"#C84742\")\n .attr(\"fill\", col)\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.5)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"function countriesExit(exit) {\n exit.call(g =>\n g\n .attr(\"transform\", d => transform(d, 1))\n .attr(\"fill\", \"#C84742\")\n .transition()\n .duration(750)\n .attr(\"stroke-opacity\", 0)\n .attr(\"fill-opacity\", 0)\n .attr(\"transform\", d => transform(d, 0.1))\n .attr(\"r\", 0)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"function circlesEnter(enter, col2) {\n enter.call(g =>\n g\n .append('circle')\n .attr(\"fill\", col2)\n .attr(\"fill-opacity\", 0.8)\n .attr(\n \"transform\",\n d => `translate(${centersbyid.get(d.properties.ISO3)})`\n )\n .attr(\"r\", d => radius(gdpbyid.get(d.properties.ISO3)))\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"function circlesExit(exit) {\n exit.call(g =>\n g\n .transition()\n .duration(750)\n .attr(\"r\", 0)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"md`**6. Texts & legend**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"source = language\n ? \"Nguồn: Forbes, THE REAL-TIME BILLIONAIRES LIST. UNSTATS, 2021\"\n : \"Sources : Forbes, THE REAL-TIME BILLIONAIRES LIST. UNSTATS, 2021\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1084,"value":"legcircles = legendCircle()\n .tickValues([\n d3.min(gdp, d => +d.GDP2019),\n 1000000000000,\n 5000000000000,\n 12000000000000,\n d3.max(gdp, d => +d.GDP2019)\n ])\n .tickFormat(d => Math.round(d / 1000000000))\n .scale(radius)","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`# Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"import { legendCircle } from \"@harrystevens/circle-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"import { Select, Toggle } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6\", \"d3-geo-projection@2\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}