2d:null 2e:["$","title",null,{"children":"The Wealth & Health of Nations | AbserAri | Observable"}] 33:[{"id":"2953b6cf84ed92fb8fa449c1d2e2491075f6ede3d87822224a3108f5e40cb2cd2bee040c4e078863efbe06a2c125c846bbd596604b0c75ac11138a3093ad1126","href":"https://static.observableusercontent.com/files/2953b6cf84ed92fb8fa449c1d2e2491075f6ede3d87822224a3108f5e40cb2cd2bee040c4e078863efbe06a2c125c846bbd596604b0c75ac11138a3093ad1126","name":"nations.json","type":"application/json","lastModified":1578921896912.527,"size":653147}] 31:{"id":"29252dd5d1bb24bb","slug":"the-wealth-health-of-nations","title":"The Wealth & Health of Nations","thumbnail":"b0bb1b8d8cdbbe813ac9e9e67c770d60b404c477b0f274a54b2e286c9ff9358f","access_level":"public","create_time":"$D2020-01-13T13:24:56.912Z","update_time":"$D2020-01-13T17:08:10.147Z","view_time":null,"first_public_time":"$D2020-01-13T17:08:28.086Z","has_unpublished_edits":null,"fork":{"id":"ee2086412849cb2d","slug":"the-wealth-health-of-nations","title":"The Wealth & Health of Nations","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8c968b856895152e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":"starter_2024"},"version":183,"publish_version":183,"role":null,"authored":false,"authors":[{"type":"individual","id":"3935e5bc2f09179e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":null}],"members":[{"type":"individual","id":"3935e5bc2f09179e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"9fcadf6614df3d66","slug":"d3/2","title":"d3","owner":{"id":"8c968b856895152e","login":"yhyddr","name":"AbserAri"}},"type":"notebook","body":{"title":"The Wealth & Health of Nations","cells":[{"id":0,"value":"md`# The Wealth & Health of Nations\n\nThis is a recreation of a [Gapminder visualization](http://gapminder.org/world/) made famous by [Hans Rosling](https://www.ted.com/talks/hans_rosling_the_best_stats_you_ve_ever_seen). It shows per-capita income (*x*), life expectancy (*y*) and population (*area*) of 180 nations over the last 209 years, colored by region. Data prior to 1950 is sparse, so this chart uses [bisection](https://en.wikipedia.org/wiki/Binary_search_algorithm) and [linear interpolation](https://en.wikipedia.org/wiki/Linear_interpolation) to fill in missing data points.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"html`

And This is similiar image from facebook

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof year = Scrubber(d3.range(1800, 2010, 0.1), {format: Math.floor, loop: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"legend = {\n const id = DOM.uid().id;\n return html`

${color.domain().map(region => html`${document.createTextNode(region)}`)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.append(\"g\")\n .call(grid);\n\n const circle = svg.append(\"g\")\n .attr(\"stroke\", \"black\")\n .selectAll(\"circle\")\n .data(dataAt(1800), d => d.name)\n .join(\"circle\")\n .sort((a, b) => d3.descending(a.population, b.population))\n .attr(\"cx\", d => x(d.income))\n .attr(\"cy\", d => y(d.lifeExpectancy))\n .attr(\"r\", d => radius(d.population))\n .attr(\"fill\", d => color(d.region))\n .call(circle => circle.append(\"title\")\n .text(d => [d.name, d.region].join(\"\\n\")));\n\n return Object.assign(svg.node(), {\n update(data) {\n circle.data(data, d => d.name)\n .sort((a, b) => d3.descending(a.population, b.population))\n .attr(\"cx\", d => x(d.income))\n .attr(\"cy\", d => y(d.lifeExpectancy))\n .attr(\"r\", d => radius(d.population));\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"chart.update(currentData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"currentData = dataAt(year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"x = d3.scaleLog([200, 1e5], [margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"y = d3.scaleLinear([14, 86], [height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"radius = d3.scaleSqrt([0, 5e8], [0, width / 24])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"color = d3.scaleOrdinal(data.map(d => d.region), d3.schemeCategory10).unknown(\"black\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80, \",\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width)\n .attr(\"y\", margin.bottom - 4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Income per capita (dollars) →\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(\"↑ Life expectancy (years)\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"grid = g => g\n .attr(\"stroke\", \"currentColor\")\n .attr(\"stroke-opacity\", 0.1)\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(x.ticks())\n .join(\"line\")\n .attr(\"x1\", d => 0.5 + x(d))\n .attr(\"x2\", d => 0.5 + x(d))\n .attr(\"y1\", margin.top)\n .attr(\"y2\", height - margin.bottom))\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(y.ticks())\n .join(\"line\")\n .attr(\"y1\", d => 0.5 + y(d))\n .attr(\"y2\", d => 0.5 + y(d))\n .attr(\"x1\", margin.left)\n .attr(\"x2\", width - margin.right));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function dataAt(year) {\n return data.map(d => ({\n name: d.name,\n region: d.region,\n income: valueAt(d.income, year),\n population: valueAt(d.population, year),\n lifeExpectancy: valueAt(d.lifeExpectancy, year)\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function valueAt(values, year) {\n const i = bisectYear(values, year, 0, values.length - 1);\n const a = values[i];\n if (i > 0) {\n const b = values[i - 1];\n const t = (year - a[0]) / (b[0] - a[0]);\n return a[1] * (1 - t) + b[1] * t;\n }\n return a[1];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"data = FileAttachment(\"nations.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"bisectYear = d3.bisector(([year]) => year).left","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"margin = ({top: 20, right: 20, bottom: 35, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"height = 560","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"