31:[{"id":"b0df6cea36848b3314484b09d234e467eb1d1f0eb8d240e6b07ad8678b7034145dd411d9082600cdce8f5dbe128054b61fbe1647921cc2224330a2509086ab04","href":"https://static.observableusercontent.com/files/b0df6cea36848b3314484b09d234e467eb1d1f0eb8d240e6b07ad8678b7034145dd411d9082600cdce8f5dbe128054b61fbe1647921cc2224330a2509086ab04","name":"maddison.csv","type":"text/csv","lastModified":1669372615570.035,"size":562020},{"id":"9fbfca6d947ed08f7a303d44b445a6ec0ffa570f31bf935c7a99a6f887e74e684fe12f276edbd0c057657d8c0ff783eaa3e4b79703fcf3b0aece409b5b59e94a","href":"https://static.observableusercontent.com/files/9fbfca6d947ed08f7a303d44b445a6ec0ffa570f31bf935c7a99a6f887e74e684fe12f276edbd0c057657d8c0ff783eaa3e4b79703fcf3b0aece409b5b59e94a","name":"world.json","type":"application/json","lastModified":1669372615457.359,"size":254454}] 2f:{"title":"Dashboard with bertin 🌍 & plot 📊","cells":[{"id":0,"value":"# Dashboard with `bertin` 🌍 & `plot` 📊","pinned":false,"hidden":false,"mode":"md"},{"id":622,"value":"In this notebook, I show how you can easily create a dashboard with `plot` and `bertin`. Suggestions and feedback are welcome. ","pinned":false,"hidden":false,"mode":"md"},{"id":624,"value":"Please, hover the map with the mouse ⬇️","pinned":false,"hidden":false,"mode":"md"},{"id":370,"value":"viewof form = Inputs.form(\n [\n Inputs.range([1950, 2018], {\n label: \"Year\",\n step: 1,\n value: 2000\n }),\n Inputs.select(\n new Map([\n [\"Population\", \"pop\"],\n [\"Wealth\", \"gdp\"]\n ]),\n { label: \"Indicator\" }\n )\n ],\n {\n template: (inputs) => htl.html`

\n ${inputs}\n

`\n }\n)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"miniPlots = html`\n

${viewof map}

${chart1}

${chart2}

`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"### Data import & handling","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"maddison = FileAttachment(\"maddison.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"world = FileAttachment(\"world.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"### Config","pinned":false,"hidden":false,"mode":"md"},{"id":334,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":432,"value":"year = form[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"indicator = form[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"accessor = new Map([\n [\n \"pop\",\n {\n col: \"#55869e\",\n col2: \"#bf69a3\",\n max: d3.max(maddison.map((d) => +d.pop)),\n title: \"Population\"\n }\n ],\n [\n \"gdp\",\n {\n col: \"#bf69a3\",\n col2: \"#55869e\",\n max: d3.max(maddison.map((d) => +d.gdp)),\n title: \"GDP\"\n }\n ]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"### A map with `bertin`","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"bertin = require(\"bertin@1.5.5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"maddisonyear = maddison.filter((d) => d.year == form[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"geodata = bertin.merge(world, \"ISO3\", maddisonyear, \"countrycode\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"viewof map = bertin.draw({\n params: { projection: \"Eckert3\", width: 700 },\n layers: [\n {\n type: \"bubble\",\n geojson: geodata,\n viewof: true,\n values: indicator,\n fill: accessor.get(indicator).col,\n k: 30,\n fixmax: accessor.get(indicator).max,\n leg_x: 50,\n leg_y: 170,\n leg_round: -2,\n leg_title: `${accessor.get(indicator).title} in ${year}`,\n tooltip: \"$NAMEen\"\n },\n { geojson: geodata, fill: \"white\", fillOpacity: 0.3, stroke: \"none\" },\n { type: \"graticule\" },\n { type: \"outline\" }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"### Chart 1 with `plot`","pinned":false,"hidden":false,"mode":"md"},{"id":532,"value":"chart1data = {\n let worlddata = d3\n .rollups(\n maddison,\n (v) => d3.sum(v, (d) => d[indicator]),\n (d) => d.year\n )\n .map((d) => ({ id: +d[0], value: d[1] }));\n\n let data;\n maddison.filter((d) => d.countrycode == map.ISO3).length != 0\n ? (data = maddison\n .filter((d) => d.countrycode == map.ISO3)\n .map((d) => ({\n id: +d.year,\n value: +d[indicator]\n })))\n : (data = worlddata);\n\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"chart1 = Plot.plot({\n width: 300,\n height: 351,\n grid: true,\n marginLeft: 20,\n marginRight: 20,\n marginTop: 60,\n x: { axis: null },\n y: { axis: null },\n marks: [\n Plot.areaY(chart1data, {\n x: \"id\",\n y: \"value\",\n fill: accessor.get(indicator).col\n }),\n Plot.dot(chart1data, {\n x: \"id\",\n y: \"value\",\n r: 10,\n strokeWidth: 3,\n stroke: accessor.get(indicator).col,\n fill: \"white\",\n filter: (d) => d.id == year\n }),\n Plot.text(chart1data, {\n x: \"id\",\n y: \"value\",\n text: (d) => d.value / 100000,\n dy: -25,\n filter: (d) => d.id == year\n }),\n Plot.text(\n [\n map.ISO3 != undefined\n ? map.ISO3 + \" \" + indicator\n : \"World \" + indicator\n ],\n {\n textAnchor: \"start\",\n frameAnchor: \"bottom\",\n dy: -20,\n fill: \"white\",\n fontSize: 15\n }\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"### Chart 2 with plot","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"chart2 = Plot.plot({\n width: 1000,\n height: 300,\n marks: [\n Plot.barX(maddisonyear, {\n x: indicator,\n y: \"countrycode\",\n fill: (d) =>\n d.countrycode == map.ISO3\n ? accessor.get(indicator).col2\n : accessor.get(indicator).col,\n sort: { y: \"x\", reverse: true, limit: 25 }\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}