2c:["$","title",null,{"children":"Dashboard with bertin 🌍 & plot 📊 | Nicolas Lambert | Observable"}] 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:{"id":"e1761b8a3ceaa237","slug":"dashboard-with-bertin-plot","title":"Dashboard with bertin 🌍 & plot 📊","thumbnail":"ab7bc1c07e06a99fe6ae2076f0ec497462163b2a6d738fbf8d2f36fad8ca1eab","access_level":"public","create_time":"$D2022-11-25T10:33:43.865Z","update_time":"$D2023-01-26T14:43:06.713Z","view_time":null,"first_public_time":"$D2022-11-25T11:58:47.701Z","fork":false,"stars":23,"starred":false,"owner":{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024"},"version":635,"publish_version":null,"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":true,"trashed":false,"subscribed":null,"forks":10,"collection":{"id":"f506a2744dcac2bc","slug":"dashboards/2","title":"Dashboards","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Dashboard with bertin 🌍 & plot 📊","cells":[{"id":0,"value":"# Dashboard with `bertin` 🌍 & `plot` 📊","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":624,"value":"Please, hover the map with the mouse ⬇️","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":451,"value":"miniPlots = html`\n

${viewof map}

${chart1}

${chart2}

`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"### Data import & handling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":15,"value":"maddison = FileAttachment(\"maddison.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"world = FileAttachment(\"world.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":429,"value":"### Config","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":334,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":432,"value":"year = form[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":435,"value":"indicator = form[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":23,"value":"### A map with `bertin`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":29,"value":"bertin = require(\"bertin@1.5.5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"maddisonyear = maddison.filter((d) => d.year == form[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"geodata = bertin.merge(world, \"ISO3\", maddisonyear, \"countrycode\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":25,"value":"### Chart 1 with `plot`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":81,"value":"### Chart 2 with plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body" 2b:E{"digest":"NEXT_REDIRECT;replace;/@neocarto/dashboard-with-bertin-plot;307;"}