2f:Ta14,container = html`

`30:T7f3,map.on("load", () => { // Add sources map.addSource("aqli", { type: "vector", url: "mapbox://fndvit.aqli-test", promoteId: "objectid" }); map.addSource("countries", { type: "vector", url: "mapbox://mapbox.country-boundaries-v1", promoteId: "iso_3166_1_alpha_3" }); // Add layers map.addLayer( { id: "aqli-fill", type: "fill", source: "aqli", "source-layer": "aqli-test", layout: {}, paint: { // https://labs.mapbox.com/education/impact-tools/data-joins/#data-driven-styling-with-expressions // [expression_name, argument_0, argument_1, ...] "fill-color": [ "case", ["==", ["feature-state", "value"], null], "#f2f2f2", props[selectLookup[dataType]]["colors"]["default"] ] //, //"fill-opacity": 0.9 } }, // https://docs.mapbox.com/mapbox-gl-js/example/geojson-layer-in-stack/ "admin-1-boundary-bg" ); map.addLayer({ id: "countries-fill", type: "fill", source: "countries", "source-layer": "country_boundaries", layout: {}, paint: { "fill-color": "transparent" } }); map.addLayer({ id: "state-borders", type: "line", source: "aqli", "source-layer": "aqli-test", layout: {}, paint: { "line-color": "#333", "line-width": [ "case", ["boolean", ["feature-state", "hover"], false], 1, 0 ] }, minzoom: 3 }); map.addLayer({ id: "country-borders", type: "line", source: "countries", "source-layer": "country_boundaries", layout: {}, paint: { "line-color": "black", "line-width": [ "case", ["boolean", ["feature-state", "focused"], false], 1, ["boolean", ["feature-state", "hover"], false], 1, 0 ] // "line-width-transition": { duration: 1000, delay: 0 } // not working with feature-state! } }); // Join data updateData(year); })31:T4e7,// https://labs.mapbox.com/education/impact-tools/data-joins/#connect-your-spreadsheet updateData = (parameter) => { aqli_2020_gadm2.forEach((geo) => { const val = secondYear.length > 0 ? geo[props[selectLookup[dataType]]["columns"][parameter[1] - 1998]] - geo[props[selectLookup[dataType]]["columns"][parameter[0] - 1998]] : geo[props[selectLookup[dataType]]["columns"][parameter - 1998]]; map.setFeatureState( { source: "aqli", sourceLayer: "aqli-test", id: geo.objectid_gadm0 }, { value: isNaN(val) ? null : val, hover: false, row: geo } ); }); aqli_2020_gadm0.forEach((geo) => { const val = secondYear.length > 0 ? geo[props[selectLookup[dataType]]["columns"][parameter[1] - 1998]] - geo[props[selectLookup[dataType]]["columns"][parameter[0] - 1998]] : geo[props[selectLookup[dataType]]["columns"][parameter - 1998]]; map.setFeatureState( { source: "countries", sourceLayer: "country_boundaries", id: geo.iso_alpha3 }, { value: isNaN(val) ? null : val, hover: false, row: geo, focused: false } ); }); }32:T5c1,// Update the filter for each "admin-0-*" layer, which contain // administrative boundaries at the country level. // These are the same filters used in the Mapbox Light // style except that the worldview is based on user input. filterLayers = (worldviewType) => { const worldviewLookup = { "Rest of the world": "US", China: "CN", India: "IN" }; const worldview = worldviewLookup[worldviewType]; // The "admin-0-boundary-disputed" layer shows boundaries // at this level that are known to be disputed. map.setFilter("admin-0-boundary-disputed", [ "all", ["==", ["get", "disputed"], "true"], ["==", ["get", "admin_level"], 0], ["==", ["get", "maritime"], "false"], ["match", ["get", "worldview"], ["all", worldview], true, false] ]); // The "admin-0-boundary" layer shows all boundaries at // this level that are not disputed. map.setFilter("admin-0-boundary", [ "all", ["==", ["get", "admin_level"], 0], ["==", ["get", "disputed"], "false"], ["==", ["get", "maritime"], "false"], ["match", ["get", "worldview"], ["all", worldview], true, false] ]); // The "admin-0-boundary-bg" layer helps features in both // "admin-0-boundary" and "admin-0-boundary-disputed" stand // out visually. map.setFilter("admin-0-boundary-bg", [ "all", ["==", ["get", "admin_level"], 0], ["==", ["get", "maritime"], "false"], ["match", ["get", "worldview"], ["all", worldview], true, false] ]); }33:Ta13,props = { return { pm: { columns: d3.range(1998, 2021).map((d) => `pm${d}`), colors: { default: [ "step", ["feature-state", "value"], "#ffffff", 5, "#e1f5fb", 10, "#c0d5e0", 20, "#a1b6c5", 30, "#8298ac", 40, "#637b92", 50, "#46607a", 60, "#274662", 70, "#002d4b" ], between: [ "step", ["feature-state", "value"], "#5d93a8", -40, "#7bc1d9", -20, "#ade9fa", -10, "#daf7fd", 0, "#d3d9e0", 10, "#aeb8c0", 20, "#828f99", 40, "#5d6974" ] } }, who: { columns: d3.range(1998, 2021).map((d) => `llpp_who_${d}`), colors: { default: [ "step", ["feature-state", "value"], "#ffffff", 0.1, "#ffe6b3", 0.5, "#ffd25d", 1.0, "#ffba00", 2.0, "#ff9600", 3.0, "#ff6908", 4.0, "#e63d23", 5.0, "#bd251c", 6.0, "#8c130e" ], between: [ "step", ["feature-state", "value"], "#5d93a8", -2.0, "#7bc1d9", -0.5, "#ade9fa", -0.1, "#daf7fd", 0, "#fee9a9", 0.1, "#ffb546", 0.5, "#fc8339", 2.0, "#c1563c" ] } }, ns: { columns: d3.range(1998, 2021).map((d) => `llpp_nat_${d}`), colors: { default: [ "step", ["feature-state", "value"], "#ffffff", 0.1, "#ffe6b3", 0.5, "#ffd25d", 1.0, "#ffba00", 2.0, "#ff9600", 3.0, "#ff6908", 4.0, "#e63d23", 5.0, "#bd251c", 6.0, "#8c130e" ], between: [ "step", ["feature-state", "value"], "#5d93a8", -2.0, "#7bc1d9", -0.5, "#ade9fa", -0.1, "#daf7fd", 0, "#fee9a9", 0.1, "#ffb546", 0.5, "#fc8339", 2.0, "#c1563c" ] } } }; }34:T4cc,genLegend = { //colors section const legend_colors = document.createElement("div"); legend_colors.classList.add("colors"); //values section const legend_values = document.createElement("div"); legend_values.classList.add("values"); //legend html element const legend = document.getElementsByClassName("legend")[0]; //Remove old legend while (legend.firstChild) { legend.removeChild(legend.lastChild); } //Getting data const colors = props[selectLookup[dataType]]["colors"][ secondYear.length > 0 ? "between" : "default" ] .slice(2) .filter((_, i) => i % 2 === 0); const values = props[selectLookup[dataType]]["colors"][ secondYear.length > 0 ? "between" : "default" ] .slice(2) .filter((_, i) => i % 2 !== 0); values.forEach((val) => { const node = document.createElement("div"); node.innerHTML = val; node.classList.add("legend-value"); legend_values.appendChild(node); }); colors.forEach((c) => { const node = document.createElement("div"); node.style.background = c; node.classList.add("legend-color"); legend_colors.appendChild(node); }); legend.appendChild(legend_values); legend.appendChild(legend_colors); }35:T901,setCardContent = (data, id) => { const elCard = document.querySelector("#" + id); if (!elCard) { return; } // data const { viewType, years, pmValues, gainValues, country, population } = data; const isYears = data.years[0]; const mapLevel = data.name_2 ? 2 : data.name_1 ? 1 : 0; const dataCard = { viewType, years, pmValues, gainValues, name: data.name_2 || data.name_1 || country, population: formatBigInteger(population), viewStandard: viewType === "Custom" ? viewType : "National", viewTypeText: viewType === "Custom" ? data.customLevel : data.nationalStd }; const isTooltip = id === "tooltip"; // TODO: adapt width size //elCard.style.width = isYears ? "320px" : "256px"; // set data values in ui Object.keys(dataCard).forEach((key) => setTextContents(elCard, id, key, dataCard[key]) ); elCard.querySelector("#" + id + " .viewTypeUnit").innerHTML = viewType === "Custom" ? "%" : `µg/m³`; // hide in 3 cases: life gain, links (of download and spotlight), or country spotlight, ex: // case - PM view, hide life gain information displayElementIfConditionMet(elCard, id, "gainPanel", viewType !== "PM"); // case - country in spotlight list, show spotlight link displayElementIfConditionMet( elCard, id, "viewSpotlight", listSpotlights.indexOf(data.country) >= 0 ); // case - tooltip variation (dark mode), btn close/back and links displayElementIfConditionMet(elCard, id, "btnCloseOrBack", !isTooltip); displayElementIfConditionMet(elCard, id, "linkPanel", !isTooltip); // use dark mode for card as tooltip elCard.classList.remove("dark-mode"); if (isTooltip) { elCard.classList.add("dark-mode"); } // apply background color for life gain, // TO CHECK: apply also to pm, is years? const elGainValueMain = elCard.querySelectorAll(".gainValues")[1]; elGainValueMain.style.background = isYears ? "none" : data.bgColor; // use close button for country (and back button for states, apply on?) setTextContents(elCard, id, "btnCloseOrBack", mapLevel > 0 ? "<" : "X"); elCard.classList.remove("hide"); elCard.querySelector(".btnCloseOrBack").onclick = () => handleBtnClick(elCard, mapLevel); // add area chart updateChart(data.chartData, id); }36:T485,getCardData = (data) => { const years = [year.length ? year[0] : null, year.length ? year[1] : year]; const pmValues = [data["pm" + years[0]], data["pm" + years[1]]]; const gainValues = [ data["llpp_who_" + years[0]], data["llpp_who_" + years[1]] ]; return { country: data.country, name_2: data.name_2, name_1: data.name_1, population: data.population, nationalStd: data.natstandard, viewType: viewTypeLookup[dataType], customLevel: null, // % or null years: [years[0], years[1], years[0] ? "Change" : null], pmValues: [ pmValues[0]?.toFixed(2), pmValues[1]?.toFixed(2), pmValues[0] ? ((pmValues[1] * 100) / pmValues[0])?.toFixed(2) : null ], gainValues: [ gainValues[0]?.toFixed(2), gainValues[1]?.toFixed(2), gainValues[0] ? (gainValues[1] - gainValues[0])?.toFixed(2) : null ], bgColor: colorThresholdLE(data["llpp_who_" + years[1]]), chartData: { data: props[selectLookup[dataType]]["columns"].map((c, i) => ({ value: data[c], year: parseYear(i + 1998) })), years: years.map((y) => parseYear(y)) } }; }37:T7a5,{ let tooltipIDs = [null, null]; // [country, name_2] let elCard = document.querySelector("#card"); const handleMouseMove = debounce((event, element) => { //Get the current region hovering data, depending the zoom levels it's retrieved from a diferent layer const data = map.queryRenderedFeatures(event.point, { layers: [map.getZoom() < 3 ? "countries-fill" : "aqli-fill"] })[0]?.state?.row; // Update the tooltip if data change const classListTooltip = element.classList; if (data) { classListTooltip.remove("hide"); const { country, name_2 } = data; const newTooltipIDs = [country, name_2]; if (!isArrayEqual(newTooltipIDs, tooltipIDs)) { setCardContent(getCardData(data), "tooltip"); tooltipIDs = newTooltipIDs; } } else { //hideTooltip("mousemove, map no data"); if (!classListTooltip.contains("hide")) { classListTooltip.add("hide"); tooltipIDs = [null, null]; } } }, 13); map.on("mousemove", (event) => { const elTooltip = document.getElementById("tooltip"); if (!elTooltip) { return; } // Set data handleMouseMove(event, elTooltip); // Change [x, y] position on the map // TO check: first time trigger it const left = event.point.x; const top = event.point.y; const widthMap = document.getElementById("map").offsetWidth; const widthTooltip = elTooltip.offsetWidth; const heightTooltip = elTooltip.offsetHeight; //console.log(left, top); elTooltip.style.left = (widthMap - left > widthTooltip ? left : left - widthTooltip) + "px"; elTooltip.style.top = (top > heightTooltip ? top - heightTooltip : top) + "px"; //} }); map.on("mouseout", () => { hideTooltip("mouseout, map"); }); elCard.addEventListener("mouseenter", (event) => { event.stopPropagation(); hideTooltip("mouseenter, elCard"); }); return map; }38:Td35,eventConf = { let hoveredStateId = null; let hoveredCountryId = null; let countryClickedId = null; // Create a hover effect using events and feature states // https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/ map.on("mousemove", "aqli-fill", (e) => { if (e.features.length > 0) { if (hoveredStateId !== null) { map.setFeatureState( { source: "aqli", sourceLayer: "aqli-test", id: hoveredStateId }, { hover: false } ); } hoveredStateId = e.features[0].id; map.setFeatureState( { source: "aqli", sourceLayer: "aqli-test", id: hoveredStateId }, { hover: true } ); } }); map.on("mousemove", "countries-fill", (e) => { if (e.features.length > 0) { if (hoveredCountryId !== null) { map.setFeatureState( { source: "countries", sourceLayer: "country_boundaries", id: hoveredCountryId }, { hover: false } ); } hoveredCountryId = e.features[0].id; map.setFeatureState( { source: "countries", sourceLayer: "country_boundaries", id: hoveredCountryId }, { hover: map.getZoom() < 3 ? true : false } ); } }); map.on("mouseleave", "aqli-fill", () => { if (hoveredStateId !== null) { map.setFeatureState( { source: "aqli", sourceLayer: "aqli-test", id: hoveredStateId }, { hover: false } ); } hoveredStateId = null; }); map.on("mouseleave", "countries-fill", (e) => { if (hoveredCountryId !== null) { map.setFeatureState( { source: "countries", sourceLayer: "country_boundaries", id: hoveredCountryId }, { hover: false } ); } hoveredCountryId = null; }); map.on("click", (event) => { // Get the current country data on hover const currentRegion = map.queryRenderedFeatures(event.point, { layers: ["countries-fill"] })[0]; const data = currentRegion?.state?.row; const newCountryClickedId = currentRegion?.id; const classListCard = document.getElementById("card").classList; // Remove previous clicked country if (countryClickedId) map.setFeatureState( { source: "countries", sourceLayer: "country_boundaries", id: countryClickedId }, { focused: false } ); // Add new clicked country if (newCountryClickedId) map.setFeatureState( { source: "countries", sourceLayer: "country_boundaries", id: newCountryClickedId }, { focused: true } ); // Update the card data and center/zoom if (data && countryClickedId !== newCountryClickedId) { classListCard.remove("hide"); setCardContent(getCardData(data), "card"); const center = event.lngLat; map.flyTo({ center: [center.lng, center.lat], zoom: 4.5 }); hideTooltip("click"); console.log(newCountryClickedId, "data"); } if (!newCountryClickedId) { hidePopupCard(); console.log(countryClickedId, newCountryClickedId); // if (classListCard.contains("hide")) { // classListCard.add("hide"); // } } countryClickedId = newCountryClickedId; }); }39:T81d,cardComponent = html`

[name]

Population: n/a

PM2.5 Standard: Global 5µg/m³,
National n/a

[year]

PM2.5 Pollution (µg/m³)

n/a

Gain in life expectancy if Custom Standard is met

n/a

View Country Spotlight

`3a:T450,3b:Tb71,updateChart = (data, id) => { //Define margins const margin = { top: 25, right: 30, bottom: 5, left: 30 }, width = 320 - margin.left - margin.right, height = 100 - margin.top - margin.bottom; const chartSection = document.querySelector("#" + id + " .areaChart"); //Remove last chart while (chartSection.firstChild) { chartSection.removeChild(chartSection.firstChild); } const svg = d3 .create("svg") .attr( "viewbox", "0 0 " + width + margin.left + margin.right + " " + height + margin.top + margin.bottom ); const xScale = d3 .scaleTime() .domain( d3.extent(data.data, function (d) { return d.year; }) ) .range([margin.left, width]); const yScale = d3 .scaleLinear() .domain([0, d3.max(data.data, (v) => v.value)]) .range([height, margin.top]); //Append X axis svg .append("g") .attr("transform", "translate(0," + (height + 5) + ")") .call(d3.axisBottom(xScale).ticks(5).tickSizeOuter([2])); //Get the limits of each color when paint chart const colorLimits = d3 .scaleLinear() .domain( d3.extent( [0, ...colorPalette.filter((_, i) => i % 2 !== 0)].filter( (c) => c <= d3.max(data.data, (v) => v.value) ) ) ) .range([0, 100]); //Custom gradient const gradient = svg .append("defs") .append("linearGradient") .attr("id", "mygrad") //id of the gradient .attr("x1", "0%") .attr("x2", "0%") .attr("y1", "100%") .attr("y2", "0%"); //Setting all fill colors let lastPoint = false; [0, ...colorPalette.filter((_, i) => i % 2 !== 0)].forEach((c) => { if (c <= d3.max(data.data, (v) => v.value) || !lastPoint) { if (c > d3.max(data.data, (v) => v.value)) lastPoint = true; gradient .append("stop") .attr("offset", colorLimits(c) + "%") .style( "stop-color", selectLookup[dataType] === "pm" ? colorThresholdPM(c) : colorThresholdLE(c) ) .style("stop-opacity", 1); } }); //Add fill color svg .append("path") .datum(data.data) .attr("fill", "url(#mygrad)") .attr("fill-opacity", 0.8) .attr("stroke", "none") .attr( "d", d3 .area() .x(function (d) { return xScale(d.year); }) .y0(height) .y1(function (d) { return yScale(d.value); }) ); data.years.forEach((y) => { if (y) addPointAndYear( y, data.data[y.getFullYear() - 1998].value, xScale, yScale, selectLookup[dataType] === "pm" ? colorThresholdPM(data.data[y.getFullYear() - 1998].value) : colorThresholdLE(data.data[y.getFullYear() - 1998].value), svg ); }); chartSection.appendChild(svg.node()); }3c:[{"id":"24da252618ee6c08a4a92721cb1e11f4af8283781f9b24e4427cfc39683802e613bc4fbfb6d9cc1d8aa404fc4f5efab10f396a52a47ef7e677c361c9a559a2b1","href":"https://static.observableusercontent.com/files/24da252618ee6c08a4a92721cb1e11f4af8283781f9b24e4427cfc39683802e613bc4fbfb6d9cc1d8aa404fc4f5efab10f396a52a47ef7e677c361c9a559a2b1","name":"bounding-boxes.json","type":"application/json","lastModified":1679497071106.14,"size":9073},{"id":"82b1eb234f03f1b4c0362c8140a34fab67be300bed5d43ffac1ab86a35252e5f1bbede8d613d2e347d4c8e6dbe9be8c694ddff3a96ec18be8bcb56cb07a36d5f","href":"https://static.observableusercontent.com/files/82b1eb234f03f1b4c0362c8140a34fab67be300bed5d43ffac1ab86a35252e5f1bbede8d613d2e347d4c8e6dbe9be8c694ddff3a96ec18be8bcb56cb07a36d5f","name":"aqli_2020_gadm0.csv","type":"text/csv","lastModified":1679497071106.14,"size":265378},{"id":"23c6c3eec07e9273a9b9b9f830dad7282c95e0b6ff03c07891c642b697f4dcea1b1c801b8d263ac5508ab2c5e39e0521e9ceb288089a0812ccf320d4075768a9","href":"https://static.observableusercontent.com/files/23c6c3eec07e9273a9b9b9f830dad7282c95e0b6ff03c07891c642b697f4dcea1b1c801b8d263ac5508ab2c5e39e0521e9ceb288089a0812ccf320d4075768a9","name":"aqli_2020_gadm2.csv","type":"text/csv","lastModified":1679497071106.14,"size":21974362}] 2d:{"title":"AQLI Index map","cells":[{"id":0,"value":"# AQLI Index map \nDemo edition: 2023 Jan\n

\nHi AQLI team, here is the demo!
\nIt shows the map (using Mapbox) and some existing functions in the [AQLI Index page](https://aqli.epic.uchicago.edu/the-index) such as worldviews, data types, a year slider (with the 2rd year option). More details will be explained later in this page. Let's have a look at it first.
\n** Note that the text, layout, and style are temporary. **
\n** The interaction to show hover/popup card here is experimental.**","pinned":false,"hidden":false,"mode":"md"},{"id":2087,"value":"// https://docs.mapbox.com/mapbox-gl-js/example/language-switch/\nviewof language = Inputs.radio([\"English\", \"中文（簡）\", \"中文（繁）\"], {\n //\"中文\", \"हिन्दी\"], {\n label: \"Select a language:\",\n value: \"English\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1780,"value":"viewof worldviewType = Inputs.radio([\"Rest of the world\", \"China\", \"India\"], {\n label: \"Select a worldview:\",\n value: \"Rest of the world\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2051,"value":"viewof dataType = Inputs.radio(\n [\"Fine Particulate Matter\", \"WHO guidelines\", \"National Standard\"],\n {\n label: \"Select a data type:\",\n value: \"Fine Particulate Matter\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"viewof year = secondYear.length <= 0\n ? Inputs.range([1998, props[\"pm\"].columns.length - 1 + 1998], {\n label: `${dataType} from year ...`,\n step: 1,\n value: 2020\n })\n : interval([1998, props[\"pm\"].columns.length - 1 + 1998], {\n step: 1,\n value: [2019, 2020],\n label: `${dataType} from year ...`\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"viewof secondYear = Inputs.checkbox([\"\"], {\n label: \"Add second year to show change ...\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"### Air pollution ${ secondYear.length > 0 ? ('between ' + year[0] + ' and ' + year[1]) : 'in ' + year}","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":309,"value":"viewof proj = Inputs.select(projections, {\n label: \"Choose a projection\",\n format: (d) => d.name\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2060,"value":"---\n## Map (using Mapbox)\n
\n**Add a basemap style and zoom control**
\nChoose a style: https://docs.mapbox.com/api/maps/#styles","pinned":false,"hidden":false,"mode":"md"},{"id":190,"value":"map = new mapboxgl.Map({\n container: \"map\",\n style: \"mapbox://styles/mapbox/light-v11\",\n center: [25, 5],\n zoom: 1.1\n})\n\n//if (!mapboxgl.supported()) { alert('Your browser does not support Mapbox GL'); }","pinned":true,"hidden":false,"mode":"ojs"},{"id":2462,"value":"map.addControl(\n new mapboxgl.NavigationControl({ showCompass: false, showZoom: true })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"---\n**Add tiles**\n- Add a (vector tile) source layer to the map using [`addSource`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map%23addsource)\n- Add a new layer using [`addLayer`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map%23addlayer)\n- Create a hover effect using events and [`setFeatureState`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setfeaturestate)\n","pinned":false,"hidden":false,"mode":"md"},{"id":194,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"---\n**Join data**\n
\nSet (and update) the AQLI dummy data to the vector tiles with [`setfeatureState`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setFeaturestate)\n","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2025,"value":"updateData(year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1741,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2.11.0\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoiZm5kdml0IiwiYSI6ImNrYzBzYjhkMDBicG4yc2xrbnMzNXVoeDIifQ.mrdvw_7AIeOwa5IgHLaHJg\";\n const href = await require.resolve(\"mapbox-gl@2.11.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"---\n## Components\n
\n### Inputs:\n- languages, worldviews, projections\n- data types, year(s), second year","pinned":false,"hidden":false,"mode":"md"},{"id":1894,"value":"---\n[Change worldview of administrative boundaries](https://docs.mapbox.com/mapbox-gl-js/example/toggle-worldviews/) using [`setFilter`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map%23setfilter)
\nworldview types: US (rest of the world), CN (China), IN(India), and Pakistan?","pinned":false,"hidden":false,"mode":"md"},{"id":1888,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1891,"value":"filterLayers(worldviewType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2264,"value":"[Change a map's language](https://docs.mapbox.com/mapbox-gl-js/example/language-switch/)
\nSwitch languages dynamically using [`setLayoutProperty`](https://docs.mapbox.com/mapbox-gl-js/api/#map#setlayoutproperty) or
\n[mapbox-gl-language](https://github.com/mapbox/mapbox-gl-language) plugin switch language based on user agent (browser)","pinned":false,"hidden":false,"mode":"md"},{"id":2261,"value":"languageLookup = ({\n English: \"en\",\n \"中文（簡）\": \"zh-Hans\",\n \"中文（繁）\": \"zh-Hant\"\n //browser's language\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2251,"value":"[\"country-label\", \"state-label\"].forEach((layer) => {\n map.setLayoutProperty(layer, \"text-field\", [\n \"get\",\n `name_${languageLookup[language]}`\n ]);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2311,"value":"[Use different map projections for web maps](https://docs.mapbox.com/mapbox-gl-js/example/projections/), or
\n[Display a web map using an alternate projection](https://docs.mapbox.com/mapbox-gl-js/example/map-projection/)\n","pinned":false,"hidden":false,"mode":"md"},{"id":303,"value":"projections = [\n { name: \"Equirectangular (Current)\", value: \"equirectangular\" },\n { name: \"Equal Earth\", value: \"equalEarth\" },\n { name: \"Globe\", value: \"globe\" },\n { name: \"Winkel Tripel (NatGeo)\", value: \"winkelTripel\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"map.setProjection({\n name: proj.value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"---\nThis prop object contains all the params for each type of data (pm, who and ns). You can specify the column on the dataset and the color palette","pinned":false,"hidden":false,"mode":"md"},{"id":328,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"selectLookup = {\n return {\n \"Fine Particulate Matter\": \"pm\",\n \"WHO guidelines\": \"who\",\n \"National Standard\": \"ns\"\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1032,"value":"colorPalette = props[selectLookup[dataType]].colors[\"default\"].slice(2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1020,"value":"colorThresholdPM = {\n const colorPalette = props[\"pm\"].colors[\"default\"].slice(2);\n return d3\n .scaleThreshold()\n .domain(colorPalette.filter((_, i) => i % 2 !== 0))\n .range(colorPalette.filter((_, i) => i % 2 === 0));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"colorThresholdLE = {\n const colorPalette = props[\"who\"].colors[\"default\"].slice(2);\n return d3\n .scaleThreshold()\n .domain(colorPalette.filter((_, i) => i % 2 !== 0))\n .range(colorPalette.filter((_, i) => i % 2 === 0));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"[Change a layer's color with buttons](https://docs.mapbox.com/mapbox-gl-js/example/color-switcher/)\n
\nUpdate a layer's color palette and scale depending on the data type using [`setPaintProperty`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setpaintproperty)","pinned":false,"hidden":false,"mode":"md"},{"id":339,"value":"map.setPaintProperty(\"aqli-fill\", \"fill-color\", [\n \"case\",\n [\"==\", [\"feature-state\", \"value\"], null],\n \"#f2f2f2\",\n props[selectLookup[dataType]][\"colors\"][\n secondYear.length > 0 ? \"between\" : \"default\"\n ]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1948,"value":"### Legend","pinned":false,"hidden":false,"mode":"md"},{"id":1946,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":785,"value":"### Card (popup or hover)","pinned":false,"hidden":false,"mode":"md"},{"id":1109,"value":"listSpotlights = [\"Bangladesh\", \"China\", \"India\", \"Indonesia\", \"Pakistan\", \"United States\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1123,"value":"viewTypeLookup = ({\n \"Fine Particulate Matter\": \"PM\",\n \"WHO guidelines\": \"global\",\n \"National Standard\": \"national\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1957,"value":"** Set and update card data: **","pinned":false,"hidden":false,"mode":"md"},{"id":773,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1113,"value":"// TODO: customise format\nformatBigInteger = (value) => {\n return value > 999 && value < 100000 ? \n d3.format('.0s')(value) : value >= 100000 ? \n d3.format('.3s')(value) : value;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"setTextContents = (element, id, key, data) => {\n const values = Array.isArray(data) ? data : [data];\n element.querySelectorAll(\"#\" + id + \" .\" + key).forEach((el, i) => {\n el.textContent = values[i];\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"displayElementIfConditionMet = (element, id, className, condition) => {\n const elementClassList = element.querySelector(\n \"#\" + id + \" .\" + className\n ).classList;\n elementClassList.add(\"hide\"); // reset\n if (condition) {\n elementClassList.remove(\"hide\");\n } //display\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"handleBtnClick = (el, level) => {\n switch (level) {\n case 0:\n hidePopupCard();\n break;\n case 1:\n // TODO: set country data\n // setCardContent(data[\"USA\"]);\n break;\n // ...\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1723,"value":"**Events:**\n- mouse hover on the map to show a country/region hover card\n- mouse click on the map to show the country popup card","pinned":false,"hidden":false,"mode":"md"},{"id":1102,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2387,"value":"hideTooltip = (who) => {\n //console.log(\"hide tooltip!\", who);\n const elTooltip = document.getElementById(\"tooltip\");\n elTooltip.style.left = \"-600px\";\n elTooltip.style.top = \"-600px\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2635,"value":"hidePopupCard = () => {\n const elPopupCard = document.getElementById(\"card\");\n const classListPopupCard = elPopupCard.classList;\n console.log(\"hide popup\");\n if (!classListPopupCard.contains(\"hide\")) {\n classListPopupCard.add(\"hide\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1668,"value":"isArrayEqual = (arr1, arr2) => arr1.every((d, i) => d === arr2[i])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1571,"value":"debounce = (callback, wait) => {\n let timeoutId = null;\n return (...args) => {\n window.clearTimeout(timeoutId);\n timeoutId = window.setTimeout(() => {\n callback.apply(null, args);\n }, wait);\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1937,"value":"** HTML (template): **","pinned":false,"hidden":false,"mode":"md"},{"id":1915,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1962,"value":"** CSS (using tailwind): **","pinned":false,"hidden":false,"mode":"md"},{"id":1873,"value":"tailwindcss = require(\"https://cdn.tailwindcss.com\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"$3a","pinned":false,"hidden":false,"mode":"html"},{"id":870,"value":"### Area chart","pinned":false,"hidden":false,"mode":"md"},{"id":872,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"addPointAndYear = (year, value, xScale, yScale, color, svg) => {\n addPoint(year, value, xScale, yScale, color, svg);\n addYear(xScale, yScale, year, value, svg);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"addPoint = (x, y, xScale, yScale, color, svg) => {\n svg\n .append(\"circle\")\n .attr(\"fill\", color)\n .attr(\"stroke\", \"white\")\n .attr(\"cx\", function (d) {\n return xScale(x);\n })\n .attr(\"cy\", function (d) {\n return yScale(y);\n })\n .attr(\"r\", 6);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":906,"value":"addYear = (xScale, yScale, year, value, svg) => {\n svg\n .append(\"text\")\n .attr(\"x\", xScale(year))\n .attr(\"y\", yScale(value))\n .attr(\"dx\", \"-15px\")\n .attr(\"dy\", \"-10px\")\n .attr(\"fill\", \"black\")\n .text(year.getFullYear());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"parseYear = (year) => d3.timeParse(\"%Y-%m-%d\")(year + \"-01-01\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"---\n## External imports","pinned":false,"hidden":false,"mode":"md"},{"id":321,"value":"import { interval } from \"@mootari/range-slider@1781\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1396,"value":"turf = require(\"https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1461,"value":"boundingBoxes = FileAttachment(\"bounding-boxes.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1866,"value":"---\n## Data","pinned":false,"hidden":false,"mode":"md"},{"id":1848,"value":"aqli_2020_gadm0 = await FileAttachment(\"aqli_2020_gadm0.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1849,"value":"aqli_2020_gadm2 = await FileAttachment(\"aqli_2020_gadm2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2694,"value":"---\n## Next\nNow, we move on to the dev environment using (front-end)\ntech stack:\n- Framework: Svelte/TypeScript, and Tailwind CSS\n- Library: Mapbox, d3-array/scale/...\n- Storybook for UI components","pinned":false,"hidden":false,"mode":"md"}],"files":"$W3c","stdlib":"1","titling":"auto"}