31:T747,example1Full = Plot.plot({ width, marginTop: 36, caption: `Interactive line chart of the coarse particle levels in the Eixample weather station in Barcelona between ${dateFormat( timeSelect[0] )} and ${dateFormat( timeSelect[1] )}. The user can modify the time interval to average the data and choose the beginning and end of the series to see the effects of these data choices in the communication. Data from the Catalonia Open Data Catalog`, y: { label: "PM10 levels (in µg/m³)", grid: true }, x: { label: "Date" }, marks: [ Plot.ruleY([0]), Plot.lineY( meanAirPollution.filter( (d) => d.time > timeSelect[0] && d.time < timeSelect[1] ), { x: "time", y: "value", curve: "bump-x", stroke: "#ec008c", strokeWidth: dateInterval === "day" || dateInterval === "week" ? 1.2 : 1.8, interval: dateInterval, tip: { format: { x: (d) => `${dateFormat(d)}`, y: (d) => `${numberFormat(d)}` } } } ), Plot.dotY( meanAirPollution.filter( (d) => d.time > timeSelect[0] && d.time < timeSelect[1] ), Plot.selectMaxY({ x: "time", y: "value", fill: "#ec008c", stroke: "#FFF", r: 4, interval: dateInterval }) ), Plot.text( aggregateDataByInterval(airPollution, dateInterval).filter( (d) => d.time > timeSelect[0] && d.time < timeSelect[1] ), Plot.selectMaxY({ x: "time", text: (d) => numberFormat(d.value), y: "value", lineAnchor: "middle", dx: dateInterval === "year" ? 12 : 0, dy: -10, textAnchor: "start", interval: dateInterval, fontWeight: "bold", fontSize: 12 }) ) ] })32:T570,example2Bars = html`

${Plot.plot({ height: 14 * humanExposureImpact.length, width, marginRight: 40, marginLeft: 6, x: { axis: "both", grid: true, label: "Population (in %)" }, y: {label: "", tickFormat: () => "", tickSize: 0}, color: { type: "threshold", scheme: "ylorrd", domain: [10, 25, 50, 75] }, marks: [ Plot.barX(humanExposureImpact, { x: "value", y: "name", fill: "value", sort: { y: "x", reverse: true } }), // Text labels inside the bars, flushed left Plot.text(humanExposureImpact, { x: 0, // Align at the start of bars y: "name", text: "name", textAnchor: "start", // Left-align text dx: 5, fill: d => d.value < 50 ? "black" : "white", }), Plot.gridX({stroke: "white", strokeOpacity: 0.5}), Plot.ruleX([0]) ] })}

Scroll down ↓

` 33:T770,example2Map = Plot.plot({ width, height: width * 0.8, title: "Human exposure to harmful climate impacts", subtitle: "Share of the population exposed to river floods, wind storms, coastal flooding, river flooding, water shortage and wildfire danger.", projection: projectionEU, caption: "Administrative boundaries: ©EuroGeographics ©UN-FAO ©INSTAT ©Turkstat. Data from the Joint Research Centre. The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the European Union concerning the legal status of any country, territory, city or area or of its authorities, or concerning the delimitation of its frontiers or boundaries. Kosovo*: This designation is without prejudice to positions on status, and is in line with UNSCR 1244/1999 and the ICJ Opinion on the Kosovo declaration of independence.", color: { type: "threshold", scheme: "YlOrRd", domain: [10, 25, 50, 75], unknown: "#eeeeee", legend: true, label: "Population (in %)" }, marks: [ Plot.geo(europeImpact, { filter: (d) => d.properties.LEVL_CODE == 3, fill: "value", title: (d) => d.properties.value !== null ? `${d.properties.NUTS_NAME}\n ${d.properties.value}` : "No data", tip: true }), Plot.geo(borders, { filter: (d) => d.properties.EU_FLAG === "T" }), Plot.geo(borders, { filter: (d) => d.properties.CC_FLAG === "T", stroke: "#BDBDBD" }), Plot.geo(parallel40N, { strokeOpacity: 0.15, strokeWidth: 3 }), Plot.text( [ { text: "42nd parallel north", longitude: 6, latitude: 42 } ], { text: "text", x: "longitude", y: "latitude", textAnchor: "middle", dy: 12, rotate: 3.6 } ) ] })34:Tdfc,example3 = html`

${Plot.plot({ title: "Greenhouse Gas Emissions Shrink in the EU", subtitle: "Total emissions (excluding land use impacts, including aviation) measured in million tonnes of CO2 equivalent", caption: "Area chart of the carbon emissions in the EU with an upside down y-axis shows the decline of greenhouse gas emissions in the EU since 1990 —although the y-axis orientation is prone to be misread as the opposite. Data from Eurostat.", width: width > 540 ? width / 2 : width, height: 540, x: { tickFormat: "" }, y: { reverse: true, label: null, tickFormat: ".2s" }, marks: [ Plot.areaY(emissions, { x: "year", y: "emissions", fill: "#8fc23e" }), Plot.ruleY([0]), Plot.gridY({ stroke: "#505050", strokeOpacity: 0.5 }), Plot.ruleY([5000000]), Plot.lineY(emissions, { x: "year", y: "emissions", marker: true }), Plot.tip( [ { text: "The EU ratifies the Kyoto protocol", year: 2002, emissions: 4500000 }, { text: "It adopts the Paris Agreement", year: 2015, emissions: 3800000 } ], { x: "year", y: "emissions", title: "text", lineWidth: 10 } ), Plot.text( emissions, Plot.selectLast({ x: "year", y: "emissions", text: (d) => d3.format(".2s")(d.emissions), frameAnchor: "bottom", dy: -12, fontWeight: "bold", fontSize: 12 }) ), Plot.text( emissions, Plot.selectFirst({ x: "year", y: "emissions", text: (d) => d3.format(".2s")(d.emissions), frameAnchor: "bottom", dy: -12, fontWeight: "bold", fontSize: 12 }) ) ] })}

${Plot.plot({ title: "Greenhouse Gas Emissions Shrink in the EU", subtitle: "Total emissions (excluding land use impacts, including aviation) measured in million tonnes of CO2 equivalent", caption: "Line chart showing the decline of greenhouse gas emissions in the EU since 1990. Data from Eurostat.", width: width > 540 ? width / 2 : width, height: 540, marginRight: 30, x: { tickFormat: "" }, y: { label: null, tickFormat: ".2s", domain: [3000000, 5000000], ticks: 6, grid: true }, marks: [ Plot.lineY(emissions, { x: "year", y: "emissions", stroke: "#4e8300", marker: true }), Plot.tip( [ { text: "The EU ratifies the Kyoto protocol", year: 2002, emissions: 4600000 }, { text: "It adopts the Paris Agreement", year: 2015, emissions: 3950000 } ], { x: "year", y: "emissions", title: "text", lineWidth: 10 } ), Plot.text( emissions, Plot.selectLast({ x: "year", y: "emissions", text: (d) => d3.format(".2s")(d.emissions), frameAnchor: "bottom", dy: -6, fontWeight: "bold", fontSize: 12, textAnchor: "start" }) ), Plot.text( emissions, Plot.selectFirst({ x: "year", y: "emissions", text: (d) => d3.format(".2s")(d.emissions), frameAnchor: "bottom", dy: -6, fontWeight: "bold", fontSize: 12, textAnchor: "start" }) ) ] })}

`35:T7d9,example4 = Plot.plot({ width, height: 500, marginLeft: 80, title: "Land and Marine Protected Areas in the EU", subtitle: "Total surface by country (in km²)", caption: `Interactive ${ !barOptions.stack ? "stacked bar chart" : "side-by-side bar charts" } of the land and marine protected areas by country in the EU with ${ barOptions.intuitive ? "" : "un" }intuitive colors`, y: { label: null }, x: { grid: true }, color: { range: barOptions.intuitive ? ["#fecb6f", "#2561bf"] : ["#2561bf", "#fecb6f"], legend: !barOptions.stack, tickFormat: (d) => d.charAt(0).toUpperCase() + d.slice(1) + " areas", marginLeft: 80 }, fx: { label: "", tickFormat: (d) => d.charAt(0).toUpperCase() + d.slice(1) + " areas" }, marks: [ Plot.barX(land_marine, { y: "country", x: "area", fx: barOptions.stack ? "type" : null, fill: "type", order: "-inside-out", sort: { color: null, y: "-x" } }), Plot.gridX({ stroke: "white", strokeOpacity: 0.5 }), !barOptions.stack ? Plot.tip( [ { wrong: "Wait ... These two countries are famously landlocked! 😱", right: "Ah! Gotcha! Well ... Quit toying with colors. 😠", country: "Austria", area: 25000 } ], { y: "country", x: "area", title: barOptions.intuitive ? "right" : "wrong", anchor: "left" } ) : null, !barOptions.stack ? Plot.tip( [ { wrong: "And so are these! 🤪", right: "Yeah, yeah ... those too. They're fine now. 🤓", country: "Slovakia", area: 20000 } ], { y: "country", x: "area", title: barOptions.intuitive ? "right" : "wrong", anchor: "left" } ) : null ] })36:T6d3,example5Diff = html`

${Plot.plot({ width: width < 540 ? width : width / 2, height: width * 0.6, projection, title: "7-day incidence by district", subtitle: "As of March 17, 2021", caption: "Map of the seven-day incidence of COVID-19 in Germany as of March 17, 2021. Data from the Robert Koch-Institut (RKI).", color: { type: "threshold", domain: [25, 50, 100, 250, 500], range: ["#fdeb51", "#ffa72d", "#fc722e", "#e50014", "#731914"], legend: true, label: "" }, marks: [ Plot.geo(germanyA, { channels: { name: { value: (d) => d.properties.GEN, label: "" } }, tip: { format: { name: true, fill: true } }, stroke: "#FFF", strokeOpacity: 0.15, fill: "i" }) ] })}

${Plot.plot({ width: width < 540 ? width : width / 2, height: width * 0.6, projection, title: "7-day incidence by district", subtitle: "As of April 9, 2021", caption: "Map of the seven-day incidence of COVID-19 in Germany as of April 9, 2021. Data from the Robert Koch-Institut (RKI).", color: { type: "threshold", domain: [20, 35, 50, 100, 200], range: ["#fdeb51", "#ffa72d", "#e50014", "#ae0000", "#6c120f", "#330000"], legend: true, label: "" }, marks: [ Plot.geo(germanyB, { channels: { name: { value: (d) => d.properties.GEN, label: "" } }, tip: { format: { name: true, fill: true } }, stroke: "#FFF", strokeOpacity: 0.15, fill: "i" }) ] })}

`37:T6c7,example5Same = html`

${Plot.plot({ width: width < 540 ? width : width / 2, height: width * 0.6, projection, title: "7-day incidence by district", subtitle: "As of April 9, 2021", caption: "Map of the seven-day incidence of COVID-19 in Germany as of April 9, 2021. Data from the Robert Koch-Institut (RKI).", color: { type: "threshold", domain: [25, 50, 100, 250, 500], range: ["#fdeb51", "#ffa72d", "#fc722e", "#e50014", "#731914"], legend: true, label: "" }, marks: [ Plot.geo(germanyB, { channels: { name: { value: (d) => d.properties.GEN, label: "" } }, tip: { format: { name: true, fill: true } }, stroke: "#FFF", strokeOpacity: 0.2, fill: "i" }) ] })}

`38:T688,join = (geo, data, id, attr, altnames = {}) => ({ ...geo, features: geo.features.map((feature) => { // Determine the ID to use for matching, depending on whether 'id' is a string or an object let featureId = typeof id === "string" ? feature.id : feature.properties[id.geo]; // Using id.geo instead of id.property // Promote the feature's ID if 'id' is an object if (typeof id === "object" && id.geo) { feature.id = featureId; // Promote the geo property value to feature.id } // Find the matching row in the data by comparing featureId with id.data let match = data.find((d) => d[id.data || id] === featureId); // If no match and altnames are provided and valid, try matching using altnames if (!match && altnames.match && altnames.property) { match = data.find( (item) => item[altnames.match] === feature.properties[altnames.property] ); } // Check if match is valid by comparing first two letters (only if both exist) if ( match && match[id.data || id] && featureId && match[id.data || id].slice(0, 2) !== featureId.slice(0, 2) ) { match = null; // Reset match if the first two letters don't match } // Debugging: Log the featureId and the matched result console.log('Feature ID:', featureId); console.log('Match found:', match); // Add the "i" attribute from the matched data into the geojson properties return { ...feature, properties: { ...feature.properties, [attr]: match ? match[attr] : null // Assign the "i" value from data, or null if not found } }; }) }); 39:T4f4,emissions = [ { year: 1990, emissions: 4921875 }, { year: 1991, emissions: 4815185 }, { year: 1992, emissions: 4667571 }, { year: 1993, emissions: 4590207 }, { year: 1994, emissions: 4570854 }, { year: 1995, emissions: 4624820 }, { year: 1996, emissions: 4718755 }, { year: 1997, emissions: 4650281 }, { year: 1998, emissions: 4615371 }, { year: 1999, emissions: 4546465 }, { year: 2000, emissions: 4538241 }, { year: 2001, emissions: 4586088 }, { year: 2002, emissions: 4569753 }, { year: 2003, emissions: 4648437 }, { year: 2004, emissions: 4652800 }, { year: 2005, emissions: 4640528 }, { year: 2006, emissions: 4649516 }, { year: 2007, emissions: 4604263 }, { year: 2008, emissions: 4517703 }, { year: 2009, emissions: 4191066 }, { year: 2010, emissions: 4272356 }, { year: 2011, emissions: 4166359 }, { year: 2012, emissions: 4093575 }, { year: 2013, emissions: 4004051 }, { year: 2014, emissions: 3864272 }, { year: 2015, emissions: 3918664 }, { year: 2016, emissions: 3919936 }, { year: 2017, emissions: 3951066 }, { year: 2018, emissions: 3878419 }, { year: 2019, emissions: 3716948 }, { year: 2020, emissions: 3348693 }, { year: 2021, emissions: 3530829 }, { year: 2022, emissions: 3484466 } ]3a:T7d7,airPollutionChart = (_timeSelect, _dateInterval, title, _width) => { return Plot.plot({ width: _width, marginTop: 36, caption: `Line chart of the coarse particle levels in the Eixample weather station in Barcelona between ${dateFormat( _timeSelect[0] )} and ${dateFormat( _timeSelect[1] )}. Data from the Catalonia Open Data Catalog.`, title, marginLeft: 21, y: { label: "PM10 levels (in µg/m³)", grid: true }, x: { label: "Date" }, marks: [ Plot.ruleY([0]), Plot.lineY( aggregateDataByInterval(airPollution, _dateInterval).filter( (d) => d.time > _timeSelect[0] && d.time < _timeSelect[1] ), { x: "time", y: "value", curve: "bump-x", stroke: "#ec008c", strokeWidth: _dateInterval === "day" || _dateInterval === "week" ? 1.2 : 1.8, interval: _dateInterval, tip: { format: { x: (d) => `${dateFormat(d)}`, y: (d) => `${numberFormat(d)}` } } } ), Plot.dotY( aggregateDataByInterval(airPollution, _dateInterval).filter( (d) => d.time > _timeSelect[0] && d.time < _timeSelect[1] ), Plot.selectMaxY({ x: "time", y: "value", fill: "#ec008c", stroke: "#FFF", r: 4, interval: _dateInterval }) ), Plot.text( aggregateDataByInterval(airPollution, _dateInterval).filter( (d) => d.time > _timeSelect[0] && d.time < _timeSelect[1] ), Plot.selectMaxY({ x: "time", y: "value", text: (d) => numberFormat(d.value), lineAnchor: "middle", dx: dateInterval === "year" ? 12 : 0, dy: -10, textAnchor: "start", interval: _dateInterval, fontWeight: "bold", fontSize: 12 }) ) ] }); }3b:Tb92,land_marine = [ { country: "Belgium", area: 4504.7, type: "land" }, { country: "Bulgaria", area: 45460.1, type: "land" }, { country: "Czechia", area: 17258.7, type: "land" }, { country: "Denmark", area: 6435.2, type: "land" }, { country: "Germany", area: 133707.9, type: "land" }, { country: "Estonia", area: 9480.9, type: "land" }, { country: "Ireland", area: 9710.7, type: "land" }, { country: "Greece", area: 46062.5, type: "land" }, { country: "Spain", area: 141623.1, type: "land" }, { country: "France", area: 153906.1, type: "land" }, { country: "Croatia", area: 21522.7, type: "land" }, { country: "Italy", area: 64428.7, type: "land" }, { country: "Cyprus", area: 3490.5, type: "land" }, { country: "Latvia", area: 11724.5, type: "land" }, { country: "Lithuania", area: 11129.7, type: "land" }, { country: "Luxembourg", area: 1447.7, type: "land" }, { country: "Hungary", area: 20687.5, type: "land" }, { country: "Malta", area: 91.6, type: "land" }, { country: "Netherlands", area: 9915, type: "land" }, { country: "Austria", area: 24509.6, type: "land" }, { country: "Poland", area: 123544.8, type: "land" }, { country: "Portugal", area: 20547.2, type: "land" }, { country: "Romania", area: 55890.4, type: "land" }, { country: "Slovenia", area: 8209.6, type: "land" }, { country: "Slovakia", area: 18351.4, type: "land" }, { country: "Finland", area: 44776.7, type: "land" }, { country: "Sweden", area: 67521.1, type: "land" }, { country: "Belgium", area: 1322, type: "marine" }, { country: "Bulgaria", area: 2856, type: "marine" }, { country: "Czechia", area: null, type: "marine" }, { country: "Denmark", area: 19681, type: "marine" }, { country: "Germany", area: 25637, type: "marine" }, { country: "Estonia", area: 6813, type: "marine" }, { country: "Ireland", area: 10261, type: "marine" }, { country: "Greece", area: 22746, type: "marine" }, { country: "Spain", area: 132818, type: "marine" }, { country: "France", area: 168367, type: "marine" }, { country: "Croatia", area: 5278, type: "marine" }, { country: "Italy", area: 56771, type: "marine" }, { country: "Cyprus", area: 8463, type: "marine" }, { country: "Latvia", area: 4470, type: "marine" }, { country: "Lithuania", area: 1551, type: "marine" }, { country: "Luxembourg", area: null, type: "marine" }, { country: "Hungary", area: null, type: "marine" }, { country: "Malta", area: 4142, type: "marine" }, { country: "Netherlands", area: 16451, type: "marine" }, { country: "Austria", area: null, type: "marine" }, { country: "Poland", area: 7247, type: "marine" }, { country: "Portugal", area: 76960, type: "marine" }, { country: "Romania", area: 6354, type: "marine" }, { country: "Slovenia", area: 11, type: "marine" }, { country: "Slovakia", area: null, type: "marine" }, { country: "Finland", area: 9058, type: "marine" }, { country: "Sweden", area: 24837, type: "marine" } ]3c:[{"id":"432a5fe7ee07d874d7acb74fdfc14e23d2eb7556bb502fda548361812da93fc3cfb10c729756af4c89fe176ee6ed8ddd4428dc76afbd405d3883a8976e330e8d","href":"https://static.observableusercontent.com/files/432a5fe7ee07d874d7acb74fdfc14e23d2eb7556bb502fda548361812da93fc3cfb10c729756af4c89fe176ee6ed8ddd4428dc76afbd405d3883a8976e330e8d","name":"air-pollution-bcn.csv","type":"text/csv","lastModified":1729102350321.864,"size":1986022},{"id":"ce2d7339e321aa8e87aae58fcfa9c0f6f21e839b4bc9deb536739ab32ba3d59098ab24f01f7e7148e7ed5c66b0943d839d72632259befd23d8f4051302bccbd4","href":"https://static.observableusercontent.com/files/ce2d7339e321aa8e87aae58fcfa9c0f6f21e839b4bc9deb536739ab32ba3d59098ab24f01f7e7148e7ed5c66b0943d839d72632259befd23d8f4051302bccbd4","name":"7di-rki-by-ags.csv","type":"text/csv","lastModified":1729102350321.864,"size":2857499},{"id":"b205a1a262f4978fcfed89d13f196eb07b888e4d9c27ed84de9d522e458e76d59c246cd5293cf7ac7047f1fa4212080a7730e599d07102377f0ad63432158e76","href":"https://static.observableusercontent.com/files/b205a1a262f4978fcfed89d13f196eb07b888e4d9c27ed84de9d522e458e76d59c246cd5293cf7ac7047f1fa4212080a7730e599d07102377f0ad63432158e76","name":"human-exposure-impact.json","type":"application/json","lastModified":1729102350321.864,"size":59626},{"id":"110d3ce20649ce362cfcdfd7b3487eca3a95f2faaf77f2ee8c7cd122dae33b986627a5f1baae0910af70d4175ef436cfb62f633a5fc0fbd8cdc3c1f9d2a3f533","href":"https://static.observableusercontent.com/files/110d3ce20649ce362cfcdfd7b3487eca3a95f2faaf77f2ee8c7cd122dae33b986627a5f1baae0910af70d4175ef436cfb62f633a5fc0fbd8cdc3c1f9d2a3f533","name":"DE-counties.geojson","type":"application/geo+json","lastModified":1729102350321.864,"size":3674152},{"id":"d3ad890c6a8efe927e91aa516b000539248e1fa6371a4be9634c02681eb8f122ebd337498cc7a8ada90492a82b94c1ceb29413f4cb045fbe253da81246ca86a9","href":"https://static.observableusercontent.com/files/d3ad890c6a8efe927e91aa516b000539248e1fa6371a4be9634c02681eb8f122ebd337498cc7a8ada90492a82b94c1ceb29413f4cb045fbe253da81246ca86a9","name":"germany@3.json","type":"application/json","lastModified":1729102350321.864,"size":270370},{"id":"2d01cb737b3bd33ec854512edde0608c98a074f67217791861f110fcfd85af6d51715323488d55b9e9480ab8e37ee7a6de068a9ff35a9f1777da234ca074e9b7","href":"https://static.observableusercontent.com/files/2d01cb737b3bd33ec854512edde0608c98a074f67217791861f110fcfd85af6d51715323488d55b9e9480ab8e37ee7a6de068a9ff35a9f1777da234ca074e9b7","name":"LK_complete.json","type":"application/json","lastModified":1729102350321.864,"size":47609671},{"id":"cf1fed2565bd11c77f37c61580d191bdb004ddd83ca457cd8abb459c48ccfe0ef8b9885bc2ab20f857c56ef716d59579b097ab565ef788601cd69c464660bdff","href":"https://static.observableusercontent.com/files/cf1fed2565bd11c77f37c61580d191bdb004ddd83ca457cd8abb459c48ccfe0ef8b9885bc2ab20f857c56ef716d59579b097ab565ef788601cd69c464660bdff","name":"BL_complete.json","type":"application/json","lastModified":1729102350321.864,"size":1815640},{"id":"176b037fdd8aef98280248e3048aec2ff637267b17b855c433670af856a7c3dc388460d4cbb07121414d827023bf3e6c8630a3e82961567f1d9ca46b6b702657","href":"https://static.observableusercontent.com/files/176b037fdd8aef98280248e3048aec2ff637267b17b855c433670af856a7c3dc388460d4cbb07121414d827023bf3e6c8630a3e82961567f1d9ca46b6b702657","name":"borders.json","type":"application/json","lastModified":1729102350321.864,"size":208299},{"id":"f220c1fbbb8da869334e5e835cca3e97be4a74bf21e45f78365f7dd9af3e503c75bfb18f308f71659af811bbc8417075d675e71d8e94a98332203ee72d800166","href":"https://static.observableusercontent.com/files/f220c1fbbb8da869334e5e835cca3e97be4a74bf21e45f78365f7dd9af3e503c75bfb18f308f71659af811bbc8417075d675e71d8e94a98332203ee72d800166","name":"europe_nuts3@3.json","type":"application/json","lastModified":1729102350321.864,"size":863027}] 2f:{"title":"Examples for 'Honest charts: ethics and integrity in data visualization'","cells":[{"id":0,"value":"# Examples for 'Honest charts: ethics and integrity in data visualization'\nHere're the five examples I used in the article. I've added the words I use around them so they can be seen in context here as well.\n\n***This notebook is only meant to host the charts embedded in the story.***","pinned":false,"hidden":false,"mode":"md"},{"id":172,"value":"## Example 1: Something's up with the data\n\nOne of my favorite examples has to do with time series: where do we start and where —or rather when— we cut the series off, what do we do with the variance —how much do the values deviate from the mean, or with the seasonality —if the phenomenon the data is measuring is tied to regular cycles?\n\nTake this air pollution dataset, a time series of 20 years of hourly levels of coarse particulate matter —also known as PM10— from a weather station at the heart of Barcelona city.\n\nI came up with three different trends and stories in the shape of an acute (´), a circumflex (^), and a grave (`) accent mark —see when each of the trends peaks: at the beginning, middle, and end? All three visualizations come off the same dataset but show three wildly different patterns just by massaging the beginning and end of the series and the granularity of the data —showing monthly or yearly averages.","pinned":false,"hidden":false,"mode":"md"},{"id":428,"value":"example1Trio = html`

640 ? \"flex\" : \"block\"\n}; justify-content: space-between; gap: 2rem\">\n

640 ? width / 3 : width}px\">${airPollutionChart(\n [new Date(2020, 6, 0), new Date(2023, 2, 14)],\n \"month\",\n \"Air Pollution in Barcelona Rose Since the End of the Pandemic\",\n width > 640 ? width / 3 : width\n)}

640 ? width / 3 : width}px\">${airPollutionChart(\n [new Date(2021, 0, 0), new Date(2024, 7, 1)],\n \"month\",\n \"The Roller Coaster of Air Pollution Levels in Barcelona\",\n width > 640 ? width / 3 : width\n)}

640 ? width / 3 : width}px\">${airPollutionChart(\n [new Date(2002, 7, 0), new Date(2024, 7, 1)],\n \"year\",\n \"20 years to Halve Air Pollution Levels in Barcelona\",\n width > 640 ? width / 3 : width\n)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"You can play with the interactive below to come up with even more stories:","pinned":false,"hidden":false,"mode":"md"},{"id":232,"value":"viewof dateInterval = Inputs.radio([\"day\", \"week\", \"month\", \"year\"], {\n label: \"Average data by:\",\n value: \"month\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"viewof timeSelect = timeRange(\n d3.min(meanAirPollution, (d) => d.time),\n d3.max(meanAirPollution, (d) => d.time),\n {\n interval: dateInterval\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"## Example 2: Something's up with the visualization\n\nImagine that you’ve got a dataset containing the percentage of people per region that might be exposed to wind storms, coastal flooding, river flooding, water shortage and wildfire danger in 2050 under a 2°C global warming scenario.\nNow imagine the absurdity of stacking more than one thousand bars —one per region … ","pinned":false,"hidden":false,"mode":"md"},{"id":608,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"… when the most significant pattern that the data reveals is a geographical one: that real trouble begins south of the 40th parallel north.","pinned":false,"hidden":false,"mode":"md"},{"id":1003,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"## Example 3: Something's up with the visualization\n\nAn unusual axis orientation must be accompanied by clear annotations or design elements that reinforce the switch or it will be most definitely misread. The example below is inspired by a misguided chart about ‘Gun Deaths in Florida’ —itself misguidedly inspired by an impactful chart of Iraq’s bloody toll.","pinned":false,"hidden":false,"mode":"md"},{"id":767,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"## Example 4: Something's up with the visualization\n\nColor can clarify or create confusion. A heatmap that uses dark colors for low values and light colors for high values might confuse readers who reasonably associate darker colors with larger numbers.\n\nJust like toying with intuitive color associations can have its drawbacks. Like in this midbending choice of blue for land areas, and ochre for marine areas.","pinned":false,"hidden":false,"mode":"md"},{"id":691,"value":"viewof barOptions = Inputs.form({\n intuitive: Inputs.toggle({ label: \"Use intuitive colors\", value: false }),\n stack: Inputs.toggle({\n label: \"Separate land and marine areas\",\n value: false\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"## Example 5: Something's up with the context\n\nIn April 2021 two German media outlets exchanged allegations of manipulation. Bild accused Tagesschau of misleading the public with its color-coded COVID-19 maps when X users showed side by side two different days with two different color scales. The claim was that Tagesschau had used darker shades of red to make the infection rates appear more alarming than before. Tagesschau responded by explaining that the new color scheme was based on a revised threshold for critical infection levels, in line with updated public health guidelines.","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"Yes, you can question the thresholds they used to assign a color to each district and the uneven hue and saturation of the scale. But those maps were never meant to appear next to each other. It’s more the interpreter —and their intent— who’s at fault here, and not so much the author.\n\nTagesschau admitted some fault: while both graphics appeared on their Instagram channel one was from their television report and the other from their digital platform. They agreed that using different graphics across media platforms caused confusion but emphasized that there was no intent to manipulate the data.\n\nBelow are both maps with the same color scale, just for reference and to keep the peace.","pinned":false,"hidden":false,"mode":"md"},{"id":162,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"---\n### Addendum","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"projection = ({\n type: \"conic-conformal\",\n center: [-10.5, -51],\n domain: {\n type: \"MultiPoint\",\n coordinates: [\n [5, 47],\n [15, 47],\n [15, 55],\n [5, 55]\n ]\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"projectionEU = ({\n type: \"conic-conformal\",\n rotate: [-10, -30],\n domain: {\n type: \"MultiPoint\",\n coordinates: [\n [-10, 70],\n [40, 70],\n [40, 32],\n [-10, 32]\n ]\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"bl_complete = FileAttachment(\"BL_complete.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"lk_complete = FileAttachment(\"LK_complete.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"germanyA = join(\n deCounties,\n incidence.filter((d) => d.D === \"2021-03-17\"),\n { geo: \"ARS\", data: \"I\" },\n \"i\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"germanyB = join(\n deCounties,\n incidence.filter((d) => d.D === \"2021-04-09\"),\n { geo: \"ARS\", data: \"I\" },\n \"i\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"germany = topojson.feature(germanyTopoJSON, germanyTopoJSON.objects.counties)","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"germanyTopoJSON = FileAttachment(\"germany@3.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"europeImpact = join(europe, humanExposureImpact, \"id\", \"value\", {\n match: \"name\",\n property: \"NUTS_NAME\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1051,"value":"missing = europeImpact.features\n .filter(\n (d) =>\n d.properties.LEVL_CODE === 3 &&\n d.properties.value === null &&\n ![\"MK\", \"CH\", \"RS\", \"XK\", \"ME\", \"AL\", \"TR\", \"NO\", \"IS\"].includes(\n d.properties.CNTR_CODE\n )\n )\n .map((d) => ({ id: d.id, name: d.properties.NUTS_NAME }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":764,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"dateFormat = d3.utcFormat(\"%B %-e, %Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":945,"value":"numberFormat = d3.format(\",.2f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1116,"value":"parallel40N = ({\n type: \"Feature\",\n geometry: {\n type: \"LineString\",\n coordinates: Array.from({ length: 100 }, (_, i) => [-30 + i, 42]) // Longitude from -30 to 70 at latitude 40\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"meanAirPollution = aggregateDataByInterval(airPollution, dateInterval)","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"airPollution = csvToJSON(airPollutionBcn)","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"csvToJSON = (data) => {\n const jsonResult = [];\n\n data.forEach((row) => {\n const baseTime = new Date(row.data);\n\n for (let i = 1; i <= 24; i++) {\n const hourKey = `h${String(i).padStart(2, \"0\")}`;\n const hourValue = row[hourKey];\n\n const time = new Date(baseTime);\n time.setHours(i - 1);\n\n jsonResult.push({\n time,\n value: hourValue\n });\n }\n });\n\n return jsonResult;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1217,"value":"incidence = wideRKIDataToNarrow(diRkiByAgs)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1213,"value":"wideRKIDataToNarrow = (data) => {\n const jsonData = [];\n\n data.forEach((row) => {\n const date = row[\"time_iso8601\"].split(\"T\")[0]; // Extract date in YYYY-MM-DD format\n\n Object.keys(row).forEach((key) => {\n if (key !== \"time_iso8601\") {\n const districtCode = key.split(\"_\")[0].padStart(5, \"0\"); // Extract district code and zero pad\n const value = parseFloat(row[key]); // Convert the value to a number\n\n jsonData.push({\n D: date, // The date (YYYY-MM-DD)\n I: districtCode, // District code (zero-padded to 5 digits)\n i: value // The actual value for that date and district\n });\n }\n });\n });\n\n return jsonData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1216,"value":"diRkiByAgs = await FileAttachment(\"7di-rki-by-ags.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"getIntervalFunction = (interval) => {\n switch (interval) {\n case \"day\":\n return d3.utcDay;\n case \"week\":\n return d3.utcWeek;\n case \"month\":\n return d3.utcMonth;\n case \"year\":\n return d3.utcYear;\n default:\n return d3.utcDay;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"aggregateDataByInterval = (raw, interval) => {\n const intervalFunc = getIntervalFunction(interval);\n\n return d3\n .rollups(\n raw,\n (v) => d3.mean(v, (d) => d.value),\n (d) => intervalFunc(d.time)\n )\n .map(([time, value]) => ({ time, value }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"airPollutionBcn = await FileAttachment(\"air-pollution-bcn.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"import { timeRange } from \"@jwolondon/time-range-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"europe = topojson.feature(\n europeTopoJSON,\n europeTopoJSON.objects.NUTS_RG_10M_2021_4326\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"europeTopoJSON = FileAttachment(\"europe_nuts3@3.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"humanExposureImpact = FileAttachment(\"human-exposure-impact.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"humanExposure = jsonToMap(humanExposureImpact, \"id\", \"value\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"jsonToMap = (json, key, value) => {\n const resultObj = {};\n json.forEach((item) => {\n resultObj[item[key]] = item[value];\n });\n return resultObj;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"bordersTopoJSON = FileAttachment(\"borders.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"borders = topojson.feature(\n bordersTopoJSON,\n bordersTopoJSON.objects.CNTR_BN_10M_2020_4326\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1187,"value":"deCounties = FileAttachment(\"DE-counties.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}