31:T6f0,viewof colorSchemeinputs = { if (mapType == "chbi") { return inputsGroup( [ [ color({ value: "#ffffff", title: "Start colour" }), color({ value: "#00cbc9", title: "Colour 1" }), color({ value: "#cc5cb0", title: "Colour 2" }), color({ value: "#0019a8", title: "End colour" }) ] ], [["startColor", "color1", "color2", "endColor"]] ); } else if (mapType == "ct") { return inputsGroup( [ [ color({ value: "#ccebc5", title: "Rural" }), color({ value: "#ffffb3", title: "Intermediate" }), color({ value: "#fdb462", title: "Urban" }) ] ], [["rur", "int", "urb"]] ); } else if (mapType == "ch" || mapType == "ps") { return inputsGroup( [ [ radio({ title: "Colour scheme type", options: [ { label: "Colour interpolator", value: "interpolator" }, { label: "Colour array", value: "array" } ], value: "interpolator" }), radio({ title: "Classification method", options: [ { label: "Quantile", value: "quantile" }, { label: "Equinter", value: "equinter" }, { label: "Threshold", value: "threshold" } ], value: "quantile" }) ] ], [["colorSchemeType", "classMethod"]] ); } else { return html``; } }32:T1cd8,viewof colorScheme = { if (mapType == "ch" || mapType == "ps") { return colorSchemeinputs["colorSchemeType"] == "array" ? colorSchemePicker({ title: "Color array", height: 300, description: "Eurostat style guide colour schemes", w: 500, value: "General and regional statistics", schemes: [ { name: "General and regional statistics", colors: [ "#cddcf0", "#aab9e1", "#829bcd", "#6487c3", "#466eb4", "#2d50a0" ] }, { name: "Population and general statistics", colors: [ "#fae6c3", "#f0cd91", "#ecb95f", "#e6a532", "#dc8c2d", "#d76e2d" ] }, { name: "Industry, trade and services", colors: [ "#c8e1f5", "#96c8eb", "#64b4e6", "#00a0e1", "#0087cd", "#1978be" ] }, { name: "Agriculture and fisheries", colors: [ "#d7e6c8", "#b4d29b", "#96be6e", "#7daf4b", "#5f9b4b", "#41914b" ] }, { name: "International trade", colors: [ "#e6c8be", "#d7968c", "#c86e64", "#b93c46", "#aa192d", "#961e2d" ] }, { name: "International trade", colors: [ "#e6ebc3", "#d7dc91", "#c8cd64", "#b9c337", "#a0aa37", "#829632" ] }, { name: "Environment and energy", colors: [ "#cde6e6", "#a0d2d2", "#73bebe", "#41afaa", "#23969b", "#2d828c" ] }, { name: "Science and technology", colors: [ "#f0d2b9", "#e6aa82", "#dc8755", "#d7642d", "#c64c28", "#b91e23" ] }, { name: "Diverging scheme", colors: [ "#d76e2d", "#ebb95f", "#fae6c3", "#cddcf0", "#829bcd", "#2d50a0" ] }, { name: "Diverging scheme reversed", colors: [ "#2d50a0", "#829bcd", "#cddcf0", "#fae6c3", "#ebb95f", "#d76e2d" ] }, { name: "custom", colors: [ "#174060", "#1C627C", "#288AA1", "#2CAFC4", "#FDBEB0", "#F3767E", "#CE3658", "#94003A" ].reverse() } // { // name: "BuGn", // k: 5 // } ] }) : colorInterpolatorPicker({ title: "Color interpolator", height: 300, width: 300, value: "Reds", description: "D3's scale-chromatic colour interpolator functions", 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" } ] }); } else if (mapType == "chbi") { return html``; // for some reason this function has to return a html input element, otherwise observable wont execute map, so we just return a simple select and hide it } else if (mapType == "pie") { return inputsGroup( [ [ color({ value: "#ffaa00", title: "Category 1 colour" }), color({ value: "#A4CDF8", title: "Category 2 colour" }), color({ value: "#2E7AF9", title: "Category 3 colour" }), color({ value: "#FFCC80", title: "Category 'Other' colour" }) ] ], [["cat1Color", "cat2Color", "cat3Color", "catOtherColor"]] ); } else if (mapType == "scomp") { return inputsGroup( [ [ color({ value: "#8dd3c7", title: "Category 1 colour" }), color({ value: "#ffffb3", title: "Category 2 colour" }), color({ value: "#bebada", title: "Category 3 colour" }), color({ value: "#fb8072", title: "Category 4 colour" }) ] ], [["cat1Color", "cat2Color", "cat3Color", "cat4Color"]] ); } else { return html``; } }33:T72e,viewof symbolAndPieInputs = { if (mapType == "ps") { return inputsGroup( [ [ radio({ title: "Symbol type", description: "", options: [ { label: 'Circle', value: 'circle' }, { label: 'Square', value: 'square' }, { label: 'Cross', value: 'cross' }, { label: 'Diamond', value: 'diamond' }, { label: 'Star', value: 'star' }, { label: 'Triangle', value: 'triangle' }, { label: 'Wye', value: 'wye' }, { label: 'Custom symbol', value: 'custom' } ], value: "circle" }), slider({ min: 4, max: 100, value: 60, step: 1, title: "Max Size", description: "Change the maximum size of the symbols" }), slider({ min: 0.1, max: 1, value: 0.7, step: 0.1, title: "Symbol opacity", description: "Change the opacity of the symbols" }) ] ], [["symbolType", "maxSize", "symbolOpacity"]] ); } else if (mapType == "pie") { return inputsGroup( [ [ slider({ min: 0, max: 20, value: 15, step: 1, title: "Max Size", description: "Change the maximum radius of the pie charts" }), slider({ min: 1, max: 20, value: 5, step: 1, title: "Min Size", description: "Change the maximum radius of the pie charts" }) ] ], [["maxSize", "minSize"]] ); } else { return html``; } }34:T405,// Find an icon at https://materialdesignicons.com/ and paste the "d" attribute of the svg here: viewof customSymbol = mapType == "ps" && symbolAndPieInputs["symbolType"] == "custom" ? textarea({ title: "Custom SVG symbol", description: "You can find icons at https://materialdesignicons.com/ ", placeholder: "Find an icon at https://materialdesignicons.com/ and paste the d attribute of the svg here", spellcheck: false, width: "100%", rows: 7, value: `` }) : html``35:T62c,viewof labellingInputs = inputsGroup( [ [ checkbox({ options: [ { label: "Country names", value: "countries" }, { label: "Country codes", value: "cc" }, { label: "Seas", value: "seas" }, { label: "Statistical values", value: "values" } ], title: "Labels", value: ["seas"] }) ], [ checkbox({ options: [ { label: "Country names", value: "countries" }, { label: "Country codes", value: "cc" }, { label: "Seas", value: "seas" }, { label: "Statistical values", value: "values" } ], title: "Add shadow to:", value: [""] }) ], [ color({ value: "#ffffff", title: "Shadow colour" }), Range([0, 10], { value: 3, step: 1, label: "Shadow Width" }) ], [ color({ value: "#383838", title: "Country label colour" }), color({ value: "#000", title: "Country code label colour" }), color({ value: "#003399", title: "Sea label colour" }), color({ value: "#000", title: "Stat values label colour" }), Range([0, 1], { value: 0.8, step: 0.2, label: "Label Opacity" }) ] ], [ ["labels"], ["labelShadows"], ["shadowColor", "shadowWidth"], [ "countryLabelColor", "ccLabelColor", "seaLabelColor", "valuesLabelColor", "labelOpacity" ] ] )36:T74b,viewof mapStyles = inputsGroup( [ [ color({ value: "#ffffff", title: "Sea colour" }), color({ value: "#eeeeee", title: "Land colour" }), color({ value: "#c2daed", title: "Coastal margin colour" }), color({ value: "#000", title: "NUTS 0 border colour" }), color({ value: "#ffffff", title: "NUTS 1 border colour" }), color({ value: "#ffffff", title: "NUTS 2 border colour" }), color({ value: "#e0bcdf", title: "Hover colour" }), color({ value: "#f5f5f5", title: "Graticule colour" }) ], [ checkbox({ options: [{ value: "toggle", label: "Draw coastal margin" }], value: false }), checkbox({ options: [{ value: "toggle", label: "Draw graticule" }], value: "toggle" }), Range([0.1, 2], { value: 0.3, step: 0.1, label: "Coastal margin width" }) ], [ Range([0.1, 2], { value: 0.5, step: 0.1, label: "NUTS 0 border width" }), Range([0.1, 2], { value: 0.5, step: 0.1, label: "NUTS 1 border width" }), Range([0.1, 2], { value: 0.5, step: 0.1, label: "NUTS 2 border width" }), Range([0.1, 2], { value: 0.5, step: 0.1, label: "NUTS 3 border width" }) ] ], [ [ 'seaColor', 'landColor', 'coastalMarginColor', 'nuts0BorderColor', 'nuts1BorderColor', 'nuts2BorderColor', 'hoverColor', 'graticuleColor' ], ['drawCoastalMargin', 'drawGraticule', 'coastalMarginWidth'], ['nuts0Width', 'nuts1Width', 'nuts2Width', 'nuts3Width'] ] )37:T22b7,map = { let config = { ...currentConfig }; let mt = mapType; //ammend config using inputs if (config.legend) { config.legend.shapeWidth = legendInputs["cellWidth"]; config.legend.shapeHeight = legendInputs["cellHeight"]; config.legend.sepLineLength = legendInputs["cellWidth"] + 5; //config.legend.squareSize = legendInputs["cellWidth"]; //bivariate ch } //dot density maps are actually type choropleth if (mapType == "dd") { mt = "ch"; } // common settings among all map types let m = eurostatmap .map(mt) .width(width) .title(config.title + ", " + dataYear) .subtitle(config.subtitle + ", by NUTS " + nutsLvl + " regions") .nutsLvl(nutsLvl) .geoCenter([ parseInt(geographicInputs["x"]), parseInt(geographicInputs["y"]) ]); //tooltip if (config.tooltip) { m.tooltip(config.tooltip); } // labelling m.labelling(true) .labelsToShow(labellingInputs["labels"]) //.labelValuesFontSize(labellingInputs["labelSize"]) .labelFill({ seas: labellingInputs["seaLabelColor"], countries: labellingInputs["countryLabelColor"], cc: labellingInputs["ccLabelColor"], values: labellingInputs["valuesLabelColor"] }) .labelOpacity({ seas: labellingInputs["labelOpacity"], countries: labellingInputs["labelOpacity"], cc: labellingInputs["labelOpacity"], values: labellingInputs["labelOpacity"] }) .labelShadow(labellingInputs["labelShadows"].length > 0) .labelShadowWidth({ seas: labellingInputs["labelShadows"].includes("seas") ? labellingInputs["shadowWidth"] : 0, countries: labellingInputs["labelShadows"].includes("countries") ? labellingInputs["shadowWidth"] : 0, cc: labellingInputs["labelShadows"].includes("cc") ? labellingInputs["shadowWidth"] : 0, values: labellingInputs["labelShadows"].includes("values") ? labellingInputs["shadowWidth"] : 0 }) .labelShadowColor({ seas: labellingInputs["shadowColor"], countries: labellingInputs["shadowColor"], cc: labellingInputs["shadowColor"], values: labellingInputs["shadowColor"] }); // insets if (insetInputs["showInsets"]) { insetInputs["insetType"] == "new" ? m.insets(insetConfigNew) : m.insets(insetConfigClassic); m.insetBoxPosition([width - insetWidth - 10, 10]); } // data & colour schemes... // choropleths // set colour scheme if (mapType == "ch") { if (colorSchemeinputs["colorSchemeType"] === "interpolator") { m.colorFun(colorScheme); m.clnb(classes); } else { m.colors(colorScheme); m.clnb(colorScheme.length); } if (colorSchemeinputs["classMethod"] == "threshold") { m.threshold(classes.split(",")); } // set map data if (datasetName !== "custom") { //set time config.data.filters.time = dataYear; m.stat(config.data) .classifMethod(colorSchemeinputs["classMethod"]) .makeClassifNice(true); } else { // custom data m.statData().setData(customData); m.showSourceLink(false); } //CATEGORICAL MAP } else if (mapType == "ct") { m.stat(config.data) .classToFillStyle({ urb: colorSchemeinputs["urb"], int: colorSchemeinputs["int"], rur: colorSchemeinputs["rur"] }) .classToText({ urb: "Urban", int: "Intermediate", rur: "Rural" }) .nutsYear(2013); //BIVARIATE CHOROPLETH } else if (mapType == "chbi") { m.startColor(colorSchemeinputs["startColor"]) .color1(colorSchemeinputs["color1"]) .color2(colorSchemeinputs["color2"]) .endColor(colorSchemeinputs["endColor"]); config.data.v1.filters.time = dataYear; config.data.v2.filters.time = dataYear; m.stat("v1", config.data.v1); m.stat("v2", config.data.v2); //PROPORTIONAL SYMBOLS } else if (mapType == "ps") { config.data.color.filters.time = dataYear; config.data.size.filters.time = dataYear; //config.legend.colorLegend.shapeWidth = legendInputs["cellWidth"]; //config.legend.colorLegend.shapeHeight = legendInputs["cellHeight"]; //config.legend.colorLegend.sepLineLength = legendInputs["cellWidth"] + 5; //config.legend.colorLegend.labelOffset = legendInputs["cellWidth"] + 15; m.stat("color", config.data.color); m.stat("size", config.data.size); if (colorSchemeinputs["colorSchemeType"] == "interpolator") { m.psColorFun(colorScheme); m.psClasses(classes); } else { m.psColors(colorScheme); m.psClasses(colorScheme.length); } let symb = symbolAndPieInputs["symbolType"]; m.psShape(symb).psFillOpacity(symbolAndPieInputs["symbolOpacity"]); //CUSTOM SYMBOL if (symb == "custom") { m.psCustomSVG(customSymbol) //custom path sizes are scales, not pixels .psMaxSize(3) .psMinSize(1) //minSize/maxsize for customSVG indicates scale() value, not pixel size .psOffset({ x: -25, y: -25 }); //.psStroke("black") //.psStrokeWidth(10); config.legend.sizeLegend.shapePadding = symbolAndPieInputs["maxSize"] * 2; config.legend.sizeLegend.titlePadding = -symbolAndPieInputs["maxSize"]; //config.legend.sizeLegend.shapeOffset = { x: 0, y: -30 }; //config.legend.sizeLegend.labelOffset = 70; } else { m.psMaxSize(symbolAndPieInputs["maxSize"]); config.legend.sizeLegend.shapePadding = 10; config.legend.sizeLegend.titlePadding = 10; //config.legend.sizeLegend.shapeOffset = { x: 0, y: 0 }; //config.legend.sizeLegend.labelOffset = 25; } // PIE CHARTS } else if (mapType == "pie") { //set time config.data.stat.filters.time = dataYear; m.statPie( config.data.stat, config.data.category, config.data.categoryCodes, config.data.categoryLabels, config.data.colors, config.data.totalCode ); m.legend(config.legend); m.pieOtherColor("#FFCC80") .pieMaxRadius(symbolAndPieInputs["maxSize"]) .pieMinRadius(symbolAndPieInputs["minSize"]); m.pieOtherText(config.pieOtherText || "Other"); // STRIPE COMPOSITIONS } else if (mapType == "scomp") { //set time config.data.stat.filters.time = dataYear; m.statComp( config.data.stat, config.data.category, config.data.categoryCodes, config.data.categoryLabels, config.data.colors ); m.legend(config.legend); //DOT DENSITY } else if (mapType == "dd") { m.colors(colorScheme); m.clnb(colorScheme.length); m.threshold([35, 50, 80, 100, 140, 180, 300, 500, 1300]); m.filtersDefinitionFun( eurostatmap.getFillPatternDefinitionFun({ patternSize: 5, shape: "circle", bckColor: "white", symbColor: "black" }) ); m.classToFillStyle(eurostatmap.getFillPatternLegend()); //SPARKLINES / CHARTS } else if (mapType == "spark") { m.sparkType(config.sparkType) .sparkLineWidth(config.sparkLineWidth) .sparkLineStrokeWidth(config.sparkLineStrokeWidth) .sparkLineHeight(config.sparkLineHeight) .sparkLineColor(config.sparkLineColor); m.statSpark( { eurostatDatasetCode: "demo_r_pjanaggr3", filters: { sex: "T", unit: "NR" }, unitText: "people" }, [ "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019" ], //dates [ "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019" ] //labels ); } //FONT m.fontFamily(fontFamily); //LEGEND m.legend(config.legend); //ZOOM if (enableZoom) m.zoomExtent([1, 2]).insetZoomExtent([1, 3]); // MAP TEMPLATE STYLING m.drawCoastalMargin(mapStyles["drawCoastalMargin"]) .coastalMarginColor(mapStyles["coastalMarginColor"]) .coastalMarginWidth(mapStyles["coastalMarginWidth"]) .seaFillStyle(mapStyles["seaColor"]) .cntrgFillStyle(mapStyles["landColor"]) .nutsrgSelFillSty(mapStyles["hoverColor"]) .nutsbnStroke({ 0: mapStyles["nuts0BorderColor"], 1: mapStyles["nuts1BorderColor"], 2: mapStyles["nuts2BorderColor"], 3: mapStyles["nuts2BorderColor"], co: mapStyles["nuts0BorderColor"] }) .nutsbnStrokeWidth({ 0: mapStyles["nuts0Width"], 1: mapStyles["nuts1Width"], 2: mapStyles["nuts2Width"], 3: mapStyles["nuts3Width"], oth: 0, co: mapStyles["nuts1Width"] }) .drawGraticule(mapStyles["drawGraticule"]) .graticuleStroke(mapStyles["graticuleColor"]) .graticuleStrokeWidth(1); m.build(); return m; }38:T6fe,choroplethConfigs = [ { name: "Unemployment rate", title: "Unemployment rate", subtitle: "percentage of persons aged 20-64 who are unemployed", legend: { x: legendInputs["x"], y: legendInputs["y"], title: "% unemployed", labelDecNb: 0 }, data: { yearsAvailable: [2019, 2018, 2017, 2016, 2015], nutsAvailable: [0, 1, 2], eurostatDatasetCode: "lfst_r_lfu3rt", filters: { age: "Y20-64", sex: "T", unit: "PC" }, unitText: "%" } }, { name: "Population Change", title: "Crude rate of total population change", subtitle: "per 1 000 people", legend: { x: legendInputs["x"], y: legendInputs["y"], title: "Change per 1 000 people", titleFontSize: 12, labelDecNb: 0 }, data: { nutsAvailable: [0, 1, 2, 3], yearsAvailable: [2019, 2018, 2017], eurostatDatasetCode: "demo_r_gind3", filters: { indic_de: "GROWRT" }, unitText: "‰" } }, { name: "Population Density", title: "Population density in Europe", subtitle: "Inhabitants per km²", legend: { x: legendInputs["x"], y: legendInputs["y"], title: "Inhabitants per km²", labelDecNb: 0 }, data: { nutsAvailable: [0, 1, 2, 3], yearsAvailable: [2018, 2017, 2016, 2015, 2014, 2013, 2012], eurostatDatasetCode: "demo_r_d3dens", filters: { lastTimePeriod: 1 }, unitText: "Inhabitants per km²" } }, { name: "custom", title: "Map made using custom data", subtitle: "Data loaded from custom csv file", data: { nutsAvailable: [0, 1, 2, 3], yearsAvailable: [] }, legend: { title: "Custom legend title", x: legendInputs["x"], y: legendInputs["y"] } } ]39:Te96,proportionalSymbolConfigs = [ { name: "GDP", title: "GDP", subtitle: "Total GDP (million euro) & GDP per inhabitant (euro)", data: { nutsAvailable: [0, 1, 2, 3], yearsAvailable: [2018, 2017, 2016], color: { eurostatDatasetCode: "nama_10r_3gdp", unitText: "EUR/inhabitant", filters: { unit: "EUR_HAB" } }, size: { eurostatDatasetCode: "nama_10r_3gdp", unitText: "Million EUR", filters: { unit: "MIO_EUR" } } }, legend: { x: legendInputs["x"], y: legendInputs["y"], ascending: false, boxPadding: 15, sizeLegend: { title: "Total GDP (million EUR)", labelOffset: { x: 50, y: 10 }, labelFormat: d3.format(",.2r"), shapeOffset: { x: 0, y: 0 }, shapePadding: 5 }, colorLegend: { title: "GDP per inhabitant (EUR)", labelFormat: d3.format(",.2r") }, legendSpacing: 50 } }, { name: "Organic Farmland", title: "Organic Farmland", subtitle: "Total area (HA) of organic farmland & % of total agricultural area that is organic", data: { nutsAvailable: [0], yearsAvailable: [2018, 2017], size: { eurostatDatasetCode: "org_cropar", filters: { crops: "ARA", unit: "HA", agprdmet: "TOTAL" }, unitText: "HA of organic arable land" }, color: { eurostatDatasetCode: "org_cropar", filters: { crops: "ARA", unit: "PC_UAA", agprdmet: "TOTAL" }, unitText: "% of total agricultural area" } }, legend: { x: legendInputs["x"], y: legendInputs["y"], boxPadding: 15, sizeLegend: { title: "Total organic arable land (HA)", cellNb: 3, labelFormat: d3.format(",.2r"), ascending: false, labelOffset: { x: 50, y: 0 }, shapePadding: 5 }, colorLegend: { title: "% of total utilised agricultural area", shapePadding: 2 }, legendSpacing: 50 } }, { name: "Tourism in August", title: "Tourism in August", subtitle: "Total nights spent and % change compared with previous year", data: { yearsAvailable: ["2020-08"], nutsAvailable: [0], size: { eurostatDatasetCode: "tour_occ_nim", filters: { c_resid: "TOTAL", unit: "NR", time: "2020-08", geo: "AL&geo=AT&geo=BE&geo=BG&geo=CH&geo=CY&geo=CZ&geo=DE&geo=DK&geo=EE&geo=EL&geo=ES&geo=FI&geo=FR&geo=HR&geo=HU&geo=IE&geo=IS&geo=IT&geo=LI&geo=LT&geo=LU&geo=LV&geo=ME&geo=MK&geo=MT&geo=NL&geo=NO&geo=PL&geo=PT&geo=RO&geo=RS&geo=SE&geo=SI&geo=SK&geo=TR&geo=UK" }, unitText: "total nights spent" }, color: { eurostatDatasetCode: "tour_occ_nim", filters: { c_resid: "TOTAL", unit: "PCH_SM", time: "2020-08", geo: "AL&geo=AT&geo=BE&geo=BG&geo=CH&geo=CY&geo=CZ&geo=DE&geo=DK&geo=EE&geo=EL&geo=ES&geo=FI&geo=FR&geo=HR&geo=HU&geo=IE&geo=IS&geo=IT&geo=LI&geo=LT&geo=LU&geo=LV&geo=ME&geo=MK&geo=MT&geo=NL&geo=NO&geo=PL&geo=PT&geo=RO&geo=RS&geo=SE&geo=SI&geo=SK&geo=TR&geo=UK" }, unitText: "% change compared to previous year" } }, legend: { x: legendInputs["x"], y: legendInputs["y"], boxPadding: 15, sizeLegend: { title: "Total nights spent", titlePadding: -5, cellNb: 3, labelFormat: d3.format(".2s"), labelOffset: { x: 50, y: 0 } }, colorLegend: { title: "% change compared to 2019" //shapePadding: 1 }, legendSpacing: 45 } } ]3a:T549,piechartConfigs = [ { name: "Most common causes of death", title: "Most common causes of death", subtitle: "Standardised death rate and % share of all deaths", pieOtherText: "Other causes of death", data: { nutsAvailable: [0, 1, 2], yearsAvailable: [2016, 2017, 2018], stat: { eurostatDatasetCode: "hlth_cd_asdr2", filters: { sex: "T", age: "TOTAL", unit: "RT" }, unitText: "death rate per 100 000" }, category: "icd10", //parameter that the categories belong to categoryCodes: ["J", "C", "I"], //category codes categoryLabels: [ "Diseases of the respiratory system", "Cancer (malignant neoplasms)", "Diseases of the circulatory system" ], //category labels colors: [ colorScheme["cat1Color"], colorScheme["cat2Color"], colorScheme["cat3Color"], colorScheme["cat4Color"] ], //colours totalCode: "A-R_V-Y" //code for the total (all causes of death) }, legend: { x: legendInputs["x"], y: legendInputs["y"], boxOpacity: 0.8, boxFill: "white", titleFontWeight: "bold", sizeLegend: { title: "Death rate per 100 000 inhabitants", values: [700, 1600] }, colorLegend: { title: "Cause of death" } } } ]3b:T703,insetConfigNew = { let s = insetWidth; // inset size let p = 5; //inset padding let config = [ { geo: "IC", x: 0, y: 0, width: s, height: 0.3 * s, title: "Canary Islands" }, { geo: "CARIB", x: 0, y: 0.3 * s + p, width: 0.5 * s, height: s, title: "French Caribbean" }, { geo: "GF", x: 0.5 * s, y: 0.3 * s + p, width: 0.5 * s, height: 0.75 * s, title: "French Guiana" }, { geo: "YT", x: 0.5 * s, y: 1.05 * s + p, width: 0.25 * s, height: 0.25 * s, title: 'Mayotte' }, { geo: "RE", x: 0.75 * s, y: 1.05 * s + p, width: 0.25 * s, height: 0.25 * s, title: 'Réunion' }, { geo: "PT20", x: 0, y: 1.3 * s + 2 * p, width: 0.75 * s, height: 0.25 * s, title: 'Azores' }, { geo: "PT30", x: 0.75 * s, y: 1.3 * s + 2 * p, width: 0.25 * s, height: 0.25 * s, title: 'Madeira' }, { geo: "MT", x: 0, y: 1.55 * s + 3 * p, width: 0.25 * s, height: 0.25 * s, title: 'Malta' }, { geo: "LI", x: 0.25 * s, y: 1.55 * s + 3 * p, width: 0.25 * s, height: 0.25 * s, title: 'LI' }, { geo: "SJ_SV", x: 0.5 * s, y: 1.55 * s + 3 * p, width: 0.25 * s, height: 0.25 * s, title: 'Svalbard' }, { geo: "SJ_JM", x: 0.75 * s, y: 1.55 * s + 3 * p, width: 0.25 * s, height: 0.25 * s, title: 'Jan Mayen' } ]; config.forEach(c => { c.titleFontSize = 9; c.titlePosition = [3, 11]; c.titleFontWeight = 100; }); return config; }3c:T9be,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 = 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; }3d:T656,function colorSchemePicker(config = {}) { let { value, title, description, height, w, schemes } = config; const form = html``; const dropdown = html`

${styles()} ${title ? title : ""}

`; value = value ? schemes.find(d => d.name === value) : schemes[0]; form.value = value.colors ? value.colors : value.k ? d3[`scheme${value.name}`][value.k] : d3[`scheme${value.name}`]; let valueCont = html`

`; let valueViewer = getColorViewer(value, form); valueCont.append(valueViewer); dropdown.append(valueCont); const dropdownContainer = html`

${schemes.map(scheme => { let colorViewer = getColorViewer(scheme, form); colorViewer.onclick = () => { valueCont.removeChild(valueCont.firstChild); valueViewer = getColorViewer(scheme, form); valueCont.append(valueViewer); form.value = valueViewer.value; form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; return html`

${colorViewer}

`; })}

`; dropdown.append(dropdownContainer); form.append(dropdown); if (description) form.append( html`

${description}

` ); return form; }3e:T589,function ramp(name, n, form, interpolator, interpolate) { let canvas; let colors; let dark; if (d3[`scheme${name}`] && d3[`scheme${name}`][n]) { colors = d3[`scheme${name}`][n]; dark = d3.lab(colors[0]).l < 50; } else { if (!interpolate) interpolate = d3[`interpolate${name}`]; colors = []; dark = d3.lab(interpolate(0)).l < 50; for (let i = 0; i < n; ++i) { colors.push(d3.rgb(interpolate(i / (n - 1))).hex()); } } if (n < 128) { canvas = svg`

${views.map(\n row =>\n html`

${row.map(\n input =>\n html`

${input}

`\n )}

`;\n\n form.oninput = () => {\n form.value = views.map(row => row.map(input => input.value));\n if (names) {\n names.forEach((row, i) =>\n row.forEach(\n (c, j) =>\n form.value[i][j] != null && (form.value[c] = form.value[i][j])\n )\n );\n }\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"import { viewof colorInterpolatorPicker } from '@zechasault/color-schemes-and-interpolators-picker'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3f","stdlib":"1","titling":"auto"}