25:["$","title",null,{"children":"Dashboard with bertin 🌍 & plot 📊 | Ped Ram | Observable"}] 49:[{"id":"b0df6cea36848b3314484b09d234e467eb1d1f0eb8d240e6b07ad8678b7034145dd411d9082600cdce8f5dbe128054b61fbe1647921cc2224330a2509086ab04","href":"https://static.observableusercontent.com/files/b0df6cea36848b3314484b09d234e467eb1d1f0eb8d240e6b07ad8678b7034145dd411d9082600cdce8f5dbe128054b61fbe1647921cc2224330a2509086ab04","name":"maddison.csv","type":"text/csv","lastModified":1682114841487.887,"size":562020},{"id":"9fbfca6d947ed08f7a303d44b445a6ec0ffa570f31bf935c7a99a6f887e74e684fe12f276edbd0c057657d8c0ff783eaa3e4b79703fcf3b0aece409b5b59e94a","href":"https://static.observableusercontent.com/files/9fbfca6d947ed08f7a303d44b445a6ec0ffa570f31bf935c7a99a6f887e74e684fe12f276edbd0c057657d8c0ff783eaa3e4b79703fcf3b0aece409b5b59e94a","name":"world.json","type":"application/json","lastModified":1682114841487.887,"size":254454}] 29:{"id":"334f1d80a33839b3","slug":null,"title":"Dashboard with bertin 🌍 & plot 📊","thumbnail":"0cf71c21429f17ad4d259a9328a7feaac11320cb763b5c0f3c1c8ed4843a861d","access_level":"public","create_time":"$D2023-04-21T22:07:21.487Z","update_time":"$D2023-04-21T23:40:17.902Z","view_time":null,"first_public_time":"$D2023-04-21T22:07:21.487Z","has_unpublished_edits":null,"fork":{"id":"e1761b8a3ceaa237","slug":"dashboard-with-bertin-plot","title":"Dashboard with bertin 🌍 & plot 📊","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b0bbcf444e46bf02","login":"pedahd","name":"Ped Ram","avatar_url":"https://avatars-next.observableusercontent.com/ef13a6f0f32bd05288b47eb131f8eb1c5f9160b8e901276508df258390e51492","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":641,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5456960e585c7bbb","login":"pedahd","name":"Ped Ram","avatar_url":"https://avatars-next.observableusercontent.com/ef13a6f0f32bd05288b47eb131f8eb1c5f9160b8e901276508df258390e51492","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5456960e585c7bbb","login":"pedahd","name":"Ped Ram","avatar_url":"https://avatars-next.observableusercontent.com/ef13a6f0f32bd05288b47eb131f8eb1c5f9160b8e901276508df258390e51492","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Dashboard with bertin 🌍 & plot 📊","cells":[{"id":0,"value":"# Dashboard with `bertin` 🌍 & `plot` 📊","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":624,"value":"Please, hover the map with the mouse ⬇️","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"miniPlots = html`\n

${viewof map}

${chart1}

${chart2}

`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"### Data import & handling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"maddison = FileAttachment(\"maddison.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"world = FileAttachment(\"world.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"### Config","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":334,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":432,"value":"year = form[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"indicator = form[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"### A map with `bertin`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"bertin = require(\"bertin@1.5.5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"maddisonyear = maddison.filter((d) => d.year == form[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"geodata = bertin.merge(world, \"ISO3\", maddisonyear, \"countrycode\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"### Chart 1 with `plot`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"### Chart 2 with plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null