31:[{"id":"2953b6cf84ed92fb8fa449c1d2e2491075f6ede3d87822224a3108f5e40cb2cd2bee040c4e078863efbe06a2c125c846bbd596604b0c75ac11138a3093ad1126","href":"https://static.observableusercontent.com/files/2953b6cf84ed92fb8fa449c1d2e2491075f6ede3d87822224a3108f5e40cb2cd2bee040c4e078863efbe06a2c125c846bbd596604b0c75ac11138a3093ad1126","name":"nations.json","type":"application/json","lastModified":1629313914750.206,"size":653147}] 2f:{"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.\n\nForked from the original d3.js demo and visualized using deck.gl.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof date = Scrubber(dates, {format: d => d.getUTCFullYear(), loop: false})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":227,"value":"container = html `

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"deckgl = {\n const props = {\n container,\n initialViewState: {\n target: [width / 2, height / 2, 0],\n zoom: 0\n },\n views: new deck.OrthographicView(),\n controller: true,\n layers: [grid, xAxis, yAxis, circles],\n getTooltip: ({object}) => object && object.name\n };\n \n // Avoid creating multiple instances\n const prevDeckInstance = this;\n if (prevDeckInstance) {\n prevDeckInstance.setProps(props);\n return prevDeckInstance;\n }\n \n return new deck.DeckGL(props);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"currentData = dataAt(date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"x = d3.scaleLog([200, 1e5], [margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"y = d3.scaleLinear([14, 86], [height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"radius = d3.scaleSqrt([0, 5e8], [0, width / 24])","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"color = {\n function toRgb(str) {\n const c = d3.color(str);\n return [c.r, c.g, c.b];\n }\n return d3.scaleOrdinal(data.map(d => d.region), d3.schemeCategory10.map(toRgb)).unknown([0, 0, 0])\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"circles = new deck.ScatterplotLayer({\n id: 'circle',\n data: currentData,\n stroked: true,\n getPosition: d => [x(d.income), y(d.lifeExpectancy)],\n getRadius: d => radius(d.population),\n getFillColor: d => color(d.region),\n getLineColor: [0, 0, 0],\n getLineWidth: 1,\n lineWidthUnits: 'pixels',\n radiusMinPixels: 2,\n pickable: true,\n autoHighlight: true,\n highlightColor: [255, 255, 255, 100]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"xAxis = new deck.TextLayer({\n id: 'x-grid-label',\n data: x.ticks(2),\n getText: t => `$${t.toString()}`,\n getPosition: t => [x(t), y.range()[0]],\n getPixelOffset: [0, 20],\n getSize: 12,\n getColor: [0, 0, 0]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"yAxis = new deck.TextLayer({\n id: 'y-grid-label',\n data: y.ticks(),\n getText: t => t.toString(),\n getPosition: t => [x.range()[0] - 20, y(t)],\n getTextAnchor: 'end',\n getSize: 12,\n getColor: [0, 0, 0]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"grid = [\n new deck.PathLayer({\n id: 'x-grid',\n data: x.ticks(2),\n getPath: t => [[x(t), y.range()[0]], [x(t), y.range()[1]]],\n getWidth: 0,\n widthMinPixels: 1,\n getColor: [100, 100, 100],\n opacity: 0.1\n }),\n new deck.PathLayer({\n id: 'y-grid',\n data: y.ticks(),\n getPath: t => [[x.range()[0], y(t)], [x.range()[1], y(t)]],\n getWidth: 0,\n widthMinPixels: 1,\n getColor: [100, 100, 100],\n opacity: 0.1\n })\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"function dataAt(date) {\n return data.map(d => ({\n name: d.name,\n region: d.region,\n income: valueAt(d.income, date),\n population: valueAt(d.population, date),\n lifeExpectancy: valueAt(d.lifeExpectancy, date)\n }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"function valueAt(values, date) {\n const i = bisectDate(values, date, 0, values.length - 1);\n const a = values[i];\n if (i > 0) {\n const b = values[i - 1];\n const t = (date - 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"},{"id":12,"value":"data = (await FileAttachment(\"nations.json\").json())\n .map(({name, region, income, population, lifeExpectancy}) => ({\n name,\n region,\n income: parseSeries(income),\n population: parseSeries(population),\n lifeExpectancy: parseSeries(lifeExpectancy)\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"interval = d3.utcMonth // interval between animation frames","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"dates = interval.range(\n d3.min(data, d => {\n return d3.min([\n d.income[0], \n d.population[0], \n d.lifeExpectancy[0]\n ], ([date]) => date);\n }),\n d3.min(data, d => {\n return d3.max([\n d.income[d.income.length - 1], \n d.population[d.population.length - 1], \n d.lifeExpectancy[d.lifeExpectancy.length - 1]\n ], ([date]) => date);\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"function parseSeries(series) {\n return series.map(([year, value]) => [new Date(Date.UTC(year, 0, 1)), value]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"bisectDate = d3.bisector(([date]) => date).left","pinned":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"margin = ({top: 20, right: 40, bottom: 35, left: 60})","pinned":true,"hidden":false,"mode":"ojs"},{"id":302,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6.7.0/dist/d3.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"deck = require.alias({\n // optional dependencjei\n h3: {}\n})('deck.gl@latest/dist.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":293,"value":"html `\n\n(Stylesheets)`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}