31:T8ff,html`

Life expectancy
- Ranked horizontal bar chart
- Choropleth map
Health status and healthcare
- Scatter plot chart
Causes of death
- Map of pie charts
Dependencies

`32:T488,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // bar svg .append("g") .selectAll("rect") .data(finalArray) .join("rect") .attr("x", x(0)) .attr("y", (d, i) => y(i)) .attr("width", d => x(d.value) - x(0)) .attr("height", y.bandwidth()) .attr("fill", d => { if (d.name == "EU-27") { return 'steelblue'; } else { return "#FAAE44"; } }); // bar value labels svg .append("g") .attr("fill", "white") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 12) .selectAll("text") .data(finalArray) .join("text") .attr("x", d => x(d.value)) .attr("y", (d, i) => y(i) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -7) .text(d => d.value) .call(text => text .filter(d => d.value == 0) // hide our 'buffer' bars' labels .attr("fill", "none") ); // append chart title and axes using the functions we defined earlier svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg.append("g").call(xTitle); return svg.node(); }33:Ta31,colorSchemes = [ { value: "interpolateBrBG", innerText: "Brown-blue-green" }, { value: "interpolatePRGn", innerText: "Purple-green" }, { value: "interpolatePiYG", innerText: "Pink-green" }, { value: "interpolatePuOr", innerText: "Purple-orange" }, { value: "interpolateRdBu", innerText: "Red-blue" }, { value: "interpolateRdGy", innerText: "Red-grey" }, { value: "interpolateRdYlBu", innerText: "Red-yellow-blue" }, { value: "interpolateRdYlGn", innerText: "Red-yellow-green" }, { value: "interpolateSpectral", innerText: "Spectral" }, { value: "interpolateBlues", innerText: "Blues" }, { value: "interpolateGreens", innerText: "Greens" }, { value: "interpolateGreys", innerText: "Greys" }, { value: "interpolateOranges", innerText: "Oranges" }, { value: "interpolatePurples", innerText: "Purples" }, { value: "interpolateReds", innerText: "Reds" }, { value: "interpolateTurbo", innerText: "Turbo" }, { value: "interpolateViridis", innerText: "Viridis" }, { value: "interpolateInferno", innerText: "Inferno" }, { value: "interpolateMagma", innerText: "Magma" }, { value: "interpolatePlasma", innerText: "Plasma" }, { value: "interpolateCividis", innerText: "Cividis" }, { value: "interpolateWarm", innerText: "Warm" }, { value: "interpolateCool", innerText: "Cool" }, { value: "interpolateCubehelixDefault", innerText: "CubehelixDefault" }, { value: "interpolateBuGn", innerText: "Blue-green" }, { value: "interpolateBuPu", innerText: "Blue-purple" }, { value: "interpolateGnBu", innerText: "Green-blue" }, { value: "interpolateOrRd", innerText: "Orange-red" }, { value: "interpolatePuBuGn", innerText: "Purple-blue-green" }, { value: "interpolatePuBu", innerText: "Purple-blue" }, { value: "interpolatePuRd", innerText: "Purple-red" }, { value: "interpolateRdPu", innerText: "Red-purple" }, { value: "interpolateYlGnBu", innerText: "Yellow-green-blue" }, { value: "interpolateYlGn", innerText: "Yellow-green" }, { value: "interpolateYlOrBr", innerText: "Yellow-orange-brown" }, { value: "interpolateYlOrRd", innerText: "Yellow-orange-red" }, { value: "interpolateRainbow", innerText: "Rainbow" }, { value: "interpolateSinebow", innerText: "Sinebow" } ]34:T746,addDataToChart = function(g) { // grey lines linking highest and lowest values for each country minMaxData.forEach(minMax => { g.selectAll(".euMinMax") .data(minMax) .enter() .append("line") .attr("stroke", "lightgrey") .attr("stroke-width", 10) .attr('x1', d => scatterX(d.country)) .attr('x2', d => scatterX(d.country)) .attr('y1', d => scatterY(d.max)) //lowest value of that country across all datasets .attr('y2', d => scatterY(d.min)); //highest value across all datasets }); // cities citiesData.forEach(plot => { g.selectAll(".cities") .data(plot) .enter() .append("circle") .filter(function(d) { // dont show separators or null values return d.value !== 0 && d.value !== null; }) .attr("cx", function(d) { return scatterX(d.name); }) .attr("cy", function(d) { return scatterY(d.value); }) .attr('r', 5) .attr('fill', "blue"); }); // towns/suburbs townsData.forEach(plot => { g.selectAll(".towns") .data(plot) .enter() .append("circle") .filter(function(d) { return d.value !== 0 && d.value !== null; }) .attr("cx", function(d) { return scatterX(d.name); }) .attr("cy", function(d) { return scatterY(d.value); }) .attr('r', 5) .attr('fill', "orange"); }); // rural areas ruralData.forEach(plot => { g.selectAll(".rural") .data(plot) .enter() .append("circle") .filter(function(d) { return d.value !== 0 && d.value !== null; }) .attr("cx", function(d) { return scatterX(d.name); }) .attr("cy", function(d) { return scatterY(d.value); }) .attr('r', 5) .attr('fill', "green"); }); }35:T747,function createSVGtext(config = {}) { //https://observablehq.com/@gallowayevan/svg-word-wrap let { text, x = 0, y = 0, fontSize = 18, fontStyle = "normal", fontWeight = "normal", fill = "#333", textAnchor = "left", maxCharsPerLine = 100, lineHeight = 1.3 } = config; if (width < 600) fontSize = 12; if (typeof config == "string") text = config; let svgText = document.createElementNS("http://www.w3.org/2000/svg", "text"); svgText.setAttributeNS(null, "x", x); svgText.setAttributeNS(null, "y", y); svgText.setAttributeNS(null, "font-size", fontSize); svgText.setAttributeNS(null, "font-style", fontStyle); svgText.setAttributeNS(null, "font-weight", fontWeight); svgText.setAttributeNS(null, "fill", fill); svgText.setAttributeNS(null, "text-anchor", textAnchor); let words = text.trim().split(/\s+/).reverse(), word, dy = 0, lineNumber = 0, line = []; while ((word = words.pop())) { line.push(word); let testLineLength = line.join(" ").length; if (testLineLength > maxCharsPerLine) { line.pop(); let svgTSpan = document.createElementNS( "http://www.w3.org/2000/svg", "tspan" ); svgTSpan.setAttributeNS(null, "x", x); svgTSpan.setAttributeNS(null, "dy", dy + "em"); let tSpanTextNode = document.createTextNode(line.join(" ")); svgTSpan.appendChild(tSpanTextNode); svgText.appendChild(svgTSpan); line = [word]; dy = lineHeight; } } let svgTSpan = document.createElementNS( "http://www.w3.org/2000/svg", "tspan" ); svgTSpan.setAttributeNS(null, "x", x); svgTSpan.setAttributeNS(null, "dy", dy + "em"); let tSpanTextNode = document.createTextNode(line.join(" ")); svgTSpan.appendChild(tSpanTextNode); svgText.appendChild(svgTSpan); return svgText; }36:T407,pieChartMapData = { //for each region, create object with each cause of death and its rate let pieData = []; let all = [ ...cancerDeathRate, ...circulatoryDeathRate, ...respiratoryDeathRate, ...totalDeathRate, ...centroids ]; let merged = mergeObjectsInArray(all, "id").map(o => { o.other = Math.round(o.total - o.cancer - o.circulatory - o.respiratory); return o; }); merged.filter(d => { let countryCode = d.id.substring(0, 2); if (!countryCode.includes("EU") && d.value !== null) { pieData.push( //pie chart data has to be an array of objects { id: d.id, name: d.name, geometry: d.geometry, total: d.total, data: [ { name: "Circulatory", value: d.circulatory }, { name: "Cancer", value: d.cancer }, { name: "Respiratory", value: d.respiratory }, { name: "Other", value: d.other } ] } ); return d; } }); return pieData; }37:T4e3,addPieChartLegend = function(map) { let title = map .append("text") .text("Most common causes of death, 2016") .attr("font-weight", "bold"); let circleX = mapConfig.width - 235; let labelX = circleX + 10; if (width < 600) { map.attr("font-size", 11); } // symbols map .append("circle") .attr("r", 5) .attr("fill", "#2E7AF9") .attr("transform", `translate(${circleX}, 20)`); map .append("circle") .attr("r", 5) .attr("fill", "orange") .attr("transform", `translate(${circleX}, 40)`); map .append("circle") .attr("r", 5) .attr("fill", "#A4CDF8") .attr("transform", `translate(${circleX}, 60)`); map .append("circle") .attr("r", 5) .attr("fill", "#FFCC80") .attr("transform", `translate(${circleX}, 80)`); // labels map .append("text") .text("Circulatory system disease") .attr("transform", `translate(${labelX}, 25)`); map .append("text") .text("Respiratory system disease") .attr("transform", `translate(${labelX}, 45)`); map .append("text") .text("Cancer") .attr("transform", `translate(${labelX}, 65)`); map .append("text") .text("Other") .attr("transform", `translate(${labelX}, 85)`); }38:[{"id":"5b9e0d4ad5b48c67aafe73f20a4fd9be582d63aa3ed68672879208c979de6db5dbeb0b122ecbc155fda4011084bd0dd6e6311780c3a3d380355bdf96bea2809e","href":"https://static.observableusercontent.com/files/5b9e0d4ad5b48c67aafe73f20a4fd9be582d63aa3ed68672879208c979de6db5dbeb0b122ecbc155fda4011084bd0dd6e6311780c3a3d380355bdf96bea2809e","name":"choropleth.jpg","type":"image/jpeg","lastModified":1603356062683.955,"size":899527},{"id":"1e19e099c04ed0899df47108b35d9e3a5ff8d2882d6581adb0e3155460bc5970c12bc8dcec00be822835f53e4aab3efe52de4776767c7d1ffbb696e513e33e08","href":"https://static.observableusercontent.com/files/1e19e099c04ed0899df47108b35d9e3a5ff8d2882d6581adb0e3155460bc5970c12bc8dcec00be822835f53e4aab3efe52de4776767c7d1ffbb696e513e33e08","name":"Life_expectancy_at_birth,_2018_(years,_by_NUTS_2_regions)_RYB20@1.png","type":"image/png","lastModified":1603290111836.295,"size":69065},{"id":"07b4226d948c05b423e4e98f4d51a143b34ac38b573d6bcb56da0486999f560b2a944f3d60572a470135425a175e9757393649d2daf6eff500fda82a929d1e91","href":"https://static.observableusercontent.com/files/07b4226d948c05b423e4e98f4d51a143b34ac38b573d6bcb56da0486999f560b2a944f3d60572a470135425a175e9757393649d2daf6eff500fda82a929d1e91","name":"health_perception.png","type":"image/png","lastModified":1603706591231.026,"size":39890}] 2f:{"title":"Statistics coded: Health statistics at regional level","cells":[{"id":0,"value":"html`

Statistics coded: Health statistics at regional level

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"html`This notebook aims to dynamically recreate the static visualizations shown in the \"Health statistics at regional level\" chapter of the publication Statistics Explained and focuses on providing explanations of the code used in order to encourage participation in the visualization of statistics and improve programming literacy. All the code is editable, so feel free to tinker, and fork this notebook to save your changes!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2623,"value":"html`This guide forms part of the wider initiative launched by Eurostat known as statistics coded.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md `## Contents`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"lifeExpectancy = html`

Life expectancy

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"html`

Ranked horizontal bar chart

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"html`The first visualization shown in Statistics Explained is a ranked horizontal bar chart showing life expectancy at birth for NUTS 2 regions. Here we will try to recreate this chart using d3.js.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"md`\n

Source: [Statistics Explained](https://ec.europa.eu/eurostat/statistics-explained/images/a/a4/Life_expectancy_at_birth%2C_2018_%28years%2C_by_NUTS_2_regions%29_RYB20.png)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":847,"value":"html`
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"preparingData = html`

Preparing the data

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"html`The following URL is used to request the dataset from the Eurostat database and was generated using the Eurostat query builder.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"data = await d3.json(\n `https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/demo_r_mlifexp?geoLevel=nuts2&sex=${gender}&unit=YR&age=Y_LT1&time=2018`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"html`The indexStat function is used to convert the raw response (data) of the Eurostat database into an array of objects sorted by value, each containing the properties 'id', 'name' and 'value'. Non-EU regions, along with regions without data (null) are omitted.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"indexStat = 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":true,"hidden":false,"mode":"ojs"},{"id":498,"value":"acceptedCountries = [\n \"IT\",\n \"ES\",\n \"FR\",\n \"DE\",\n \"RO\",\n \"BG\",\n \"LT\",\n \"HU\",\n \"BE\",\n \"CZ\",\n \"DK\",\n \"EE\",\n \"IE\",\n \"EL\",\n \"HR\",\n \"CY\",\n \"LV\",\n \"PL\",\n \"AT\",\n \"NL\",\n \"MT\",\n \"LU\",\n \"SI\",\n \"SK\",\n \"FI\",\n \"SE\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"lifeExpStats = indexStat(data)\n // filter to only include EU member states\n .filter((currentValue, i, arr) => {\n if (currentValue.value !== null) {\n let countryCode = currentValue.id.substring(0, 2);\n if (acceptedCountries.includes(countryCode)) {\n return currentValue;\n }\n }\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"html`This gives us a nicely formatted dataset for male life expectancy in the EU by NUTS2 regions. However, in order to replicate the chart shown in statistics explained, we must take the 10 objects that have the highest 'value' property, along with the 10 objects that have the lowest 'value' property, and merge them into a new array. We must also include the eu-27 average (which in this case is not included within the eurostat REST repsonse).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"top10 = lifeExpStats.slice(0, 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"bottom10 = lifeExpStats.slice(lifeExpStats.length - 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"html`In addition to the EU average, here we also add extra objects either side to act as 'buffers' in the chart in order to separate the EU bar from the top 10 and bottom 10 as seen in the original bar chart.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"eu27 = {\n let average;\n if (gender == \"M\") {\n average = 78.5;\n } else {\n average = 82;\n }\n return [\n { id: \"buffer1\", value: 0, name: \"\" },\n { id: \"EU27\", value: average, name: \"EU-27\" },\n { id: \"buffer2\", value: 0, name: \"\" }\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"md`So here is our final array of objects that we will use to build the graph...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"finalArray = [...top10, ...eu27, ...bottom10]","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"definingTheAxes = html`

Defining the axes

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`First, we must import d3.js into the notebook with the following line of code:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"html`Using d3, we then create the X and Y axis functions that will define the position and scale of the axes...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"x = d3\n .scaleLinear()\n .domain([0, d3.max(finalArray, d => d.value)])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"y = d3\n .scaleBand()\n .domain(d3.range(finalArray.length))\n .rangeRound([margin.top, height - margin.bottom])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 80, finalArray.format))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(\n d3\n .axisLeft(y)\n .tickFormat(i => {\n // avoid showing labels for our 'buffer' bars\n if (finalArray[i].value !== 0) {\n return finalArray[i].name + \" (\" + finalArray[i].id + \")\";\n } else {\n return \"\";\n }\n })\n .tickSizeOuter(0)\n )\n //remove 'buffer' ticks manually\n .selectAll(\".tick\")\n .each(function(d, i) {\n if (i == 10 || i == 12) {\n this.remove();\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"xTitle = g =>\n g\n .append(\"text\")\n .attr(\"font-size\", 15)\n .attr(\"font-weight\", \"bold\")\n .attr(\"y\", 15)\n .attr(\"x\", width / 2 - 30)\n .text(`Life expectancy at birth`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"format = x.tickFormat(20, lifeExpStats.format)","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"md`along with a few other configurations used for styling the chart: feel free to play around with them and see how the chart changes...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"margin = ({ top: 50, right: 0, bottom: 10, left: 210 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"barHeight = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"height = Math.ceil((finalArray.length + 0.1) * barHeight) +\n margin.top +\n margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"md`Now we are ready to generate the visualization as an SVG using d3.js and append the data and axes to it...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"drawingTheVisualization = html`

Drawing the chart

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"html`For a more in-depth tutorial on how to create bar charts using d3, and to fully understand the code used in the following visualization, I highly recommend reading this tutorial by Mike Bostock.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"html`The following radio buttons change the variable \"gender\", which is used in the request URL that we generated earlier. Due to the reactive nature of observablehq, all of the visualization's dependencies are reexecuted when the value of this variable changes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"viewof gender = radio({\n title: \"Gender\",\n description: \"\",\n options: [\n { label: 'Male', value: 'M' },\n { label: 'Female', value: 'F' }\n ],\n value: \"M\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"choropleth = html`

Choropleth map

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"html`The next visualization shown in statistics explained is a choropleth map illustrating life expectancy at 65 years of age by NUTS 2 regions. For the sake of this notebook and understanding the code involved, we will be creating this map from scratch. However I would highly recommend generating choropleth maps from Eurostat statistics using eurostat-map.js - a javascript library with an easy-to-use API which delivers out-of-the box functionality such as dynamic tooltips and data filtering when you hover over the legend. This tutorial will hopefully help you to understand the principles of building maps in d3.js, but in most cases, for practicality, you would build maps from eurostat statistics using eurostat-map.js.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"md`\n

Source: [Statistics Explained](https://ec.europa.eu/eurostat/statistics-explained/index.php?title=Health_statistics_at_regional_level#Life_expectancy)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"preparingChoroplethData = html`

Preparing the data

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"html`As in the previous example, we can retrieve the statistics we want directly from the eurostat database using the REST API, then build an array of objects as we did for the bar chart using the indexStat function we defined earlier.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"choroplethData = indexStat(\n await d3.json(\n `https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/demo_r_mlifexp?geoLevel=nuts2&sex=T&unit=YR&age=Y65&time=2018`\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":629,"value":"html`We can retrieve the NUTS geometries using the topojson files provided by NUTS2json...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"nutsTopojson = await d3.json(\n \"https://raw.githubusercontent.com/eurostat/Nuts2json/master/pub/v2/2016/3035/20M/2.json\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":637,"value":"html`Then we convert TopoJSON to GeoJSON using the topojson library so that d3.js can read the data. The reason why the geometries are originally in TopoJSON is because TopoJSON eliminates redundancy, allowing related geometries to be stored more efficiently in the same file, thus significantly reducing file size.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"topojson = require(\"topojson\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":639,"value":"nutsRegions = topojson.feature(nutsTopojson, nutsTopojson.objects.nutsrg)","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"nutsBorders = topojson.feature(nutsTopojson, nutsTopojson.objects.nutsbn)","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"nonEuRegions = topojson.feature(nutsTopojson, nutsTopojson.objects.cntrg)","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"graticule = topojson.feature(nutsTopojson, nutsTopojson.objects.gra)","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"usingD3Geo = html`

Using d3-Geo

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":995,"value":"html`First lets define some configuration values for our map. Feel free to play around with them:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"mapConfig = {\n return {\n width: Math.min(650, width),\n height: Math.min(550, width),\n background: \"white\" // use color sparingly when using data-driven color\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":667,"value":"html`In order to generate maps in d3, we utilize the d3-geo module which allows us define a projection function. As its name implies, the projection function projects spherical coordinate to the Cartesian plane. This is needed to display spherical geometry on a 2D screen.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"html`Our NUTS geometries dataset uses the European projection ETRS-LAEA, which can be drawn in d3 using the following definition:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"projection = d3\n .geoIdentity()\n .reflectY(true)\n // see https://github.com/d3/d3-geo#projection_fitExtent\n .fitExtent([[10, 10], [mapConfig.width, mapConfig.height]], nutsRegions)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1020,"value":"html`For an interactive example of the different projections available in d3, check out this notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1041,"value":"html`To render a map in d3, we need two things: a projection and a path generator. So now we define our path generator by simply passing our projection to it:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1043,"value":"geoPath = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1050,"value":"html`And voilà! We are ready to draw our NUTS geometries.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"drawingTheMap = html`

Drawing the map

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"html`In this notebook we will cover the basics, but for a full tutorial on making maps with d3 from scratch I recommend following this tutorial by Mike Bostock.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"html`There are a variety of ways to render two-dimensional geometry in a browser, but the two main standards are SVG and Canvas. D3 supports both. We’ll use SVG for this example because you can style SVG via CSS, and declarative styling is easier. To create the root SVG element:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1182,"value":"mapStep1 = html`

Step 1: Create root SVG

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1232,"value":"html`Due to following a tutorial format, we will be using various different root SVGs to show each step visually. Therefore we use a function to deliver us a new root SVG on demand:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":988,"value":"createRootSVG = function() {\n return d3\n .select(DOM.svg(mapConfig.width, mapConfig.height))\n .style(\"width\", mapConfig.width + \"px\")\n .style(\"height\", \"auto\")\n .style(\"background-color\", mapConfig.background)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1024,"value":"html`Now that we have our path generator, projection function and root SVG, we can start to add the building blocks of our map. Bear in mind that the drawing order in SVG follows the order in which you append elements. This means that the first element we append will appear behind the rest. With that in mind, lets start with a graticule...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1191,"value":"mapStep2 = html`

Step 2: Add a graticule

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"step2map = {\n let map = createRootSVG();\n addGraticule(map);\n return map.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1028,"value":"addGraticule = function(map) {\n map\n .append(\"g\")\n .selectAll(\"path\")\n .data(graticule.features)\n .enter()\n .append(\"path\")\n .attr(\"d\", geoPath)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"lightgrey\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1208,"value":"mapStep3 = html`

Step 3: Add external regions

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1104,"value":"html`To add external regions we can use the 'cntrg' object from the Nuts2Json file that we converted to GeoJSON earlier:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1077,"value":"step3map = {\n let map = createRootSVG();\n addGraticule(map);\n addExternalRegions(map);\n return map.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1131,"value":"addExternalRegions = function (map) {\n map\n .append(\"g\")\n .selectAll(\"path\")\n .data(nonEuRegions.features)\n .enter()\n .append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"none\")\n .attr(\"d\", geoPath);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1196,"value":"mapStep4 = html`

Step 4: Add NUTS regions

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1058,"value":"html`For now, lets add the NUTS geometries to the map with a simple white fill. We will add colour later.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"step4map = {\n let map = createRootSVG();\n addGraticule(map);\n addExternalRegions(map);\n addBlankNutsRegions(map);\n\n return map.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1122,"value":"addBlankNutsRegions = function(map) {\n map\n .append(\"g\")\n .selectAll(\"path\")\n .data(nutsRegions.features)\n .enter()\n .append(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", \"0.1\")\n .attr(\"d\", geoPath);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1225,"value":"mapStep5 = html`

Step 5: Add national borders

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"html`Next we add national borders and style them slightly differently to the regional borders.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1136,"value":"addNationalBorders = function(map) {\n map\n .append(\"g\")\n .selectAll(\"path\")\n .data(nutsBorders.features)\n .enter()\n .append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", d => {\n // filter by nuts level (0 is national)\n if (d.properties.lvl == 0) {\n return \"black\";\n }\n })\n .attr(\"stroke-width\", \"0.3\")\n .attr(\"d\", geoPath);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1236,"value":"html`So now we have a map that is starting to resemble the finished product...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"step5map = {\n let map = createRootSVG();\n addGraticule(map);\n addBlankNutsRegions(map);\n addExternalRegions(map);\n addNationalBorders(map);\n return map.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1142,"value":"html`The next step is arguably the most important: adding data-driven colour!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"mapStep6 = html`

Step 6: Add colour

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"html`The original map uses a threshold scale with six different shades of orange. We can replicate this by using d3's scale threshold and setting its domain to the values shown in the legend whilst setting its range to the six shades of orange. However, if we wish to present out data using a more varied range of colours, we can use d3-scale-chromatic which provides sequential, diverging and categorical colour schemes designed to work with d3-scale’s d3.scaleOrdinal and d3.scaleSequential. In the code block below, we define the colorScale as either threshold or sequential depending on a variable which is controlled using the radio buttons below. If sequential is selected, then you can also choose the colour scheme from the dropdown list.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"colorScale = {\n if (colorScaleSelector == \"threshold\") {\n return (\n d3\n .scaleThreshold()\n .domain([17, 18.5, 19.5, 20.5, 22])\n // try replacing this array of colours with 'd3.schemeBlues[6]' to use one of d3's colour palettes\n .range([\n \"#FFE4B9\",\n \"#FDCA79\",\n \"#FBB33E\",\n \"#F89D0E\",\n \"#F67C14\",\n \"#F45C19\"\n ])\n );\n } else if (colorScaleSelector == \"sequential\") {\n //colorScheme is chosen from the list of available schemes in d3-scale-chromatic using our dropdown\n return d3.scaleSequential(d3[colorScheme]).domain(\n // d3 extent scans our dataset and returns an array containing the max and min values\n d3.extent(choroplethData, function(d) {\n return d.value;\n })\n //.reverse() // to reverse the colour scale we can simple reverse the array that is specified in .domain()\n );\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":867,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1074,"value":"html`Now we can set the color of each region using whichever colour scale and scheme we have defined by using the function below. The only difference between this function and the one we used earlier (addBlankNutsRegions) is the fact that we now use a function to define the \"fill\" attribute of each SVG polygon individually.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1072,"value":"addColouredNutsRegions = function(map) {\n map\n .append(\"g\")\n .selectAll(\"path\")\n .data(nutsRegions.features)\n .enter()\n .append(\"path\")\n .attr(\"fill\", function(d) {\n // here we match the nuts geometry id with its corresponding id in our stats dataset\n // which gives us the statistical value for that region\n let region = choroplethData.find(x => x.id == d.properties.id);\n if (!region) {\n return \"grey\"; //no data\n } else {\n // then we use our colour scale to give us a colour based on its value\n return colorScale(region.value);\n }\n })\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", \"0.3\")\n .attr(\"d\", geoPath);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":859,"value":"viewof colorScaleSelector = radio({\n title: \"Colour scale\",\n description: \"\",\n options: [\n { label: 'Threshold', value: \"threshold\" },\n { label: 'Sequential', value: \"sequential\" }\n ],\n value: \"threshold\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"viewof colorScheme = select({\n title: \"Colour scheme\",\n description: \"For sequential colour scales only\",\n options: colorSchemes.map(scheme => {\n return { label: scheme.innerText, value: scheme.value };\n }),\n value: \"interpolateMagma\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"step6map = {\n let map = createRootSVG();\n addGraticule(map);\n addColouredNutsRegions(map);\n addExternalRegions(map);\n addNationalBorders(map);\n return map.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1325,"value":"html`Some of the colour schemes available in the dropdown are diverging, but please bear in mind that these are not suitable for the dataset we are using. This is because diverging colour schemes are best suited for datasets with meaningful 'midpoint' or 'mid-range' values, for example \"Population change\" would have a midpoint of 0, whereby the positive range (population increase) would have a different colour gradient to the negative range (population decrease). One way of making the dataset we are using suitable for a diverging colour scheme would be to establish the midpoint as the EU average - feel free to edit the code and give it a go!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1148,"value":"mapStep7 = html`

Step 7: Add a legend

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1273,"value":"html`Finally, in order to add a legend we will use d3 color legend and pass a few parameters to it...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1083,"value":"addLegend = function(map) {\n let legendWidth = 160;\n map\n .append(\"g\")\n .attr(\n // position the legend on the right side of the map\n \"transform\",\n \"translate(\" + (mapConfig.width - legendWidth - 10) + \" ,55)\"\n )\n .append(() =>\n // returns the d3 legend as a \"g\" element\n legend({\n color: colorScale,\n title: \"Life expectancy at 65\",\n width: legendWidth\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1279,"value":"step8map = {\n let map = createRootSVG();\n addGraticule(map);\n addColouredNutsRegions(map);\n addExternalRegions(map);\n addNationalBorders(map);\n addLegend(map);\n return map.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1283,"value":"html`... and there we have it! A configurable choropleth map showing life expectancy at 65 years across european regions.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2601,"value":"eurostatmapExample = html`

Eurostat-map.js

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2548,"value":"md`Now just to show you how easy this is with eurostat-map.js, here is an example of the same map but built with eurostat-map.js:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2558,"value":"md`First we import the npm package with:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2556,"value":"eurostatmap = require(\"eurostat-map@3.6.132\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2562,"value":"md`Then we simply generate an svg, assign it an id, and pass it to eurostat-map.js along with some map configuration so that it can do its magic...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2553,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":2552,"value":"eurostatmap\n .map(\"ch\")\n .svgId(\"eurostat-map\")\n .width(mapConfig.width)\n .title(\"Life expectancy at 65\")\n .subtitle(\"Years, by NUTS 2 regions, 2018\")\n .scale(\"20M\")\n .nutsLvl(2)\n .stat({\n eurostatDatasetCode: \"demo_r_mlifexp\",\n filters: { time: \"2018\", sex: \"T\", age: \"Y65\", unit: \"YR\" },\n unitText: \"years\"\n })\n .colorFun(d3.interpolateOranges)\n .classifMethod(\"threshold\")\n .threshold([17, 18.5, 19.5, 20.5, 22])\n\n .tooltipShowFlags(false)\n .legend({\n title: \"Years\",\n x: mapConfig.width - 190,\n y: 50\n })\n .build()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2596,"value":"html`You can find more examples of how to use eurostat-map.js in this notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"healthStatus = html`

Health status and healthcare

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"html`In this chapter of the publication we can find two distribution plot charts along with another choropleth map. Using the techniques seen previously in this notebook we will recreate them programatically.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"scatterPlotSection = html`

Scatter plot chart

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1953,"value":"html`In order to recreate this chart we need to generate six main components: The x and y axes, the gridlines across the chart, the data points, the grey lines representing the range of the data points for each country and the legend.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1941,"value":"md`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"preparingScatterData = html`

Preparing the data

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"html`Just like before, we generate a query to the eurostat database using the query builder tool. In this case we want to use the dataset code hlth_silc_18.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2089,"value":"citiesDataset = indexStat(\n await d3.json(\n \"https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/hlth_silc_18/?sex=T°_urb=DEG1&unit=PC&age=Y_GE16&levels=VG_G&time=2018\"\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2093,"value":"townsDataset = indexStat(\n await d3.json(\n \"https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/hlth_silc_18?sex=T°_urb=DEG2&unit=PC&age=Y_GE16&levels=VG_G&time=2018\"\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2097,"value":"ruralDataset = indexStat(\n await d3.json(\n \"https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/hlth_silc_18?sex=T°_urb=DEG3&unit=PC&age=Y_GE16&levels=VG_G&time=2018\"\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2006,"value":"html`In this case, we want to show EFTA, UK, Serbia and North Macedonia in the chart, so in order to keep them separate from the EU member states dataset we will create corresponding arrays for each. This will make it easier to add buffers between them along the x axis.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2166,"value":"memberStateData = html`
Member states
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1989,"value":"memberStates = [\n \"IT\",\n \"ES\",\n \"FR\",\n \"DE\",\n \"RO\",\n \"BG\",\n \"LT\",\n \"HU\",\n \"BE\",\n \"CZ\",\n \"DK\",\n \"EE\",\n \"IE\",\n \"EL\",\n \"HR\",\n \"CY\",\n \"LV\",\n \"PL\",\n \"AT\",\n \"NL\",\n \"MT\",\n \"LU\",\n \"SI\",\n \"SK\",\n \"FI\",\n \"SE\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1997,"value":"filterScatterData = function(data, type) {\n return data.filter((currentValue, i, arr) => {\n if (currentValue.value !== null) {\n let countryCode = currentValue.id.substring(0, 2);\n if (countryCode == \"DE\") {\n // removes 'until 1990 former territory of the FRG'\n currentValue.name = \"Germany\";\n }\n if (memberStates.includes(countryCode)) {\n return currentValue;\n }\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":956,"value":"membersCitiesPlotData = filterScatterData(citiesDataset)\n // buffer object\n .concat({\n id: 'separator1',\n value: 0,\n name: 'separator1'\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1426,"value":"membersTownsPlotData = filterScatterData(townsDataset)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1434,"value":"membersRuralPlotData = filterScatterData(ruralDataset)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2170,"value":"euAverageData = html`
EU averages
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2117,"value":"filterEuData = function(data) {\n return [...data].filter(c => {\n let countryCode = c.id.substring(0, 2);\n //ignore the EU values that we dont want\n if (countryCode == \"EU\" && c.id.substring(0, 4) !== \"EU28\") {\n return;\n } else if (c.id.substring(0, 4) == \"EU28\") {\n c.name = \"EU28\";\n return c;\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2051,"value":"euCitiesPlotData = filterEuData(citiesDataset)\n // add buffer object\n .concat({\n id: \"separator2\",\n value: 0,\n name: \"separator2\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2055,"value":"euTownsPlotData = filterEuData(townsDataset)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2057,"value":"euRuralPlotData = filterEuData(ruralDataset)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2174,"value":"eftaStateData = html`
EFTA
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2130,"value":"efta = [\"CH\", \"NO\", \"IS\", \"LI\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2125,"value":"filterEftaData = function(data) {\n return data.filter(c => {\n let countryCode = c.id.substring(0, 2);\n if (efta.includes(countryCode)) {\n return c;\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2062,"value":"eftaCitiesPlotData = filterEftaData(citiesDataset).concat({\n id: \"separator3\",\n value: 0,\n name: \"separator3\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2068,"value":"eftaTownsPlotData = filterEftaData(townsDataset)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2073,"value":"eftaRuralPlotData = filterEftaData(ruralDataset)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2177,"value":"ukData = html`
UK
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2185,"value":"filterUKData = function(data) {\n return data.filter(c => {\n let countryCode = c.id.substring(0, 2);\n if (countryCode == \"UK\") {\n return c;\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2187,"value":"ukCitiesPlotData = filterUKData(citiesDataset).concat({\n id: \"separator4\",\n value: 0,\n name: \"separator4\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2189,"value":"ukTownsPlotData = filterUKData(townsDataset)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2190,"value":"ukRuralPlotData = filterUKData(ruralDataset)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2205,"value":"othersData = html`
Others (candidate and potential candidate countries)
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2212,"value":"others = [\"RS\", \"MK\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2211,"value":"filterOthersData = function(data) {\n return data.filter(c => {\n let countryCode = c.id.substring(0, 2);\n if (others.includes(countryCode)) {\n return c;\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2221,"value":"othersCitiesPlotData = filterOthersData(citiesDataset)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2218,"value":"othersTownsPlotData = filterOthersData(townsDataset)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2216,"value":"othersRuralPlotData = filterOthersData(ruralDataset)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1531,"value":"html`In order to replicate the grey areas in the original chart, linking the highest and the lowest values of each country, we must create a new array of objects containing the highest and lowest values of each country across all three datasets:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2139,"value":"getPlotMinMax = function(cities, towns, rural) {\n let maxMinPerCountry = [];\n\n cities.forEach(country => {\n let citiesValue = country.value;\n\n let townsValue;\n towns.map(a => {\n if (country.name == a.name) {\n townsValue = a.value;\n }\n });\n\n let ruralValue;\n rural.map(a => {\n if (a.name == country.name) {\n ruralValue = a.value;\n }\n });\n let max = Math.max(citiesValue, townsValue, ruralValue);\n let min = Math.min(citiesValue, townsValue, ruralValue);\n\n maxMinPerCountry.push({\n country: country.name,\n max,\n min\n });\n });\n return maxMinPerCountry;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1510,"value":"membersMinMax = getPlotMinMax(\n membersCitiesPlotData,\n membersTownsPlotData,\n membersRuralPlotData\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2145,"value":"euMinMax = getPlotMinMax(euCitiesPlotData, euTownsPlotData, euRuralPlotData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2147,"value":"eftaMinMax = getPlotMinMax(\n eftaCitiesPlotData,\n eftaTownsPlotData,\n eftaRuralPlotData\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2151,"value":"ukMinMax = getPlotMinMax(ukCitiesPlotData, ukTownsPlotData, ukRuralPlotData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2200,"value":"othersMinMax = getPlotMinMax(othersCitiesPlotData, othersTownsPlotData, othersRuralPlotData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1671,"value":"drawingScatterChart = html`
Building the chart
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1675,"value":"html `First, lets define our root SVG and the margins to apply to our chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1820,"value":"createScatterSvg = function() {\n let svg = d3\n .create(\"svg\")\n .attr(\"height\", width / 1.255)\n .attr(\"width\", width);\n\n //for smaller devices\n if (width < 600) {\n svg.attr(\"font-size\", 11);\n }\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1688,"value":"scatterMargins = ({ top: 80, right: 5, bottom: 100, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1695,"value":"html `Using these margins, lets define our chart space`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1823,"value":"scatterHeight =\n +width / 1.255 - scatterMargins.top - scatterMargins.bottom;","pinned":true,"hidden":false,"mode":"ojs"},{"id":1826,"value":"scatterWidth = +width - scatterMargins.left - scatterMargins.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":1681,"value":"html`Now lets define our axes functions:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2227,"value":"domainX = {\n let domain = [];\n let plots = [\n euCitiesPlotData,\n membersCitiesPlotData,\n ukCitiesPlotData,\n eftaCitiesPlotData,\n othersCitiesPlotData\n ];\n plots.forEach(plot => {\n plot.map(function(d) {\n domain.push(d.name);\n });\n });\n\n return domain;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1832,"value":"scatterX = d3\n .scaleBand()\n .rangeRound([0, scatterWidth])\n .padding(0.1)\n .domain(domainX)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1835,"value":"scatterY = d3\n .scaleLinear()\n .rangeRound([0, scatterHeight])\n .domain([90, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1838,"value":"scatterYAxis = d3.axisLeft(scatterY).tickFormat(d => d + \"%\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":1841,"value":"scatterXAxis = d3.axisBottom(scatterX).tickFormat((d, i) => {\n // hide the labels of our separator objects\n if (!d.includes(\"separator\")) {\n return d;\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1736,"value":"html`Now lets add some gridlines to our chart by generating new axes and setting their width to cover the width of the chart.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1844,"value":"xGridlines = d3.axisTop(scatterX);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1847,"value":"yGridlines = d3.axisLeft(scatterY).ticks(9);","pinned":true,"hidden":false,"mode":"ojs"},{"id":2017,"value":"addGridlines = function(g) {\n g.append(\"g\")\n .call(yGridlines.tickSize(-scatterWidth).tickFormat(\"\"))\n .selectAll('line')\n .attr(\"stroke\", \"lightgrey\");\n g.append(\"g\")\n .attr(\"transform\", \"translate(0,\" + scatterHeight + \")\")\n .call(xGridlines.tickSize(scatterHeight).tickFormat(\"\"))\n .selectAll('line')\n .attr(\"stroke\", \"lightgrey\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1755,"value":"html`Next we add our axes on top of our gridlines...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1904,"value":"addAxes = function(g) {\n g.append(\"g\")\n .call(scatterYAxis)\n .append(\"text\")\n .attr(\"transform\", \"rotate(-90)\")\n .attr(\"y\", 6)\n .attr(\"dy\", \"0.71em\")\n .attr(\"text-anchor\", \"end\");\n g.append(\"g\")\n .attr(\"transform\", \"translate(0,\" + scatterHeight + \")\")\n .call(scatterXAxis)\n .selectAll(\"text\")\n .attr(\"y\", 0)\n .attr(\"x\", -10)\n .attr(\"dy\", \"-10\")\n .attr(\"transform\", \"rotate(-90)\")\n .style(\"text-anchor\", \"end\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1869,"value":"html`Now all that's left is to append our data to the chart then add a legend and a title...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2259,"value":"citiesData = [\n euCitiesPlotData,\n membersCitiesPlotData,\n ukCitiesPlotData,\n eftaCitiesPlotData,\n othersCitiesPlotData\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2263,"value":"townsData = [\n euTownsPlotData,\n membersTownsPlotData,\n ukTownsPlotData,\n eftaTownsPlotData,\n othersTownsPlotData\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2268,"value":"ruralData = [\n euRuralPlotData,\n membersRuralPlotData,\n ukRuralPlotData,\n eftaRuralPlotData,\n othersRuralPlotData\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2277,"value":"minMaxData = [euMinMax,membersMinMax,ukMinMax,eftaMinMax,othersMinMax]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1873,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":2328,"value":"addLegendToScatter = function(g) {\n // symbols\n g.append(\"circle\")\n .attr(\"r\", 5)\n .attr(\"fill\", \"blue\")\n .attr(\"transform\", `translate(50, ${scatterHeight - 145})`);\n g.append(\"circle\")\n .attr(\"r\", 5)\n .attr(\"fill\", \"orange\")\n .attr(\"transform\", `translate(50, ${scatterHeight - 125})`);\n g.append(\"circle\")\n .attr(\"r\", 5)\n .attr(\"fill\", \"green\")\n .attr(\"transform\", `translate(50, ${scatterHeight - 105})`);\n\n // labels\n g.append(\"text\")\n .text(\"Cities\")\n .attr(\"transform\", `translate(60, ${scatterHeight - 140})`);\n g.append(\"text\")\n .text(\"Towns / suburbs\")\n .attr(\"transform\", `translate(60, ${scatterHeight - 120})`);\n g.append(\"text\")\n .text(\"Rural areas\")\n .attr(\"transform\", `translate(60, ${scatterHeight - 100})`);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1888,"value":"html`To add the title, we are using the function 'createSVGtext' borrowed from this notebook, which handles text wrapping.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1882,"value":"addTitleToScatterPlot = function (svg) {\n svg.node().appendChild(\n createSVGtext({\n text: \"People who perceive their own health as good or very good, 2018\",\n x: 35,\n y: 30,\n fontSize: 18,\n fill: \"black\",\n fontWeight: \"bold\",\n maxCharsPerLine: 65\n })\n );\n svg.node().appendChild(\n createSVGtext({\n text: \"%, share of population aged ≥ 16 years, by degree of urbanisation\",\n x: 35,\n y: 50,\n fontSize: 15,\n fontStyle: \"italic\",\n maxCharsPerLine: 65\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2319,"value":"finalResult = md`
Final result
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1925,"value":"html`and there we have it! a replica of the scatter plot shown in the publication, but generated using d3.js:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"scatterPlot = {\n let scatterSvg = createScatterSvg();\n let chart = scatterSvg\n .append(\"g\")\n .attr(\n \"transform\",\n \"translate(\" + scatterMargins.left + \",\" + scatterMargins.top + \")\"\n );\n addGridlines(chart);\n addAxes(chart);\n addDataToChart(chart);\n addLegendToScatter(chart);\n addTitleToScatterPlot(scatterSvg);\n\n return scatterSvg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1602,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2346,"value":"causesOfDeath = html`
Causes of Death
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2351,"value":"html`The first visualization shown in this section can be described as a 'map of pie charts', whereby each pie slice represents a cause of death and the size of the pie represents the standdardized death rate per 100 000 inhabitants. To build this visualization, we're going to need a map, so lets use some functions we've already described in this notebook first...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2355,"value":"basicMap = {\n let map = createRootSVG();\n addGraticule(map);\n addBlankNutsRegions(map);\n addExternalRegions(map);\n addNationalBorders(map);\n return map.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2487,"value":"mapOfPie = md`
Map of pie charts
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2360,"value":"md`Now lets add some pie charts!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2375,"value":"preparingPieData = md`
Preparing the data
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2634,"value":"html`Lets request the datasets of each cause of death and then merge them together into a single array, before generating a pie chart for each region...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2396,"value":"html`standardized death rates attributed to diseases of the circulatory system per 100 000 inhabitants:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2394,"value":"circulatoryDeathRate = indexStat(\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":true,"hidden":false,"mode":"ojs"},{"id":2398,"value":"html`standardized death rates attributed to cancer (malignant neoplasms) per 100 000 inhabitants:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2401,"value":"cancerDeathRate = indexStat(\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=C`\n )\n).map((d) => {\n d.cancer = d.value;\n return d;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2402,"value":"html`standardized death rates attributed to diseases of the respiratory system per 100 000 inhabitants:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2404,"value":"respiratoryDeathRate = indexStat(\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=J`\n )\n).map((d) => {\n d.respiratory = d.value;\n return d;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2406,"value":"html`all causes of death (needed to scale the sizes of the pie charts and calculate the shares):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2408,"value":"totalDeathRate = indexStat(\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=A-R_V-Y`\n )\n).map((d) => {\n d.total = d.value;\n return d;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2425,"value":"html`Apart from statistical data, we also need to load the centroids of each region in order to position the pie charts. These can be retrieved using the nuts2json API...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2428,"value":"centroidsData = (\n await fetch(\n `https://raw.githubusercontent.com/eurostat/Nuts2json/master/pub/v2/2016/3035/nutspt_1.json`\n )\n).json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2431,"value":"centroids = centroidsData.features.map((c) => {\n c.id = c.properties.id;\n return c;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2475,"value":"html`Now lets merge all of the datasets together in a format suitable for generating pie charts (an array of objects for each region)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2391,"value":"function mergeObjectsInArray(array, property) {\n const newArray = new Map();\n array.forEach((item) => {\n const propertyValue = item[property];\n newArray.has(propertyValue) ? newArray.set(propertyValue, { ...item, ...newArray.get(propertyValue) }) : newArray.set(propertyValue, item);\n });\n return Array.from(newArray.values());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2392,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":2373,"value":"pieFunctions = md`
Defining pie functions
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2452,"value":"html`Here we define the functions that will help us build the pie slices and scale the size of the pie charts.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2378,"value":"pie = d3\n .pie()\n .sort(null)\n .value(d => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2380,"value":"arc = d3.arc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2377,"value":"radiusFunction = d3\n .scaleSqrt()\n .domain(d3.extent(totalDeathRate.map(r => r.value)))\n .range([5, 10]) // here we set minimum and maximum pie radius","pinned":true,"hidden":false,"mode":"ojs"},{"id":2384,"value":"md`Colour classes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2387,"value":"sectorColor = function(value) {\n if (value == \"Cancer\") {\n return \"#A4CDF8\";\n } else if (value == \"Circulatory\") {\n return \"#2E7AF9\";\n } else if (value == \"Respiratory\") {\n return 'orange';\n } else if (value == \"Other\") {\n return '#FFCC80';\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2443,"value":"buildingPie = md`
Building the pie charts
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2442,"value":"addPieChartsToMap = function (map) {\n // Create segments for each region\n pieChartMapData.forEach((region) => {\n if (region.geometry) {\n let x = projection(region.geometry.coordinates)[0];\n let y = projection(region.geometry.coordinates)[1];\n let arcs = pie(region.data);\n map\n .append(\"g\")\n .attr(\"transform\", \"translate(\" + x + \",\" + y + \")\")\n .attr(\"stroke\", \"white\")\n .selectAll(\"path\")\n .data(arcs)\n .join(\"path\")\n .attr(\"fill\", (d) => sectorColor(d.data.name))\n .attr(\n \"d\",\n d3.arc().innerRadius(0).outerRadius(radiusFunction(region.total))\n )\n .append(\"title\")\n // title visible when hovering the slices - here we could add a tooltip instead\n .text((d) => `${d.data.name}: ${d.data.value}`);\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2504,"value":"html`Now lets add a simple legend. For how to add a circle-size legend and the EU-27 averages, check out this notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2493,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2532,"value":"finalPie = html`
Final result
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2448,"value":"pieChartMap = {\n let map = createRootSVG();\n addGraticule(map);\n addBlankNutsRegions(map);\n addExternalRegions(map);\n addNationalBorders(map);\n addPieChartsToMap(map);\n addPieChartLegend(map);\n return map.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2368,"value":"html`The rest of the remaining maps and charts shown in the original article should now be easy to replicate using the techniques we have been through in this notebook. Feel free to fork this notebook and give them a try!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"dependencies = md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"html`d3.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"html`topojson`","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"import { radio, slider, select } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}