28:null 29:["$","title",null,{"children":"Hello, eurostat-map | Eurostat's Workspace | Observable"}] 2e: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; }2f:T454,customColorsMap = { let m = eurostatmap .map("choropleth") .title("Population change") .titleFontSize(20) .subtitleFontSize(17) .subtitle("Crude rate of total population change, 2021") .fontFamily("Source Serif Pro") .svgId("customColors") .nutsLevel(2) .nutsYear(2024) .stat({ eurostatDatasetCode: "demo_r_gind3", filters: { indic_de: "GROWRT", time: 2021 }, unitText: "‰" }) .colors([ "#997A00", "#CDB119", "#EFD65C", "#F6EA9E", "#C8EBB9", "#9BD9BC", "#67B7AC", "#208486" ]) .classificationMethod("threshold") .threshold([-15, -10, -5, 0, 5, 10, 15]); if (width > 800) { m.legend({ x: 550, y: 60, title: "Per 1 000 persons", titleFontSize: 14, labelFontSize: 13, labelType: "ranges", pointOfDivergenceLabel: "Increase|Decrease", pointOfDivergence: 4, divergingArrowLength: 50, boxOpacity: 1 }); } else { m.titleFontSize(12).subtitleFontSize(11).showSourceLink(false); } m.build(); return m; }30:T677,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", subtitleFontSize: 16, subtitleFontWeight: 100, svgId: "spain", nutsLvl: 3, scale: "10M", stat: { eurostatDatasetCode: "nama_10r_3gdp", unitText: "Euro per inhabitant", filters: { TIME: "2021", UNIT: "EUR_HAB" } }, titleFill: "#333", 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: 60, boxOpacity: 0, boxPadding: 7, title: "Euro per inhabitant", titleFontSize: 16, shapeWidth: 30, shapeHeight: 20, sepLineLength: 30, noData: true }, labelling: true, labelsToShow: ["values"], labelShadow: ["values"] }) .labelValuesFontSize(16) .fontFamily("Source serif pro") .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()31:T569,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 } ] }) .flowMaxWidth(15) .flowColor("#7bab79") .build(); return map; }32: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 })33:Ta8b,propSymbolsMap = { let map = eurostatmap .map("ps") .dorling(dorling) .svgId("map4") .scale("20M") .nutsLvl(nutsLvlProp) .title("GDP, 2021") .subtitle("by NUTS " + nutsLvlProp + " regions") .fontFamily("Source Serif Pro") //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 .psClassifMethod("threshold") .psThreshold([20000, 30200, 40000, 50000]) .psColors(["#A1AEE3", "#7C90D6", "#586FC5", "#3551AD", "#15246B"]) .psFill("steelblue"); // 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 } }); } map.subtitleFontSize(15); return map.build(); }34:T55c,pieMap = { let m = eurostatmap .map("pie") .dorling(true) // to prevent overlapping .svgId("pie") .scale("60M") .nutsLvl(1) .geoCenter([4900000, 3500000]) .statPie( { eurostatDatasetCode: "hlth_cd_asdr2", filters: { sex: "T", time: "2020", age: "TOTAL", unit: "RT" }, unitText: "death rate per 100 000" }, "icd10", //parameter that the categories belong to ["J", "C", "I"], //category codes ["Respiratory", "Cancer", "Circulatory"], //category labels ["orange", "#A4CDF8", "#2E7AF9"], //colours "A-R_V-Y" //code for the total (all causes of death) ) .pieOtherColor("#FFCC80") .pieOtherText("Other") .pieMinRadius(6) .title("Most common causes of death, 2021") .subtitle( "Standardised death rate and % share of all deaths, by NUTS 1 regions" ) .legend({ x: 560, y: 60, boxOpacity: 0, boxFill: "white", titleFontWeight: "bold", sizeLegend: { title: "Death rate per 100 000 inh.", titlePadding: 10, values: [500, 1600] }, colorLegend: { title: "Cause of death" } }) //map styling .fontFamily("Source Serif Pro"); if (width < 800) { m.pieMinRadius(3).pieMaxRadius(10).legend(false).showSourceLink(false); } m.build(); return m; }35:T5e5,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: "BE", value: 43038180.93 }, { 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 } ] }) .flowArrows(false) .flowColor("#65a061") .flowOpacity(0.9) .nutsLevel(0) .legend({ x: 10, y: 120, title: "Flow volume", boxOpacity: 0, barChart: false, flowWidthLegend: { titlePadding: -10 }, regionColorLegend: { title: " ", marginTop: 30 } }) .drawCoastalMargin(false) .insets(false) .labels({ values: true, backgrounds: false, shadows: true, valuesFormatter: formatCompact }) .zoomExtent([1, 10]) .build()36:T83d,coxcombConfigs = ({ death: { title: "Deaths from COVID-19", 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", "J"], categoryLabels: ["COVID-19", "Cancer", "Circulatory", "Respiratory"], 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" } } })37: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(); } }38: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; }); }39:T9d6,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" }) .classToText({ efta: "EFTA", eu: "EU", cc: "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 }); 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", IS: "efta", LI: "efta", NO: "efta", CH: "efta" }); map.build(); return map; }3a:[{"id":"b3adfc9b688d0394c3d032c2c9e71f85d3e0b1b2f0a20073614ff7a8a0142e6dc0eee3a513af9e13005ad2da8e62621068169e68356b8ea6d97b56cc755481d5","href":"https://static.observableusercontent.com/files/b3adfc9b688d0394c3d032c2c9e71f85d3e0b1b2f0a20073614ff7a8a0142e6dc0eee3a513af9e13005ad2da8e62621068169e68356b8ea6d97b56cc755481d5","name":"eurostat-map-logo-1.png","type":"image/png","lastModified":1779895009938.583,"size":512098}] 2c:{"id":"08fa5b0347d939c5","slug":"hello-eurostat-map","title":"Hello, eurostat-map","thumbnail":"98a2607109f4900fa641edaf50f413e45a56156274dec625184594aa39223cf1","access_level":"public","create_time":"$D2025-10-08T07:46:47.423Z","update_time":"$D2026-07-17T09:37:57.785Z","view_time":null,"first_public_time":"$D2025-10-08T07:46:47.423Z","has_unpublished_edits":null,"fork":{"id":"5d04eefdf4ac3f23","slug":"eurostat-map-js","title":"Hello, eurostat-map","owner":{"id":"25fee90bb47fd709","login":"joewdavies","name":"Joe Davies"}},"stars":10,"starred":false,"owner":{"type":"team","id":"a74f19f52d75fb24","login":"eurostat-ws","name":"Eurostat's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/d298b18508a05146d470802a59abcc3c9e25b908a97a509956539a954f9359f4","tier":"starter_2024"},"version":2952,"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}],"members":[{"type":"team","id":"a74f19f52d75fb24","login":"eurostat-ws","name":"Eurostat's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/d298b18508a05146d470802a59abcc3c9e25b908a97a509956539a954f9359f4","tier":"starter_2024","role":"editor"},{"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":7,"collection":{"id":"cd44389fd6d53000","slug":"eurostatmap-js","title":"Eurostat map","owner":{"id":"a74f19f52d75fb24","login":"eurostat-ws","name":"Eurostat's Workspace"}},"type":"notebook","body":{"title":"Hello, eurostat-map","cells":[{"id":0,"value":"md`# Hello, eurostat-map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":2896,"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","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 - **[Coxcomb (Polar area)](#coxcomb)**\n - **[Categorical](#categorical)**\n - **[Grid Cartograms](#gridCartograms)**\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":1560,"value":"### Quick start:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"eurostatmap = require(\"eurostat-map\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":505,"value":"choropleth = md`## Choropleth maps`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":899,"value":"html`