2e:null 2f:["$","title",null,{"children":"Statistics coded: Labour market statistics at regional level | Joe Davies | Observable"}] 34:T420,eurostatmap .map("ch") // ch = choropleth .svgId("map1") // this will be the id of our svg .nutsLvl(2) .insets("default") // show overseas regions using the default styling .classifMethod("threshold") .threshold([50, 65, 70, 73, 80]) //the values of each class, the original map has 75 but 73 is more meaningful as it is the EU average .colors(["#F45C19", "#F37E15", "#F79E0E", "#F9CB80", "#7799D6", "#3E6AB3"]) //the colours of each class // here we define the eurostat dataset we want to use, and its filters. // See https://github.com/eurostat/eurostat-map.js/blob/master/docs/reference.md#eurostat-database for more details .stat({ eurostatDatasetCode: "lfst_r_lfe2emprtn", filters: { citizen: "TOTAL", time: "2018", unit: "PC", isced11: "TOTAL", age: "Y20-64" }, unitText: "% of people aged 20-64 years" }) //add a legend .legend({ x: 10, y: 180, title: "%", labelDecNb: 0 }) //add a title .title("Employment rate, 2019") .titleFontSize(20) .build()35:T5e4,eurostatmap .map("ch") // ch = choropleth .svgId("map1a") // this will be the id of our svg .nutsLvl(2) .insets("default") // show overseas regions .classifMethod("threshold") .threshold([50, 65, 70, 75, 80]) .colors(["#F45C19", "#F37E15", "#F79E0E", "#F9CB80", "#7799D6", "#3E6AB3"]) // here we define the eurostat dataset we want to use, and its filters. // See https://github.com/eurostat/eurostat-map.js/blob/master/docs/reference.md#eurostat-database for more details .stat({ eurostatDatasetCode: "lfst_r_lfe2emprtn", filters: { citizen: "TOTAL", sex: "T", time: "2019", unit: "PC", isced11: "TOTAL", age: "Y20-64" }, unitText: "% of people aged 20-64 years" }) //add a legend .legend({ x: 10, y: 140, title: "EU-27 = 73.0", labelDecNb: 0, shapeWidth: 25, sepLineLength: 28, titleFontSize: 11 }) //add a title .title("Employment rate, 2019") .titleFontSize(20) //add a subtitle .subtitle("%, share of people aged 20-64 years, by NUTS 2 regions") .subtitleFontWeight(100) //sea color .seaFillStyle("#E6F7FE") //NUTS border colours .nutsbnStroke({ 0: "black", //NUTS 0 1: "black", //NUTS 1 2: "black", //NUTS 2 co: "black" // Coast }) .nutsbnStrokeWidth({ 0: 1, //NUTS 0 1: 0.2, //NUTS 1 2: 0.2, //NUTS 2 co: 1 // Coast }) //replicate the insets from the PDF map .insets(insetConfig1a) .insetBoxPosition([620, 10]) .build()36:T78d,insetConfig1a = { // this config is used to replicate the inset maps seen in the PDF maps. For more info visit https://github.com/eurostat/eurostat-map.js/blob/master/docs/reference.md#insets let h = 81.26; let w = 71.81; let s = 70; // inset size let p = 4; //inset padding let config = [ { geo: "IC", x: 0, y: 0, width: w, height: h, pixSize: 8000, drawGraticule: false, title: "Canarias (ES)" }, { geo: "GP", x: w + p, y: 0, width: w, height: h, title: "Guadeloupe (FR)" }, { geo: "MQ", x: 0, y: h + p, width: w, height: h, title: "Martinique (FR)" }, { geo: "GF", x: w + p, y: h + p, width: w, height: h, pixSize: 7000, title: "Guyane (FR)" }, { geo: "RE", x: 0, y: 2 * h + 2 * p, width: w, height: h, title: "Réunion (FR)" }, { geo: "YT", x: w + p, y: 2 * h + 2 * p, width: w, height: h, title: "Mayotte (FR)" }, { geo: "MT", x: 0, y: 3 * h + 3 * p, width: w, height: h, title: "Malta" }, { geo: "PT20", x: w + p, y: 3 * h + 3 * p, width: w, height: h, pixSize: 8000, drawGraticule: false, title: "Açores (PT)" }, { geo: "PT30", x: 0, y: 4 * h + 4 * p, width: w, height: h, title: "Madeira (PT)" }, { geo: "LI", x: w + p, y: 4 * h + 4 * p, width: w, height: h, title: "Liechtenstein" } ]; config.forEach(c => { (c.frameStroke = "grey"), (c.frameStrokeWidth = 1), (c.titleFontSize = 8.78), (c.titleFontFamily = "Arial"), (c.titlePosition = [2, 11]), (c.titleFontWeight = 100); }); return config; }37:T60c,map2 = eurostatmap .map("ch") // ch = choropleth .svgId("map2") // id of our svg .nutsLvl(2) .insets("default") // show overseas regions .classifMethod("threshold") .threshold([40, 50, 59.1, 65, 75]) //values of the classes .colors(["#F37E15", "#F79E0E", "#F9CB80", "#D0D9F2", "#7799D6", "#3E6AB3"]) //colours of the classes // here we define the eurostat dataset we want to use, and its filters. // See https://github.com/eurostat/eurostat-map.js/blob/master/docs/reference.md#eurostat-database for more details .stat({ eurostatDatasetCode: "lfst_r_lfe2emprtn", filters: { citizen: "TOTAL", time: "2019", unit: "PC", isced11: "TOTAL", age: "Y55-64" }, unitText: "% of people aged 55-64 years" }) //add a legend .legend({ x: 10, y: 140, title: "EU-27 = 59.1", labelDecNb: 1, shapeWidth: 25, sepLineLength: 28, titleFontSize: 11 }) //add a title .title("Employment rate of older persons, 2019") .titleFontSize(20) //add a subtitle .subtitle("%, share of people aged 55-64 years, by NUTS 2 regions") .subtitleFontWeight(100) //sea color .seaFillStyle("#E6F7FE") //NUTS border colours .nutsbnStroke({ 0: "black", //NUTS 0 1: "black", //NUTS 1 2: "black", //NUTS 2 co: "black" // Coast }) .nutsbnStrokeWidth({ 0: 1, //NUTS 0 1: 0.2, //NUTS 1 2: 0.2, //NUTS 2 co: 1 // Coast }) //replicate the insets from the PDF map .insets(insetConfig2) .insetBoxPosition([620, 10]) .build()38:T78c,insetConfig2 = { // this config is used to replicate the inset maps seen in the PDF maps. For more info visit https://github.com/eurostat/eurostat-map.js/blob/master/docs/reference.md#insets let h = 81.26; let w = 71.81; let s = 70; // inset size let p = 4; //inset padding let config = [ { geo: "IC", x: 0, y: 0, width: w, height: h, pixSize: 8000, drawGraticule: false, title: "Canarias (ES)" }, { geo: "GP", x: w + p, y: 0, width: w, height: h, title: "Guadeloupe (FR)" }, { geo: "MQ", x: 0, y: h + p, width: w, height: h, title: "Martinique (FR)" }, { geo: "GF", x: w + p, y: h + p, width: w, height: h, pixSize: 7000, title: "Guyane (FR)" }, { geo: "RE", x: 0, y: 2 * h + 2 * p, width: w, height: h, title: "Réunion (FR)" }, { geo: "YT", x: w + p, y: 2 * h + 2 * p, width: w, height: h, title: "Mayotte (FR)" }, { geo: "MT", x: 0, y: 3 * h + 3 * p, width: w, height: h, title: "Malta" }, { geo: "PT20", x: w + p, y: 3 * h + 3 * p, width: w, height: h, pixSize: 8000, drawGraticule: false, title: "Açores (PT)" }, { geo: "PT30", x: 0, y: 4 * h + 4 * p, width: w, height: h, title: "Madeira (PT)" }, { geo: "LI", x: w + p, y: 4 * h + 4 * p, width: w, height: h, title: "Liechtenstein" } ]; config.forEach(c => { (c.frameStroke = "grey"), (c.frameStrokeWidth = 1), (c.titleFontSize = 8.78), (c.titleFontFamily = "Arial"), (c.titlePosition = [2, 11]), (c.titleFontWeight = 100); }); return config; }39:T5a8,map3 = eurostatmap .map("ch") // ch = choropleth .svgId("map3") // id of our svg .nutsLvl(1) .classifMethod("threshold") .threshold([5, 10, 15.1, 20, 40]) //values of the classes .colors( ["#b2182b", "#ef8a62", "#fddbc7", "#d1e5f0", "#67a9cf", "#2166ac"].reverse() ) // here we define the eurostat dataset we want to use, and its filters. // See https://github.com/eurostat/eurostat-map.js/blob/master/docs/reference.md#eurostat-database for more details .stat({ eurostatDatasetCode: "lfst_r_lfu3rt", filters: { sex: "T", time: "2019", unit: "PC", age: "Y15-24" }, unitText: "% of people aged 15-24 years" }) //add a legend .legend({ x: 10, y: 140, title: "EU-27 = 15.1", labelDecNb: 1, shapeWidth: 25, sepLineLength: 28, titleFontSize: 11 }) //add a title .title("Youth unemployment rate, 2019") .titleFontSize(20) //add a subtitle .subtitle("%, share of labour force aged 15-24, by NUTS 2 regions") .subtitleFontWeight(100) //sea color .seaFillStyle("#E6F7FE") //NUTS border colours .nutsbnStroke({ 0: "black", //NUTS 0 1: "black", //NUTS 1 2: "black", //NUTS 2 co: "black" // Coast }) .nutsbnStrokeWidth({ 0: 0.3, //NUTS 0 1: 0, //NUTS 1 2: 0, //NUTS 2 co: 0.3 // Coast }) //replicate the insets from the PDF map .insets(insetConfig3) .insetBoxPosition([620, 10]) .build()3a:T9b8,insetConfig3 = { // this config is used to replicate the inset maps seen in the PDF maps. For more info visit https://github.com/eurostat/eurostat-map.js/blob/master/docs/reference.md#insets let s = 80; // inset size let p = 4; //inset padding let config = [ { geo: "IC", x: 0, y: 0, width: s, height: s, pixSize: 8000, drawGraticule: false, title: "Canarias (ES)", titleFontSize: 9, titlePosition: [3, 11], titleFontWeight: 100 }, { geo: "GP", x: s + p, y: 0, width: s, height: s, title: "Guadeloupe (FR)", titleFontSize: 9, titlePosition: [3, 11], titleFontWeight: 100 }, { geo: "MQ", x: 0, y: s + p, width: s, height: s, title: "Martinique (FR)", titleFontSize: 9, titlePosition: [3, 11], titleFontWeight: 100 }, { geo: "GF", x: s + p, y: s + p, width: s, height: s, pixSize: 7000, title: "Guyane (FR)", titleFontSize: 9, titlePosition: [3, 11], titleFontWeight: 100 }, { geo: "RE", x: 0, y: 2 * s + 2 * p, width: s, height: s, title: "Réunion (FR)", titleFontSize: 9, titlePosition: [3, 11], titleFontWeight: 100 }, { geo: "YT", x: s + p, y: 2 * s + 2 * p, width: s, height: s, title: "Mayotte (FR)", titleFontSize: 9, titlePosition: [3, 11], titleFontWeight: 100 }, { geo: "MT", x: 0, y: 3 * s + 3 * p, width: s, height: s, title: "Malta", titleFontSize: 9, titlePosition: [3, 11], titleFontWeight: 100 }, { geo: "PT20", x: s + p, y: 3 * s + 3 * p, width: s, height: s, pixSize: 8000, drawGraticule: false, title: "Açores (PT)", titleFontSize: 9, titlePosition: [3, 11], titleFontWeight: 100 }, { geo: "PT30", x: 0, y: 4 * s + 4 * p, width: s, height: s, title: "Madeira (PT)", titleFontSize: 9, titlePosition: [3, 11], titleFontWeight: 100 }, { geo: "LI", x: s + p, y: 4 * s + 4 * p, width: s, height: s, title: "Liechtenstein", titleFontSize: 9, titlePosition: [3, 11], titleFontWeight: 100 } ]; return config; }3b:T537,viewof colorScheme = colorInterpolatorPicker({ title: "Color ramp", height: 300, value: "Oranges", interpolators: [ { name: "BrBG" }, { name: "PRGn" }, { name: "PiYG" }, { name: "PuOr" }, { name: "RdBu" }, { name: "RdGy" }, { name: "RdYlBu" }, { name: "RdYlGn" }, { name: "Spectral" }, { name: "Blues" }, { name: "Greens" }, { name: "Greys" }, { name: "Oranges" }, { name: "Purples" }, { name: "Reds" }, { name: "Viridis" }, { name: "Inferno" }, { name: "Magma" }, { name: "Plasma" }, { name: "Cool" }, { name: "CubehelixDefault" }, { name: "BuGn" }, { name: "BuPu" }, { name: "GnBu" }, { name: "OrRd" }, { name: "PuBuGn" }, { name: "PuBu" }, { name: "PuRd" }, { name: "RdPu" }, { name: "YlGnBu" }, { name: "YlGn" }, { name: "YlOrBr" }, { name: "YlOrRd" }, { name: "Rainbow" }, { name: "Sinebow" }, { name: "Turbo" } ] })3c:[{"id":"2f17e3ab5b40b4dba94918e724daf7e0ffd0b0fc2b80fc345f43d71723f01b0f09a82563ad31da30d45979467f5edf6fc73a25a2c6e598389e2e3ff5ce6ab2ae","href":"https://static.observableusercontent.com/files/2f17e3ab5b40b4dba94918e724daf7e0ffd0b0fc2b80fc345f43d71723f01b0f09a82563ad31da30d45979467f5edf6fc73a25a2c6e598389e2e3ff5ce6ab2ae","name":"employment.jpg","type":"image/jpeg","lastModified":1613397549708.943,"size":134715}] 32:{"id":"d3f92e5bfa89e275","slug":"statistics-coded-labour-market-statistics-at-regional-lev","title":"Statistics coded: Labour market statistics at regional level","thumbnail":"96c2566b18f0e6c6ca9043cb91a81d82539cc34f73a66e79fd9c1f27c7e18abc","access_level":"public","create_time":"$D2021-02-11T14:19:01.524Z","update_time":"$D2022-02-27T17:41:12.878Z","view_time":null,"first_public_time":"$D2021-02-17T15:14:51.598Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"25fee90bb47fd709","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":"starter_2024"},"version":871,"publish_version":871,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc51b4f7240f0553","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":null}],"members":[{"type":"individual","id":"dc51b4f7240f0553","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Statistics coded: Labour market statistics at regional level","cells":[{"id":0,"value":"html`

Statistics coded: Labour market statistics at regional level

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"html`This notebook focuses on the choropleth maps shown in the publication Statistics Explained: Labour market statistics at regional level and will show you how to recreate them using javascript in 3 simple steps. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"html`We will recreate the maps using a javascript library developed by GISCO called eurostat-map.js, which can also be used to create a number of other different types of maps, such as those shown below. For more info and examples, check out this notebook!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"html`\n

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`## Contents`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"html`\n

\nEmployment rates\n
- People aged 20-64
- People aged 55-64
\n
\nUnemployment rates\n
- Youth unemployment
- Long-term unemployment
\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"unemploymentRates = md`## Employment rates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"employment = md`### Employment rate of people aged 20-64`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"html`The first map shows employment rate of people aged 20-64...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`\n

Source: [Statistics Explained](https://ec.europa.eu/eurostat/statistics-explained/images/thumb/3/3e/Employment_rate%2C_2019_%28%25%2C_share_of_people_aged_20-64_years%2C_by_NUTS_2_regions%29_RYB20.jpg/500px-Employment_rate%2C_2019_%28%25%2C_share_of_people_aged_20-64_years%2C_by_NUTS_2_regions%29_RYB20.jpg)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"html`Lets turn this static map into an interactive web map...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"step1 = md`### Step 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"html`First, lets import the library into the notebook:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"eurostatmap = require(\"eurostat-map@3.3.5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"step2 =md`### Step 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"html`Next, lets create an SVG which will act as the container for our map. We will be creating more SVGs later on for other maps, so lets make a function which generates them and assigns them an id of our choosing:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"createSvg = function(id) {\n return html``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"step3 =md`### Step 3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"html`Now all thats left to do is to define our map configuration using eurostat-map, whilst passing it the id of the svg we created using the function we just defined. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"html`and bob's your uncle! we have our first interactive, statistical web map. But we're not finished yet...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"createSvg(\"map1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"html`Try exploring the dataset by hovering your mouse over the different classes in the legend and over different regions on the map.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"md`### Replicating the styling of the original map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"html`The map we just made is using the default styling of eurostat-map, which isn't the same as the PDF map in the publication. To bring them more in line, let's make the same map but change the sea colour, the inset maps, the legend, the colour of the NUTS boundaries and add a subtitle...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"html`Now it looks more like the original!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"createSvg(\"map1a\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"html`Feel free to play around with these settings an personalize your own map. For more information on how to define different kinds of maps, take a look at the documentation of eurostat-map: https://github.com/eurostat/eurostat-map.js.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"employmentOlder = md`### Employment rate of people aged 55-64`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"html`Map 3 shows the employment rate of older persons in 2019, by NUTS 2 regions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"html`Using the same technique as before, lets turn the static map seen in the article into an interactive web map. We can just copy and paste the code used for the previous map, then adjust the configuration accordingly... `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"createSvg(\"map2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"md`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"unemployment = md`## Unemployment Rates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"youthUnemployment = md`### Youth unemployment`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"html`Now lets recreate the map showing the youth (people aged 15-24 years) unemployment rate in the EU, but this time lets add an extra class and change the colour scheme...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"html`Bear in mind that diverging colour schemes should have meaningful midpoints (such as an average in order to show above or below-average regions, or a zero in order to distinguish positive and negative values). In this case, the EU average was 15.1, so that will be the value in the middle of the threshold array when we configure our map. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"createSvg(\"map3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"longtermUnemployment = md`### Long-term unemployment`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"html`Now lets recreate the map showing the percentage of unemployed persons (aged 15-74 years) who had been without work for at least 12 months in 2019, but this time, lets use a colour scheme from d3-scale-chromatic.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"html`To use the colour schemes, we first need to import them... `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"d3 = require(\"d3-scale-chromatic\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"html`Then we can specify the colour scheme we want to use by using the \"colorFun\" method. For example ourMap.colorFun(d3.interpolateOranges). Use the dropdown below to flick between them.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"createSvg(\"map4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"map4 = eurostatmap\n .map(\"ch\") // ch = choropleth\n .svgId(\"map4\") // id of our svg\n .nutsLvl(1)\n .insets(\"default\") // show overseas regions\n .classifMethod(\"threshold\")\n .threshold([20, 30, 40, 50]) //values of the classes\n .colorFun(colorScheme) // here we can specify a d3-scale-chromatic colour-scheme function\n\n // here we define the eurostat dataset we want to use, and its filters.\n // See https://github.com/eurostat/eurostat-map.js/blob/master/docs/reference.md#eurostat-database for more details\n .stat({\n eurostatDatasetCode: \"lfst_r_lfu2ltu\",\n filters: {\n sex: \"T\",\n time: \"2019\",\n unit: \"PC_UNE\",\n age: \"Y15-74\"\n },\n unitText: \"% of people aged 15-74 years\"\n })\n\n //add a legend\n .legend({\n x: 10,\n y: 180,\n title: \"%\",\n labelDecNb: 0\n })\n\n //add a title\n .title(\"Long-term unemployment share, 2019\")\n .titleFontSize(20)\n\n //sea color\n .seaFillStyle(\"#E6F7FE\")\n\n .build()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"html`Feel free to use eurostat-map in your projects and let us know if you have any comments or suggestions!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"md`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"md`### Notebook Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"colorSchemes = [\n { name: \"Turbo\", f: \"interpolateTurbo\" },\n { name: \"Cividis\", f: \"interpolateCividis\" },\n { name: \"Magma\", f: \"interpolateMagma\" },\n { name: \"Reds\", f: \"interpolateReds\" },\n { name: \"Purples\", f: \"interpolatePurples\" },\n { name: \"Oranges\", f: \"interpolateOranges\" },\n { name: \"Greens\", f: \"interpolateGreens\" },\n { name: \"Blues\", f: \"interpolateBlues\" },\n { name: \"Greys\", f: \"interpolateGreys\" },\n { name: \"Purple-Orange\", f: \"interpolatePuOr\" },\n { name: \"Red-Blue\", f: \"interpolateRdBu\" },\n { name: \"Red-Yellow-Blue\", f: \"interpolateRdYlBu\" },\n { name: \"Red-Yellow-Green\", f: \"interpolateRdYlGn\" },\n { name: \"Brown-Green\", f: \"interpolateBrBG\" },\n { name: \"Pink-Green\", f: \"interpolatePiYG\" },\n { name: \"Purple-Green\", f: \"interpolatePRGn\" },\n { name: \"Yellow-Red\", f: \"interpolateYlOrRd\" },\n { name: \"Spectral\", f: \"interpolateSpectral\" },\n { name: \"'Cool'\", f: \"interpolateCool\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"import { viewof colorInterpolatorPicker } from '@zechasault/color-schemes-and-interpolators-picker'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"import { select, button } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 33:"$32:body"