31:T424,// call eurostatMap to build each map, passing its svg id and other configurables maps = mapConfig.maps.map((map) => { smallMultiples; let estatMap = eurostatmap .map("ch") .containerId("containerDiv") .svgId(map.id) .title(map.title) .titlePosition([0, 20]) .titleFontSize(13) .fontFamily("Source Serif Pro") .width(mapWidth - 10) .scale("60M") .nutsYear(2021) .colors(mapConfig.config.colors) .numberOfClasses(200) .classificationMethod("threshold") .thresholds(mapConfig.config.thresholds) .legend(false) .bottomText("") .showSourceLink(false); if (map.data) { // add stat data manually estatMap.nutsLevel("mixed"); estatMap.statData().setData(map.data); estatMap.build(); } else { //retrieve stat data using Eurostat API estatMap.nutsLvl(nutsLevel); estatMap.stat({ eurostatDatasetCode: mapConfig.config.datasetCode, filters: map.filters, unitText: mapConfig.config.unitText }); estatMap.build(); } return estatMap; })32:T290c,mapConfig = { if (dataset == "life-expectancy") { return { config: { title: `Life expectancy`, thresholds: [70, 72, 74, 76, 78, 80, 82, 84, 86], colors: [ "#EBF6EB", "#D4EBD4", "#BDE1BD", "#A6D7A6", "#90CC90", "#79C179", "#65B865", "#4DAC4D", "#35A135", "#177217" ], legendTitle: "Years old", datasetCode: "demo_r_mlifexp", unitText: "years", mapHeight: 350 }, maps: [ { id: "map1", title: "Male", filters: { time: "2023", age: "Y_LT1", sex: "M" } }, { id: "map2", title: "Female", filters: { time: "2023", age: "Y_LT1", sex: "F" } } ] }; } if (dataset == "median-age") { return { maps: [ { id: "map4", title: "2015", filters: { time: "2015", indic_de: "MEDAGEPOP" } }, { id: "map5", title: "2016", filters: { time: "2016", indic_de: "MEDAGEPOP" } }, { id: "map6", title: "2017", filters: { time: "2017", indic_de: "MEDAGEPOP" } }, { id: "map7", title: "2018", filters: { time: "2018", indic_de: "MEDAGEPOP" } }, { id: "map8", title: "2019", filters: { time: "2019", indic_de: "MEDAGEPOP" } }, { id: "map9", title: "2020", filters: { time: "2020", indic_de: "MEDAGEPOP" } }, { id: "map10", title: "2021", filters: { time: "2021", indic_de: "MEDAGEPOP" } }, { id: "map11", title: "2022", filters: { time: "2022", indic_de: "MEDAGEPOP" } }, { id: "map12", title: "2023", filters: { time: "2023", indic_de: "MEDAGEPOP" } }, { id: "map13", title: "2024", filters: { time: "2024", indic_de: "MEDAGEPOP" } } ], config: { title: `Median age`, thresholds: [35, 36, 37, 38, 39, 40, 41, 42, 43, 44], colors: [ "#F7E8EF", "#EFD0DE", "#E7B9CE", "#DF96B8", "#D78AAE", "#D472A0", "#C75B8D", "#BF447D", "#B72C6C", "#AF155C", "#7F0A45" ], // colors: [ // "#F7E8EF", // "#EFD0DE", // "#E7B9CE", // "#DF96B8", // "#D78AAE", // "#D472A0", // "#C75B8D", // "#BF447D", // "#B72C6C", // "#AF155C", // "#7F0A45" // ], legendTitle: "Years old", datasetCode: "demo_pjanind", unitText: "years", mapHeight: 250 } }; } else if (dataset == "population") { return { maps: [ { id: "map1", title: "2012", filters: { time: "2012", indic_de: "GROWRT" } }, { id: "map2", title: "2013", filters: { time: "2013", indic_de: "GROWRT" } }, { id: "map3", title: "2014", filters: { time: "2014", indic_de: "GROWRT" } }, { id: "map4", title: "2015", filters: { time: "2015", indic_de: "GROWRT" } }, { id: "map5", title: "2016", filters: { time: "2016", indic_de: "GROWRT" } }, { id: "map6", title: "2017", filters: { time: "2017", indic_de: "GROWRT" } }, { id: "map7", title: "2018", filters: { time: "2018", indic_de: "GROWRT" } }, { id: "map8", title: "2019", filters: { time: "2019", indic_de: "GROWRT" } }, { id: "map9", title: "2020", filters: { time: "2020", indic_de: "GROWRT" } }, { id: "map10", title: "2021", filters: { time: "2021", indic_de: "GROWRT" } }, { id: "map11", title: "2022", filters: { time: "2022", indic_de: "GROWRT" } }, { id: "map12", title: "2023", filters: { time: "2023", indic_de: "GROWRT" } } // { // id: "map13", // title: "2024", // filters: { time: "2024", indic_de: "GROWRT" } // } ], config: { title: `Population change in Europe since 2012 *Increase* vs *Decrease*`, thresholds: [-10, -6, -4, -2, 0, 2, 4, 6, 10, 15], colors: [ "#997a00", "#be9812", "#e5b822", "#f3d163", "#feea98", "#e0ebab", "#beebbe", "#a0dbbd", "#7fccbb", "#54a7a0", "#208486" ], legendTitle: "Population change per 1000 inhabitants", legendTickFormat: "+", datasetCode: "demo_r_gind3", unitText: "‰", mapHeight: 260 } }; } else if (dataset == "death") { return { maps: [ { id: "map1", title: "Circulatory", filters: { sex: "T", unit: "RT", time: "2016", age: "TOTAL", icd10: "I" } }, { id: "map2", title: "Cancer", filters: { sex: "T", unit: "RT", time: "2016", age: "TOTAL", icd10: "C" } }, { id: "map3", title: "Respiratory", filters: { sex: "T", unit: "RT", time: "2016", age: "TOTAL", icd10: "J" } } // { // id: "map4", // title: "Other", // filters: { // sex: "T", // unit: "RT", // time: 2016, // age: "TOTAL", // icd10: // "A_B&icd10=A_B_OTH&icd10=D00-D48&icd10=D50-D89&icd10=E&icd10=E_OTH&icd10=F&icd10=TOXICO&icd10=F_OTH&icd10=G_H&icd10=G_H_OTH&icd10=K&icd10=L&icd10=M&icd10=N&icd10=N_OTH&icd10=O&icd10=P&icd10=Q&icd10=R&icd10=U071&icd10=U072&icd10=U_COV19_OTH&icd10=V01-Y89&icd10=ACC&icd10=V_Y85&icd10=ACC_OTH&icd10=W00-W19&icd10=W65-W74&icd10=X60-X84_Y870&icd10=X40-X49&icd10=X85-Y09_Y871&icd10=Y10-Y34_Y872&icd10=V01-Y89_OTH" // } // } ], config: { title: "Causes of death", thresholds: [ 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 500, 700, 900, 1200 ], colors: [ "#ffffd9", "#f4fbc3", "#e5f5b6", "#d0ecb4", "#b0e0b6", "#8ad2ba", "#65c3bf", "#45b4c2", "#2ea0c1", "#2288ba", "#216daf", "#2353a2", "#213c93", "#182b79" ], legendTitle: "Deaths per 100 000 inhabitants", datasetCode: "hlth_cd_asdr2", legendTickFormat: "", unitText: "deaths per 100 000 inhabitants", mapHeight: 250 } }; } else if (dataset == "employment") { return { maps: [ { id: "map1", title: "Industry", data: await FileAttachment("4A@1.csv") .csv() .then((res) => Object.fromEntries(res.map((row) => [row.NUTS, row.Value])) ) }, { id: "map2", title: "Construction", data: await FileAttachment("4B@1.csv") .csv() .then((res) => Object.fromEntries(res.map((row) => [row.NUTS, row.Value])) ) }, { id: "map3", title: "Distributive trade", data: await FileAttachment("4C@1.csv") .csv() .then((res) => Object.fromEntries(res.map((row) => [row.NUTS, row.Value])) ) } // { // id: "map4", // title: "Other market services", // data: await FileAttachment("4D@1.csv") // .csv() // .then((res) => // Object.fromEntries(res.map((row) => [row.NUTS, row.Value])) // ) // } ], config: { title: "Business economy employment", thresholds: [5, 10, 15, 20, 25, 30, 35, 40], colors: getColorsFromInterpolator(8), legendTitle: "%, share of business economy employment", legendTickFormat: "", unitText: "%", mapHeight: 250 } }; } else if (dataset == "employment2") { return { maps: [ { id: "map1", title: "Retail trade", data: await FileAttachment("5A.csv") .csv() .then((res) => Object.fromEntries(res.map((row) => [row.NUTS, row.Value])) ) }, { id: "map2", title: "Administrative and support services", data: await FileAttachment("5B.csv") .csv() .then((res) => Object.fromEntries(res.map((row) => [row.NUTS, row.Value])) ) }, { id: "map3", title: "Education", data: await FileAttachment("5C.csv") .csv() .then((res) => Object.fromEntries(res.map((row) => [row.NUTS, row.Value])) ) }, { id: "map4", title: "Human health and social work", data: await FileAttachment("5D.csv") .csv() .then((res) => Object.fromEntries(res.map((row) => [row.NUTS, row.Value])) ) } ], config: { title: "Selected services employment", thresholds: [0.5, 1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 20], colors: getColorsFromInterpolator(15), legendTitle: "%, share of business economy employment", legendTickFormat: "", unitText: "%", mapHeight: 250 } }; } }33:[{"id":"c86340355d9175e17c3f3814e9a5698bcc919c647e4c3292f93386d2c222cebe91f9dd0c4920f6b60c5700534b1870909a4f5b1ba5d801051ff115a813074cad","href":"https://static.observableusercontent.com/files/c86340355d9175e17c3f3814e9a5698bcc919c647e4c3292f93386d2c222cebe91f9dd0c4920f6b60c5700534b1870909a4f5b1ba5d801051ff115a813074cad","name":"4A@1.csv","type":"text/csv","lastModified":1714383759986.821,"size":1024},{"id":"132fc936c4979548a9019f85e19dc2e95cb39e36584c0e2c183db722cdacc8eb1e5a57a9ade907f9cf64581d497bd022633b41fe35919671deaa92dde9a543c9","href":"https://static.observableusercontent.com/files/132fc936c4979548a9019f85e19dc2e95cb39e36584c0e2c183db722cdacc8eb1e5a57a9ade907f9cf64581d497bd022633b41fe35919671deaa92dde9a543c9","name":"4C@1.csv","type":"text/csv","lastModified":1714383771761.366,"size":1033},{"id":"0bbfc98ccd41c0db309b84948c5e3d3d307e1fee490b7c250c2a8fd6eadb2285a287c0f6b726896b5fe1c47cc85270bf311a6238e19a81db3429d4303ceec39d","href":"https://static.observableusercontent.com/files/0bbfc98ccd41c0db309b84948c5e3d3d307e1fee490b7c250c2a8fd6eadb2285a287c0f6b726896b5fe1c47cc85270bf311a6238e19a81db3429d4303ceec39d","name":"4B@1.csv","type":"text/csv","lastModified":1714383766817.695,"size":976},{"id":"897ffe4d936cf2c7984fea5424d77a14d0e904fec3309a4bab43cb8b203a46d22294b6a34e1af312b1482a981aa1ce83157d2c0370f0f195dfca6883e17c8cae","href":"https://static.observableusercontent.com/files/897ffe4d936cf2c7984fea5424d77a14d0e904fec3309a4bab43cb8b203a46d22294b6a34e1af312b1482a981aa1ce83157d2c0370f0f195dfca6883e17c8cae","name":"4D@1.csv","type":"text/csv","lastModified":1714383777295.003,"size":1017},{"id":"98136a4646088142747858e038fc523671f299d5a521207b243a3a71f1c59ade740f75dc63b7659ed877b9a8b3091e54d5b5d1b9a52d27493e20f2b5a9b6be51","href":"https://static.observableusercontent.com/files/98136a4646088142747858e038fc523671f299d5a521207b243a3a71f1c59ade740f75dc63b7659ed877b9a8b3091e54d5b5d1b9a52d27493e20f2b5a9b6be51","name":"5A.csv","type":"text/csv","lastModified":1714388443719.518,"size":4955},{"id":"897c27ca201b66e9618b2b90bf8fd5a57be0498ce008a634e74c567f25d43d4ff8cd2c9311779cb79dee98beeb2526c1e8b662edfb7d8c8cdaf6b2827ad8550f","href":"https://static.observableusercontent.com/files/897c27ca201b66e9618b2b90bf8fd5a57be0498ce008a634e74c567f25d43d4ff8cd2c9311779cb79dee98beeb2526c1e8b662edfb7d8c8cdaf6b2827ad8550f","name":"5B.csv","type":"text/csv","lastModified":1714388443748.215,"size":5174},{"id":"c035f567ea071292c455dffe22cf0d1185368787574816ea8551547e8e009c2602ea3d2f3720ac85ff99a835899cd8fdd1e270317d591489feb9123d6f11da56","href":"https://static.observableusercontent.com/files/c035f567ea071292c455dffe22cf0d1185368787574816ea8551547e8e009c2602ea3d2f3720ac85ff99a835899cd8fdd1e270317d591489feb9123d6f11da56","name":"5C.csv","type":"text/csv","lastModified":1714388443841.629,"size":4950},{"id":"0100545405578882d1725b2dbe110e8d9f9edae3bb9d2cc8dd0fb656a43bb06d24b50b227a0444c6dc3c608068638405686246f930d7da187d288f67dd2e9f2d","href":"https://static.observableusercontent.com/files/0100545405578882d1725b2dbe110e8d9f9edae3bb9d2cc8dd0fb656a43bb06d24b50b227a0444c6dc3c608068638405686246f930d7da187d288f67dd2e9f2d","name":"5D.csv","type":"text/csv","lastModified":1714388443736.043,"size":4313}] 2f:{"title":"Small multiple maps","cells":[{"id":0,"value":"md`# Small multiple maps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"html`A small multiple is a series of similar graphs or charts using the same scale and axes, allowing them to be easily compared. This notebook generates small multiple maps of eurostat data using eurostat-map.js.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"viewof dataset = radio({\n title: \"Dataset\",\n description: \"\",\n options: [\n { label: \"Median age\", value: \"median-age\" },\n { label: \"Life expectancy\", value: \"life-expectancy\" },\n // { label: \"Employment in the business economy\", value: \"employment\" },\n // {\n // label: \"Employment in selected service activities\",\n // value: \"employment2\"\n // },\n { label: \"Population change\", value: \"population\" },\n { label: \"Causes of death\", value: \"death\" }\n ],\n value: \"median-age\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"viewof nutsLevel = radio({\n title: \"Geographic level\",\n description: \"\",\n options:\n dataset == \"median-age\"\n ? [{ label: \"National\", value: \"0\" }]\n : [\n { label: \"National\", value: \"0\" },\n { label: \"NUTS 1\", value: \"1\" },\n { label: \"NUTS 2\", value: \"2\" }\n ],\n value: \"0\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"md`## ${mapConfig.config.title}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"smallMultiples = {\n const div = d3\n .create(\"div\")\n .style(\"display\", \"block\")\n .attr(\"id\", \"containerDiv\");\n\n // append an svg element for each map and assign its id for eurostat-map to use\n const maps = div\n .selectAll(\"div\")\n .data(mapConfig.maps)\n .enter()\n .append(\"svg\")\n .style(\"height\", \"auto\")\n .style(\"width\", mapWidth + \"px\")\n .attr(\"id\", (d) => d.id);\n\n // add legend\n div.append(() =>\n legend({\n color: legendScale,\n title: mapConfig.config.legendTitle,\n width: dataset == \"life-expectancy\" ? mapWidth * 2 : mapWidth * 4,\n tickFormat: mapConfig.config.legendTickFormat\n })\n );\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"mapHeight = mapConfig.config.mapHeight","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"mapWidth = mapHeight - 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"titleFontSize = 15","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":313,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"margin = ({ top: 20, bottom: 20, left: 20, right: 20 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":665,"value":"### Statistical data","pinned":false,"hidden":false,"mode":"md"},{"id":343,"value":"circulatoryDeathRate = indexStats(\n await d3.json(\n `https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/hlth_cd_asdr2?geoLevel=nuts1&sex=T&unit=RT&time=${2016}&age=TOTAL&icd10=I`\n )\n).map((d) => {\n d.circulatory = d.value;\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"indexStats = function (data) {\n const arr = Object.entries(data.dimension.geo.category.index)\n // define our object structure\n .map(([key, val]) => ({\n id: key,\n value: data.value[val] || null,\n name: data.dimension.geo.category.label[key]\n }));\n //sort the array in ascending order by 'value'\n return arr.sort((a, b) =>\n a.value > b.value ? -1 : b.value > a.value ? 1 : 0\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"### Helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":407,"value":"legendScale = d3\n .scaleThreshold()\n .domain([...mapConfig.config.thresholds].filter((v) => v !== 1200))\n .range(mapConfig.config.colors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"getColorsFromInterpolator = (numberOfColors) => {\n let n = numberOfColors;\n let colors = [];\n const t = interpolator.ticks\n ? interpolator.ticks(n)\n : d3.range(n).map((i) => i / (n - 1));\n for (let i = 0; i < t.length; ++i) {\n colors.push(interpolator(t[i]));\n }\n\n return colors;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"interpolatePalette = (colors) => {\n return (t) =>\n d3.piecewise(d3.interpolateLab, colors)(Math.min(Math.max(0, t), 1));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"interpolator = interpolatePalette([\n \"#ffeb99\",\n \"#c7e9b4\",\n \"#7fcdbb\",\n \"#41b6c4\",\n \"#104f99\",\n \"#17256b\"\n ]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"continuousClasses = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"continuousThresholds = {\n const startValue = 0.1;\n const endValue = 40;\n const arrayLength = continuousClasses;\n const stepSize = (endValue - startValue) / (arrayLength - 1);\n\n const resultArray = Array.from({ length: arrayLength }, (_, index) =>\n Math.floor(startValue + index * stepSize)\n );\n\n return resultArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"continuousColors = {\n let n = continuousClasses;\n let colors = [];\n const t = interpolator.ticks\n ? interpolator.ticks(n)\n : d3.range(n).map((i) => i / (n - 1));\n for (let i = 0; i < t.length; ++i) {\n colors.push(interpolator(t[i]));\n }\n\n return colors;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"eurostatmap = require(\"eurostat-map\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}