2c:null 2d:["$","title",null,{"children":"Hello, eurostat-map | Joe Davies | Observable"}] 32:Ta2d,insetConfigClassic = { // 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 = 100; // 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: 12, titlePosition: [3, 11], titleFontWeight: 100 }, { geo: "GP", x: s + p, y: 0, width: s, height: s, title: "Guadeloupe (FR)", titleFontSize: 12, titlePosition: [3, 11], titleFontWeight: 100 }, { geo: "MQ", x: 0, y: s + p, width: s, height: s, title: "Martinique (FR)", titleFontSize: 12, titlePosition: [3, 11], titleFontWeight: 100 }, { geo: "GF", x: s + p, y: s + p, width: s, height: s, pixSize: 7000, title: "Guyane (FR)", titleFontSize: 12, titlePosition: [3, 11], titleFontWeight: 100 }, { geo: "RE", x: 0, y: 2 * s + 2 * p, width: s, height: s, title: "Réunion (FR)", titleFontSize: 12, titlePosition: [3, 11], titleFontWeight: 100 }, { geo: "YT", x: s + p, y: 2 * s + 2 * p, width: s, height: s, title: "Mayotte (FR)", titleFontSize: 12, titlePosition: [3, 11], titleFontWeight: 100 }, { geo: "MT", x: 0, y: 3 * s + 3 * p, width: s, height: s, title: "Malta", titleFontSize: 12, 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: 12, titlePosition: [3, 11], titleFontWeight: 100 }, { geo: "PT30", x: 0, y: 4 * s + 4 * p, width: s, height: s, title: "Madeira (PT)", titleFontSize: 12, titlePosition: [3, 11], titleFontWeight: 100 }, { geo: "LI", x: s + p, y: 4 * s + 4 * p, width: s, height: s, title: "Liechtenstein", titleFontSize: 12, titlePosition: [3, 11], titleFontWeight: 100 } ]; config.forEach((inset) => { inset.frameStrokeWidth = 1; inset.frameStroke = "grey"; }); return config; }33:T439,rankedBarChart = { const map = eurostatmap .map("choropleth") .svgId("ranked-bar-chart") .title("Ranked bar chart example") .subtitle("GDP per inhabitant, country level (NUTS0)") .scale("60M") .nutsLevel(0) .stat("value", { eurostatDatasetCode: "nama_10r_3gdp", unitText: "euro per inhabitant", filters: { TIME: "2021", UNIT: "EUR_HAB" } }) .encoding("fill", { stat: "value" }) .numberOfClasses(6) .colors(["#E3E8F0", "#BBD8E5", "#93C7CF", "#5FA7B5", "#27758E", "#003C50"]) .colorSchemeType("discrete") .classificationMethod("quantile") // .legend({ // x: 600, // y: 20, // width: 200, // title: "GDP per inhabitant", // boxOpacity: 0.9 // }) .rankedBarChart({ //svgId: "bar-chart-panel", // x: 10, // y: 10, height: 500, ascending: true, title: "Ranked: GDP per inhabitant", subtitle: "EU member states only", countryGroup: "eu" }) //.insets("default") //.zoomExtent([1, 10]) .build(); return map; }34:T67e,spain = eurostatmap //you can also apply map settings by passing an object: .map("choropleth", { title: "Productivity in Spain", projectionFunction: spainProjection, titleFontSize: 20, subtitle: "GDP per inhabitant, 2022", svgId: "spain", //position: { x: 3050000, y: 1990000, z: 2000 }, //see https://github.com/eurostat/eurostat-map.js/blob/master/docs/reference.md#map-geography nutsLevel: 3, scale: "10M", stat: { eurostatDatasetCode: "nama_10r_3gdp", unitText: "Euro per inhabitant", filters: { TIME: "2021", UNIT: "EUR_HAB" } }, titlePosition: [15, 27], subtitlePosition: [15, 47], insetBoxPosition: [5, 550], insets: [ { geo: "IC", projectionFunction: null, //force it to use default (EPSG3035) geoCenter: [420000, 3170000], pixSize: 3100, width: 170, height: 90, title: "Canary islands", titleFontSize: 12, titleFontWeight: "", frameStroke: "grey", frameStrokeWidth: "0.3px" } ], legend: { labelDecNb: 0, x: 10, y: 70, boxOpacity: 0, boxPadding: 7, title: "Euro per inhabitant", titleFontSize: 16, shapeWidth: 30, shapeHeight: 20, sepLineLength: 30, noData: true, showMinMax: true, titlePadding: 0 } }) .labelValuesFontSize(16) .classificationMethod("threshold") .thresholds([20000, 22000, 24000, 26000, 28000, 30000, 34000]) .minimap({ x: 705, y: 570, z: 200, highlightIds: ["ES"], color: "steelblue" }) .colors(d3.schemeBlues[9].slice(1)) .build()35:T6ef,world2 = { let map = eurostatmap .map("flow") .proj("4326") .geo("WORLD") .svgId("world2") .height(500) .drawGraticule(true) .projectionFunction( d3 .geoAzimuthalEquidistant() .rotate([-10, -30]) .scale(130) .translate([260, 210]) ) //.drawGraticule(true) .width(width) .flowGraph({ nodes: [ { id: "FR" }, { id: "US" }, { id: "ZA" }, { id: "BR" }, { id: "CA" }, { id: "CN" }, { id: "SA" }, { id: "AR" }, { id: "AU" }, { id: "IN" }, { id: "JP" }, { id: "NZ" } ], links: [ { source: "FR", target: "US", value: 82018369 }, { source: "FR", target: "ZA", value: 49697198 }, { source: "FR", target: "BR", value: 45422327 }, { source: "FR", target: "CA", value: 43038180 }, { source: "FR", target: "CN", value: 34453478 }, { source: "FR", target: "SA", value: 16164188 }, { source: "FR", target: "AR", value: 12673336 }, { source: "FR", target: "AU", value: 7178656 }, { source: "FR", target: "IN", value: 6305366 }, { source: "FR", target: "JP", value: 5883790 }, { source: "FR", target: "NZ", value: 5883790 } ] }) .flowMinWidth(5) .flowMaxWidth(35) .flowColor("#7bab79") .flowOpacity(1) .flowArrows(true) .flowStack(false) .flowWidthGradient(true) .flowCurvatureSettings({ gapX: 0, // how far before/after node to begin/end curve padX: 0, // horizontal clearance near node stems padY: 0, // vertical collision detection padding bumpY: 0, // extra height for hop curvature: curvature }) .build(); return map; }36:Ta08,worldData = ({ JM: 70, JO: 24, JP: 35, KE: 93, KG: 92, KH: 39, KI: 36, KM: 30, KN: 25, KP: 14, KR: 26, KW: 30, KY: 62, KZ: 33, LA: 10, LB: 13, LC: 64, LI: 20, LK: 33, MT: 72, MU: 62, MV: 18, MW: 32, MX: 30, MY: 20, MZ: 37, NA: 29, NC: 56, NE: 48, NF: 94, NG: 85, NI: 31, NL: 27, AD: 61, AE: 72, AF: 79, AG: 87, AI: 43, AL: 13, AM: 54, AO: 10, AQ: 24, AR: 43, AS: 97, AT: 31, AU: 10, AW: 91, LS: 46, LT: 22, LU: 74, LV: 59, LY: 49, MA: 53, MC: 69, MD: 49, MG: 90, MH: 91, MK: 21, ML: 55, MM: 75, MN: 62, MO: 76, MP: 38, MR: 71, MS: 52, HR: 81, HT: 37, HU: 64, ID: 10, IE: 65, IL: 7, IM: 4, XI: 9, XL: 99, XM: 38, XN: 12, XO: 28, XU: 99, XV: 92, YE: 10, ZA: 79, ZM: 58, ZW: 24, RS: 47, ME: 97, BL: 53, SS: 50, LR: 98, BA: 4, EL: 33, TF: 45, PH: 13, RO: 47, RU: 46, RW: 56, SA: 72, SB: 26, SC: 38, SD: 27, SE: 60, SG: 86, SH: 48, SI: 17, SK: 78, SL: 96, SM: 76, SN: 57, SO: 55, SR: 64, ST: 64, SV: 29, SY: 4, SZ: 25, TC: 19, TD: 8, TG: 97, TH: 45, TJ: 80, TK: 86, TL: 62, TM: 15, TN: 46, TO: 98, TR: 14, TT: 91, TV: 94, TZ: 69, UA: 51, UG: 90, UM: 65, ET: 56, FI: 49, FJ: 50, FK: 18, FM: 3, FO: 17, FR: 96, GA: 55, UK: 42, GD: 33, GE: 89, GG: 40, GH: 12, GI: 52, GL: 17, GM: 60, GN: 45, GQ: 70, GS: 10, GT: 88, GU: 12, GW: 44, GY: 49, HK: 86, VA: 96, HM: 7, HN: 20, NO: 33, NP: 52, NR: 27, NU: 43, NZ: 57, OM: 55, PA: 6, PE: 93, PF: 67, PG: 96, PK: 39, PL: 26, PM: 20, PN: 70, PR: 33, PS: 59, PT: 99, PW: 31, PY: 88, QA: 9, AZ: 26, BB: 70, BD: 20, BE: 52, BF: 17, BG: 89, BH: 75, BI: 25, BJ: 52, BM: 43, BN: 78, BO: 15, BR: 24, BS: 32, BT: 10, BV: 74, BW: 6, BY: 8, BZ: 10, CA: 41, CC: 94, CD: 99, CF: 81, CG: 5, CH: 37, CI: 10, CK: 1, CL: 52, CM: 14, CN: 65, CO: 63, CP: 84, CR: 5, CU: 19, CV: 30, CX: 40, CY: 58, CZ: 89, DE: 83, DJ: 60, DK: 63, DM: 44, DO: 73, DZ: 40, EC: 83, EE: 29, EG: 53, EH: 51, ER: 83, ES: 86, IN: 4, IO: 19, IQ: 26, IR: 60, IS: 87, IT: 29, JE: 82, SJ: 34, US: 6, UY: 49, UZ: 87, VC: 80, VE: 19, VG: 57, VI: 46, VN: 14, VU: 29, WF: 87, WS: 32, XA: 79, XB: 96, XC: 21, XD: 37, XE: 84, XF: 3, XG: 27, XH: 60, BQ: 84, CW: 26, SX: 45 })37:Tab3,propSymbolsMap = { let map = eurostatmap .map("ps") .dorling(dorling) .svgId("map4") .scale("20M") .nutsLevel(nutsLevelProp) .title("GDP, 2021") .subtitle("by NUTS " + nutsLevelProp + " regions") //GDP per inhabitant as color .stat("color", { eurostatDatasetCode: "nama_10r_3gdp", unitText: "EUR/inhabitant", filters: { unit: "EUR_HAB", time: "2021" } }) // total GDP as size .stat("size", { eurostatDatasetCode: "nama_10r_3gdp", unitText: "Million EUR", filters: { unit: "MIO_EUR", time: "2021" } }) //data-driven colour configuration .psClassificationMethod("threshold") .psThresholds([20000, 30200, 40000, 50000]) .psColors(["#A1AEE3", "#7C90D6", "#586FC5", "#3551AD", "#15246B"]) .psFill("steelblue"); // eurostat-map uses a muted version of psFill to set the color of the regions with data // configure map according to selected symbol type if (symbol !== euroSVG) { map .psShape(symbol) .psMaxSize(maxSize) .psMinSize(3) //pixel size .psFillOpacity(1) //.psSpikeWidth(3) //.psStroke("black") .legend({ x: 580, sizeLegend: { title: "Total GDP (million EUR)", labelOffset: { x: 45, y: 0 }, labelFormat: d3.format(",.2r"), cellNb: symbol == "circle" ? 3 : 2, values: [1000, 1000000], shapeStroke: "#000" }, colorLegend: { title: "GDP per inhabitant (EUR)", labelFormat: (label) => label == 30200 ? "30200 (EU average)" : label, marginTop: symbol == "circle" ? 40 : 70 }, legendSpacing: 50 }); } else if (symbol == euroSVG) { map // Search https://materialdesignicons.com/ for examples and simply copy and paste the "d" attribute of the SVG here. .psCustomSVG(euroSVG) .psMaxSize(maxSize / 10) .psMinSize(1) //minSize/maxsize for customPaths indicates scale() value, not pixel size .psFillOpacity(0.9) .psOffset({ x: -9, y: -10 }) .psStroke("black") .psStrokeWidth(10) //legend config .legend({ x: 580, ascending: false, boxPadding: 15, sizeLegend: { title: "Total GDP (million EUR)", cellNb: 3, shapePadding: maxSize, //titlePadding: -60, //shapeOffset: { x: 0, y: -maxSize / 2 }, //labelOffset: { x: 70, y: -maxSize / 2 }, labelFormat: d3.format(",.2r") }, colorLegend: { title: "GDP per inhabitant (EUR)", labelFormat: d3.format(",.2r"), marginTop: 100 } }); } return map.build(); }38:T6e6,pieMap = { const cropOptions = [ { value: "C1110", text: "Common wheat and spelt" }, { value: "C1500", text: "Grain maize and corn-cob mix" }, { value: "C1300", text: "Barley" }, { value: "C1600", text: "Triticale" }, { value: "C1200", text: "Rye and winter cereal mixtures (maslin)" }, { value: "C1120", text: "Durum wheat" }, { value: "C1410", text: "Oats" }, { value: "C2000", text: "Rice" } ]; const map = eurostatmap .map("pie") .dorling(true) //prevent overlapping .svgId("pie") .title("Cereal production") .subtitle("") .scale("60M") .nutsLevel(2) //.dorling(true) .geoCenter([5000000, 3500000]) .statPie({ eurostatDatasetCode: "apro_cpshr", filters: { strucpro: "HPRD_HUMD_EU_THS_T", time: "2022" }, unitText: "1 000 tonnes", categoryParameter: "crops", //parameter that the categories belong to categoryCodes: cropOptions.map((d) => d.value), //category codes categoryLabels: cropOptions.map((d) => d.text), //category labels // categoryColors: [ // "#7fc97f", // "#beaed4", // "#fdc086", // "#ffff99", // "#386cb0", // "#f0027f", // "#bf5b17", // "#666666" // ], //colours categoryTotal: "C0000" //code for the total (all causes of death) }) .pieOtherColor("#FFCC80") .pieOtherText("Other") .pieMinRadius(6) .noDataFillStyle("#e5e5e5") .legend({ x: 480, y: 10, boxOpacity: 1, titleFontWeight: "bold", sizeLegend: { title: "1 000 tonnes", titlePadding: 10, values: [5, 6000] }, colorLegend: { title: "Cereal type" } }); map.build(); return map; }39:T7be,flowmap = eurostatmap .map("flow") .svgId("flow") .width(800) .scale("60M") .title("French Exports") .subtitle("Top 10 European importers of goods from France in 2022") .flowGraph({ nodes: [ { id: "FR" }, { id: "DE" }, { id: "IT" }, { id: "ES" }, { id: "BE" }, { id: "NL" }, { id: "CH" }, { id: "PL" }, { id: "PT" }, { id: "AT" }, { id: "CZ" } ], links: [ { source: "FR", target: "DE", value: 82018369.72 }, { source: "FR", target: "IT", value: 49697198.92 }, { source: "FR", target: "ES", value: 45422327.56 }, { source: "FR", target: "NL", value: 34453478.99 }, { source: "FR", target: "CH", value: 16164188.98 }, { source: "FR", target: "PL", value: 12673336.04 }, { source: "FR", target: "PT", value: 7178656.08 }, { source: "FR", target: "AT", value: 6305366.1 }, { source: "FR", target: "CZ", value: 5883790.49 }, { source: "FR", target: "BE", value: 43038180.93 } ] }) .flowArrows(false) .flowOpacity(1) .flowColor("#65a061") .flowCurvatureSettings({ gapX: 10, // how far before/after node to begin/end curve padX: 2, // horizontal clearance near node stems padY: 2, // vertical collision detection padding bumpY: 1, // extra height for hop curvature: 0.5 // 0..1; default sankey smoothness }) .nutsLevel(0) .legend({ x: 10, y: 120, boxOpacity: 0, barChart: false, flowWidthLegend: { title: "Trade (€)", titlePadding: 25, values: [25000000, 80000000] }, regionColorLegend: { title: " " } }) .drawCoastalMargin(false) .insets(false) .labels({ values: true, backgrounds: false, shadows: true, valuesFormatter: (value) => new Intl.NumberFormat("en-GB", { notation: "compact", compactDisplay: "short" // 'long' gives "1.2 thousand" }).format(value) }) .zoomExtent([1, 10]) .build()3a:T74e,eurostatmap .map("sparkline") .svgId("sparklines") .width(900) .height(760) .title("Regional unemployment trends") .subtitle("% of people aged 15-74 unemployed, 2015–2024") .nutsLevel(2) .statSpark({ eurostatDatasetCode: "lfst_r_lfu3rt", filters: { isced11: "TOTAL", sex: "T", age: "Y15-74", unit: "PC" }, dates: [ "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024" ], labels: [ "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024" ] }) .sparkType("line") .sparkLineOffsets({ x: 10, y: -15 }) .sparkLineWidth(24) .sparkLineHeight(16) .sparkLineStrokeWidth(1.2) .sparkLineOpacity(0.85) .sparkLineColor((_value, _index, data) => { const first = data[0]?.value; const last = data[data.length - 1]?.value; if (first == null || last == null) return "#9ca3af"; const delta = last - first; if (delta > 3) return "#b91c1c"; if (delta > 0) return "#ef4444"; if (delta > -3) return "#3b82f6"; return "#1d4ed8"; }) .sparkTooltipChart({ width: 220, height: 120, margin: { left: 35, right: 10, top: 8, bottom: 45 }, circleRadius: 1.5 }) .legend({ title: "Unemployment rate (%)", x: 650, y: 110, noData: true, scaleLegend: { xAxisRotation: -60, xAxisTickStep: 1, showMaxRegion: true, showExampleChart: true }, colorLegend: { show: true, title: "Change 2015–2024 (%)", items: [ { color: "#b91c1c", label: "> +3%" }, { color: "#ef4444", label: "0 to +3%" }, { color: "#3b82f6", label: "0 to −3%" }, { color: "#1d4ed8", label: "< −3%" } ] } }) .showSourceLink(true) .build()3b:T824,coxcombConfigs = ({ death: { title: "Causes of death", subtitle: "2022", nutsLevel: 0, sizeLegend: { title: "Total deaths", titlePadding: 15 //values: [20000, 700000] }, colorLegend: { title: "Cause of death", marginTop: 50, noData: false }, data: { stat: { eurostatDatasetCode: "hlth_cd_mro", filters: { age: "TOTAL", unit: "NR", sex: "T", resid: "TOT_RESID" }, unitText: "Deaths per 100k" }, timeParameter: "TIME", times: [ "2022-01", "2022-02", "2022-03", "2022-04", "2022-05", "2022-06", "2022-07", "2022-08", "2022-09", "2022-10", "2022-11", "2022-12" ], categoryParameter: "ICD10", categoryCodes: ["U071", "C", "I"], categoryLabels: ["COVID-19", "Cancer", "Circulatory"], categoryColors: [ "#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e", "#e6ab02" ], totalCode: "TOTAL" } }, tourism: { title: "Tourism", subtitle: "Nights spent in tourist accomodation, 2022", nutsLevel: 0, sizeLegend: { title: "Total nights spent", titlePadding: 15 //values: [10000000, 400000000] }, colorLegend: { title: "Country of residence", marginTop: 40 }, data: { stat: { eurostatDatasetCode: "tour_occ_nim", filters: { unit: "NR", c_resid: "TOTAL", nace_r2: "I551-I553" }, unitText: "Nights spent" }, timeParameter: "TIME", times: [ "2022-01", "2022-02", "2022-03", "2022-04", "2022-05", "2022-06", "2022-07", "2022-08", "2022-09", "2022-10", "2022-11", "2022-12" ], categoryParameter: "c_resid", categoryCodes: ["DOM", "FOR"], categoryLabels: ["Domestic", "Foreign"], categoryColors: ["#1b9e77", "#d95f02"], totalCode: "TOTAL" } } })3c:Ta9c,gridCartogramMap = { if (gridCartogramType == "choropleth") { return eurostatmap .map("choropleth") .gridCartogram(true) .gridCartogramShape(gridCartogramShape) .svgId("grid-cartogram-map") .title("Grid cartogram") .subtitle("ensures each region gets equal visual attention") .classificationMethod("threshold") .thresholds([10000, 20000, 30200, 40000, 50000, 60000]) .stat({ eurostatDatasetCode: "nama_10r_3gdp", unitText: "euro per inhabitant", filters: { TIME: "2022", UNIT: "EUR_HAB" } }) .nutsLevel(0) .legend({ x: 0, y: 90, title: "Euro per inhabitant", labels: [ 10000, 20000, "30200 (EU average) ", 40000, 50000, 60000 ].reverse() }) .bottomText(false) .build(); } else if (gridCartogramType == "bivariateChoropleth") { return eurostatmap .map("bivariateChoropleth") .gridCartogram(true) .gridCartogramShape(gridCartogramShape) .svgId("grid-cartogram-map") .title("Unemployment and population density") .subtitle("Inhabitants per km and % unemployed, 2022") .nutsLevel(0) .nutsYear(2016) .stat("v1", { eurostatDatasetCode: "demo_r_d3dens", unitText: "inh./km²", filters: { time: 2022 } }) .stat("v2", { eurostatDatasetCode: "lfst_r_lfu3rt", filters: { age: "Y20-64", sex: "T", unit: "PC", time: 2022 }, unitText: "%" }) .legend({ squareSize: 100, label1: "Inhabitants per km²", label2: "% unemployed", showBreaks: true, x: 10, y: 410, boxOpacity: 0 }) .bottomText(false) .build(); } else if (gridCartogramType == "stripeComposition") { return eurostatmap .map("stripeComposition") .gridCartogram(true) .gridCartogramShape(gridCartogramShape) .svgId("grid-cartogram-map") .nutsLevel(0) .stripeWidth(12) .statComp( { eurostatDatasetCode: "agr_r_animal", filters: { unit: "THS_HD", time: "2023" }, unitText: "1000 heads" }, "animals", ["A2000", "A2300", "A2400", "A3100", "A4100", "A4200"], ["bovines", "cows", "buffalos", "pigs", "sheeps", "goats"], ["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#386cb0", "#f0027f"] ) .title("European livestock composition (2023)") .legend({ x: 10, y: 150, title: "Animals", boxOpacity: 0.8, boxFill: "white" }) .bottomText(false) .build(); } }3d:T511,annotationsData = { return [ { note: { label: "158 500 per inhabitant", title: "South-West Ireland", wrap: 150, align: "middle" }, connector: { end: "arrow" // 'dot' also available }, x: 107, y: 326, dy: -90, dx: -10 }, { note: { label: "Changed connector type to 'curve'", title: "annotationLabel", wrap: 150 }, type: "annotationCallout", connector: { end: "dot", type: "curve", //can also add a curve type, e.g. curve: d3.curveStep points: [ [120, 14], [190, 52] ] }, x: 370, y: 100, dy: 120, dx: 240 }, { //below in makeAnnotations has type set to d3.annotationLabel //you can add this type value below to override that default type: "annotationCalloutCircle", note: { label: "Different annotation type", title: "annotationCalloutCircle", wrap: 290 }, //settings for the subject, in this case the circle radius subject: { radius: 40 }, x: 310, y: 560, dy: 50, dx: -1 } ].map(function (d) { d.color = "#E8336D"; return d; }); }3e:Ta5b,hatchingMap = { const map = eurostatmap .map("ct") .scale("60M") .svgId("hatching-map") .title("EU / EFTA / Candidate countries") .subtitle("Countries by membership status") .nutsLevel("mixed") .classToFillStyle({ eu: "#6e91d3", cc: "#eda87b", efta: "#34aaaa", pc: "#e78ac3" }) .classToText({ efta: "EFTA", eu: "EU", cc: "Candidate", pc: "Potential Candidate" }) .patternFill([ { pattern: "hatching", regionIds: [ "AT", "BE", "HR", "CY", "EE", "FI", "FR", "DE", "EL", "IE", "IT", "LV", "LT", "LU", "MT", "NL", "PT", "SK", "SI", "ES" ], legendLabel: "Eurozone", color: "#000", strokeWidth: 0.7 }, { pattern: "dots", regionIds: [ "AT", "BE", "CZ", "DK", "EE", "FI", "FR", "DE", "EL", "HU", "IS", "IT", "LV", "LI", "LT", "LU", "MT", "NL", "NO", "PL", "PT", "SK", "SI", "ES", "SE", "CH", "HR" ], legendLabel: "Schengen Area", color: "black", strokeWidth: 1.3 } // { // customPattern: ` // // `, // regionIds: ["BY"], // legendLabel: "Custom Red Circles" // } ]) .legend({ x: 580, y: 90, labelFontSize: 14, shapeWidth: 20, shapeHeight: 18, noData: false }); map.statData().setData({ AT: "eu", BE: "eu", BG: "eu", HR: "eu", CY: "eu", CZ: "eu", DK: "eu", EE: "eu", FI: "eu", FR: "eu", DE: "eu", EL: "eu", HU: "eu", IE: "eu", IT: "eu", LV: "eu", LT: "eu", LU: "eu", MT: "eu", NL: "eu", PL: "eu", PT: "eu", RO: "eu", SK: "eu", SI: "eu", ES: "eu", SE: "eu", AL: "cc", BA: "cc", GE: "cc", MD: "cc", ME: "cc", MK: "cc", RS: "cc", TR: "cc", UA: "cc", XK: "pc", IS: "efta", LI: "efta", NO: "efta", CH: "efta" }); map.build(); return map; }3f:[{"id":"02122334f49d723a63a9cc98d81b075c017182bcd5afc58b32a3720df838bd260ec43bcfc3539e673661d632a65ab2adb7f1fbf9ddbe4a44d33da8da5124a08b","href":"https://static.observableusercontent.com/files/02122334f49d723a63a9cc98d81b075c017182bcd5afc58b32a3720df838bd260ec43bcfc3539e673661d632a65ab2adb7f1fbf9ddbe4a44d33da8da5124a08b","name":"eurostat-map-logo.png","type":"image/png","lastModified":1760010803568.059,"size":851746},{"id":"b3adfc9b688d0394c3d032c2c9e71f85d3e0b1b2f0a20073614ff7a8a0142e6dc0eee3a513af9e13005ad2da8e62621068169e68356b8ea6d97b56cc755481d5","href":"https://static.observableusercontent.com/files/b3adfc9b688d0394c3d032c2c9e71f85d3e0b1b2f0a20073614ff7a8a0142e6dc0eee3a513af9e13005ad2da8e62621068169e68356b8ea6d97b56cc755481d5","name":"eurostat-map-logo@1.png","type":"image/png","lastModified":1760010929751.955,"size":512098}] 30:{"id":"5d04eefdf4ac3f23","slug":"eurostat-map-js","title":"Hello, eurostat-map","thumbnail":"98a2607109f4900fa641edaf50f413e45a56156274dec625184594aa39223cf1","access_level":"public","create_time":"$D2020-02-04T11:15:55.882Z","update_time":"$D2026-08-05T09:08:17.357Z","view_time":null,"first_public_time":"$D2020-02-06T08:41:38.449Z","has_unpublished_edits":null,"fork":false,"stars":59,"starred":false,"owner":{"type":"team","id":"25fee90bb47fd709","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":"starter_2024","bio":"Data Visualization & GIS at Eurostat. Exploring new ways of making maps.\n"},"version":3146,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc51b4f7240f0553","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":null,"bio":"Data Visualization & GIS at Eurostat. Exploring new ways of making maps.\n"}],"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":32,"collection":{"id":"61012ff757d99a0b","slug":"eurostat","title":"Eurostat","owner":{"id":"25fee90bb47fd709","login":"joewdavies","name":"Joe Davies"}},"type":"notebook","body":{"titling":"auto","title":"Hello, eurostat-map","cells":[{"id":0,"value":"md`# Hello, eurostat-map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"html`Eurostat-map is a JavaScript library which allows you to quickly create and customise thematic web maps.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2868,"value":"eurostatMapLogo1 = {\n const img = await FileAttachment(\"eurostat-map-logo@1.png\").image();\n img.width = width / 2; // in pixels\n // or: img.height = 100;\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"md`Using the [Eurostat REST API](https://ec.europa.eu/eurostat/web/user-guides/data-browser/api-data-access/api-getting-started), or your own CSV data, it allows you to generate the following thematic map types:\n - **[Choropleth](#choropleth)**\n - **[Proportional symbols](#proportionalSymbols) **\n - **[Proportional pie charts](#proportionalPieCharts) **\n - **[Flow maps](#flowMaps) **\n - **[Bivariate choropleth](#bivariate)** \n - **[Stripe composition](#stripeComposition) **\n - **[Sparklines](#sparklines) **\n - **[Coxcomb (Polar area)](#coxcomb)**\n - **[Categorical](#categorical)**\n - **[Grid Cartograms](#gridCartograms)**\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md`It also allows you to add:\n - **[Annotations](#annotations)**\n - **[Stamps](#stamps)**\n - **[Fill patterns (hatching)](#fillPatterns)**\n - **[Minimaps](#minimaps)**\n - **[Placenames](#placenames)**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1560,"value":"### Quick start:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"eurostatmap = require(\"eurostat-map@4.10.8\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"md`\n\nYou can generate a fully functioning map with just a few lines of code:\n\n\\`\\`\\`javascript\n eurostatmap\n .map(\"choropleth\")\n .title(\"Population density in Europe\")\n .stat({ eurostatDatasetCode: \"demo_r_d3dens\", unitText: \"people/km²\" })\n .legend({ x: 500, y: 180, title: \"Density, people/km²\" })\n .build() \n\n\n\\`\\`\\`\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1019,"value":"md` For the full API documentation visit [this GitHub page](https://github.com/eurostat/eurostat-map.js/blob/master/docs/reference.md), or check out our interactive map generator (IMAGE) which uses eurostat-map to generate thematic maps for the European Commission: https://gisco-services.ec.europa.eu/image/`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"md`Now lets go through each map type individually...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"choropleth = md`## Choropleth maps`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"html`A choropleth map shows areas colored or patterned in proportion to a statistical variable. These maps should be used to show intensive statistical variables such as proportions, ratios, densities, rates of change, percentages, etc.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"html`The data used in choropleths can be classified a number of ways. Eurostat-map offers \"quantile\", \"equinter\" for equal intervals, and \"threshold\" for user defined thresholds. See here for details.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"md`### Using your own color array`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"html`Different colour gradients suit different datasets. You can specify your own colour array using the colors() function, and their corresponding thresholds using the thresholds() function...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"html`