30:T89d,function map() { const data = geoTable.filter((d) => d.year === yearSelect); return Plot.plot({ width: 1160, height: 700, inset: 20, insetTop: 100, projection: { type: "equal-earth", rotate: [-30, -10, 0] }, marks: [ Plot.text(["Non-military political violence 2017-2024"], { x: 0, y: 90, dy: -70, fill: "oklch(20% 0.2 30deg)", fontSize: 50, fontWeight: 900, fontFamily: "Oswald" }), Plot.text( [ "Reported events include ACLED’s battles, violence against civilians, explosions, mob violence and riots." ], { x: 0, y: 90, dy: -30, fill: "oklch(20% 0.2 30deg)", fontSize: 20, fontFamily: "Oswald" } ), Plot.text( [ "Data source: Humanitarian Data Exchange (HDX) / ACLED, data.humdata.org/dataset/political-violence-events-and-fatalities" ], { x: 0, y: 90, dy: 560, fill: "oklch(20% 0.2 30deg)", fontSize: 14, fontFamily: "Oswald" } ), Plot.sphere({ fill: "oklch(70% 0.1 180deg / 20%)" }), Plot.geo(landGeodata, { stroke: "oklch(70% 0.05 180deg)", strokeWidth: 8, strokeOpacity: 0.2 }), Plot.geo(landGeodata, { fill: "tan", stroke: "oklch(20% 0.2 220deg)", strokeWidth: 0.3 }), Plot.text([String(yearSelect)], { x: 28, y: -50, fill: "black", opacity: 0.1, fontSize: 60, fontWeight: 900, fontFamily: "Oswald" }), Plot.graticule(), Plot.dot(data, { x: "longitude", y: "latitude", r: "events", strokeWidth: 15, strokeOpacity: 0.1, stroke: "white" }), Plot.dot(data, { x: "longitude", y: "latitude", r: "events", fill: "firebrick", fillOpacity: 0.8, stroke: "black", tip: true, title: (d) => `${d.country} ${d.events} events` }), Plot.sphere({ stroke: "black", opacity: 0.1 }) ] }); }31:T4cc,function timeline(country) { const data = pvData.filter((d) => d.country === country); const [startDate, endDate] = [new Date(2017, 0, 1), new Date(2024, 10, 1)]; return Plot.plot({ width: 300, height: 200, inset: 10, x: { domain: [startDate, endDate], axis: null }, y: { domain: [0, 1500], axis: null, reverse: true }, marks: [ Plot.frame({ fill: "#fff9", strokeWidth: 6, stroke: "#000", r: 10 }), Plot.areaY(data, { x: "date", y: "events", curve: "basis", interval: "month", fill: "firebrick", tip: true }), Plot.rect( [ { x1: new Date(yearSelect, 0, 1), x2: new Date(yearSelect + 1, 0, 1) } ], { x1: "x1", x2: "x2", y1: 0, y2: 1300, fill: "black", opacity: 0.1 } ), Plot.text([String(yearSelect)], { x: new Date(yearSelect, 5, 15), y: 1300, lineAnchor: "bottom", dy: -8 }), Plot.ruleY([0]), Plot.text([country], { x: startDate, y: 1500, textAnchor: "start", lineAnchor: "bottom", fontSize: 40 }) ] }); }32:T4e2,function createLookup(objects, options = {}) { const { keys = options.key, // Use 'key' if 'keys' is not provided values = options.value, // Use 'value' if 'values' is not provided separator = "_" } = options; const getNestedValue = (obj, path) => path.split(".").reduce((acc, part) => acc && acc[part], obj); const getFinalSegment = (path) => { const segs = path.split("."); return segs[segs.length - 1]; }; return objects.reduce((acc, obj) => { // Generate the lookup key, supporting nested properties const lookupKey = Array.isArray(keys) ? keys.map((k) => getNestedValue(obj, k)).join(separator) : getNestedValue(obj, keys || Object.keys(obj)[0]); // Generate the lookup value, supporting nested properties let lookupValue; if (values === undefined) { lookupValue = obj; } else if (Array.isArray(values)) { lookupValue = values.reduce((valAcc, val) => { valAcc[getFinalSegment(val)] = getNestedValue(obj, val); return valAcc; }, {}); } else { // If values is a single string, return the nested value directly lookupValue = getNestedValue(obj, values); } acc[lookupKey] = lookupValue; return acc; }, {}); }33:[{"id":"9ac97def08c1efcaafd6e87547d95e852ae221bfea2691bec99888ed8a896fecca2c562547e68fe24295e1cf17681b6b83ef3777d87745ff879f438887771f1a","href":"https://static.observableusercontent.com/files/9ac97def08c1efcaafd6e87547d95e852ae221bfea2691bec99888ed8a896fecca2c562547e68fe24295e1cf17681b6b83ef3777d87745ff879f438887771f1a","name":"politicalViolence.csv","type":"text/csv","lastModified":1731048036309.603,"size":712529},{"id":"a647f63e182b5ee94faacc77cda9341e25533ead2c656eff036b40e676bef6f90a670c36306fd8f16f7936f65d85f1faa8ce93d7b7dfc8050f2e262fc966bc15","href":"https://static.observableusercontent.com/files/a647f63e182b5ee94faacc77cda9341e25533ead2c656eff036b40e676bef6f90a670c36306fd8f16f7936f65d85f1faa8ce93d7b7dfc8050f2e262fc966bc15","name":"world110m.json","type":"application/json","lastModified":1731058437174.483,"size":128748},{"id":"b199aa7c581d1afd8005f4cd2c68a49b86bcb66d249747bc0d7f204cb20a80776582466d741ba9eb5bc9235dde0daf3b80de2c951239c8191ed585db2d0a850b","href":"https://static.observableusercontent.com/files/b199aa7c581d1afd8005f4cd2c68a49b86bcb66d249747bc0d7f204cb20a80776582466d741ba9eb5bc9235dde0daf3b80de2c951239c8191ed585db2d0a850b","name":"locationLookup@2.csv","type":"text/csv","lastModified":1731066058131.337,"size":19412}] 2e:{"title":"30 Day Map Challenge: 8. Data: HDX","cells":[{"id":0,"value":"# 30 Day Map Challenge: 8. Data: HDX","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"Today's map challenge involves looking at the Humanitarian Data Exchange (HDX) [data portal](https://data.humdata.org). It provides a rich source of datasets updated weekly on topics related to disaster response, health, population and development.","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"## Data Source and Preparation","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"I wasn't particularly familiar with the data portal so with only a few hours to work on this challenge my choice of dataset to work with was a little arbitrary. I chose to look at [political violence events and fatalities](https://data.humdata.org/dataset/political-violence-events-and-fatalities). I initially expected this to include large scale military violence such as perpetrated in Gaza and Ukraine, but on inspection it became clear the dataset was recorded non-military events.","pinned":false,"hidden":false,"mode":"md"},{"id":614,"value":"Transferring the data from HDX was simple the file could be downloaded as CSV format (attached to this document as `politicalViolence.csv`). Events were aggregated on a monthly basis so there was some minor formatting required to add timestamps as JavasScript `Date` objects.","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"pvData = FileAttachment(\"politicalViolence.csv\")\n .csv({ typed: true })\n .then(\n (data) =>\n data\n .map((d) => ({\n country: d.Country,\n year: d.Year,\n month: d.Month,\n date: dateParser(`${d.Month} ${d.Year}`),\n events: d.Events,\n fatalities: d.Fatalities\n }))\n .filter((d) => d.events !== 0) // Ignore records where no events were logged.\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"Inputs.table(\n pvData.filter((d) => d.country === \"Israel\"),\n { layout: \"auto\", rows: 6.5, width: 640 }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"For showing changes over time I wanted to be able to work with a smoother dataset so created a table of that aggregated the monthly counts into years. This was achieved easily with a call to `Tidy.js` [groupBy](https://pbeshai.github.io/tidy/docs/api/tidy#groupby) and [summarize](https://pbeshai.github.io/tidy/docs/api/tidy#summarize) functions:","pinned":false,"hidden":false,"mode":"md"},{"id":168,"value":"yearData = T.tidy(\n pvData,\n T.groupBy(\n [\"country\", \"year\"],\n [T.summarize({ events: T.sum(\"events\"), fatalities: T.sum(\"fatalities\") })]\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"Inputs.table(yearData, { layout: \"auto\", width: 640, rows: 6.5 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"\nFor the basemap, a standard world landmass outline GeoJSON was sufficient, as I chose deliberately not to show country borders (which as well as cluttering the map, can be disputed in regions of conflict and political violence).","pinned":false,"hidden":false,"mode":"md"},{"id":437,"value":"landGeodata = topojson.feature(\n await d3.json(await FileAttachment(\"world110m.json\").url()),\n \"land\"\n).features","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":" For locating the data on the basemap, I used a country to centroid lookup table I often use for global mapping. I had to adapt it a little to account for the fact the HDX data used only country names as an identifier rather than the more robust alpha-3 or alpha-2 country codes.","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"locationLookup = FileAttachment(\"locationLookup@2.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"Inputs.table(locationLookup, { layout: \"auto\", rows: 6.5, width: width })","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"Joining the location data from the `lookup` table to the political violence table involved another call to [Tidy.js `leftJoin`](https://pbeshai.github.io/tidy/docs/api/tidy#leftjoin).","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"geoTable = T.tidy(\n yearData,\n T.leftJoin(locationLookup, { by: { countryName: \"country\" } })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"Inputs.table(geoTable, { layout: \"auto\", rows: 6.5, width: width })","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"## Data Exploration\n\nBecause I didn't have a particular goal in mind in mapping the data, my next activity involved exploring the data to see if there were any patterns worthy of showing on a map. The full dataset included records from 1997 onwards, so my initial view was just to show the timeline of events and fatalities over the whole time period:","pinned":false,"hidden":false,"mode":"md"},{"id":627,"value":"{\n const data = pvData;\n const [startDate, endDate] = [new Date(1997, 0, 1), new Date(2024, 10, 1)];\n return Plot.plot({\n title: \"Political Violence Events 1997-2024\",\n subtitle: \"Coloured by country - move pointer to see details\",\n width: 900,\n height: 400,\n inset: 10,\n marks: [\n Plot.areaY(data, {\n x: \"date\",\n y: \"events\",\n interval: \"month\",\n fill: \"country\",\n tip: true\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"{\n const data = pvData;\n const [startDate, endDate] = [new Date(1997, 0, 1), new Date(2024, 10, 1)];\n return Plot.plot({\n title: \"Political Violence Fatalities 1997-2024\",\n subtitle: \"Coloured by country - move pointer to see details\",\n width: 900,\n height: 400,\n inset: 10,\n marks: [\n Plot.areaY(data, {\n x: \"date\",\n y: \"fatalities\",\n interval: \"month\",\n fill: \"country\",\n tip: true\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"It is clear from the timeline that the data record are incomplete, with obvious jumps in 2010, 2016 and 2018 that are more likely to be due to changes in data collection / recording than of political changes. I did consider whether mapping 'absent data' might be an interesting theme to explore here, but it is a challenging one, especially around such a sensitive topic.\n\nIn the end I decided to limit the mapping to data from 2017 to avoid under estimations of countries for who which no data were available. It was a useful reminder though that we should question our data sources and particular ask ourselves what is _not_ being recorded.","pinned":false,"hidden":false,"mode":"md"},{"id":651,"value":"## Map Design\n\nI started with a standard proportional symbol map of the cumulative events per country, but this was too much of an aggregation, hiding specific periods of turmoil. Instead I added a year filter so change over time could be observed. ","pinned":false,"hidden":false,"mode":"md"},{"id":132,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"It was apparent that there were a few countries which had much higher numbers of political violence events than others, so I chose to highlight these with a timeline graphic, inspired by Simon Scarr's narrative visualization [Iraq's Bloody Toil](https://www.simonscarr.com/iraqs-bloody-toll). Observable Plot doesn't easily allow nesting of visualizations, so I used manually positioned `

` elements to created the superposed visualizations. This is not an ideal solution but worked well enough here.","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"

${map()}

${timeline(\"Lebanon\")}

${timeline(\"Mexico\")}

${timeline(\"Brazil\")}

${timeline(\"Russia\")}

${timeline(\"Iraq\")}

${timeline(\"India\")}

${timeline(\"Philippines\")}

","pinned":false,"hidden":false,"mode":"html"},{"id":137,"value":"viewof yearSelect = Inputs.range([2017, 2024], {\n label: \"Year\",\n step: 1,\n value: 1997\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"I'm not entirely happy with the final design as the visual hierarchy is a bit flat, especially the interplay between the proportional circles and the embedded timeline charts. And if I had more time, I would have incorporated a proportional circle legend.","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"_For data table shaping ([Tidy.js](https://pbeshai.github.io/tidy/)):_","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"dateParser = d3.utcParse(\"%B %Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"T = require(\"@tidyjs/tidy@2.5.1/dist/umd/tidy.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"_For creating a lookup table_","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"_For the title font:_","pinned":false,"hidden":false,"mode":"md"},{"id":523,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}