44:["$","title",null,{"children":"Zoomable Worldmap (Catastrophes) | FHOÖ Information Visualization | Observable"}] 4c:T42c,**This table is 100% consistent with the data of the topographic data needed for the visualization (especially of the map):** It was filled by multiple iterations over the data which was almost 50 hours of work. It has changed country names and ISOs to fit together with the topography of the countries and completely filled latitudes and longitude by comparing the location to countless cities and regions. The filling process was programmed manually in these two observables: * **Here the latitudes and longitudes were filled (and double ones ordered in a circle, so actually all catastrophes are displayed without any overlapping)** *(over multiple iterations with the nested-zoomable-map)*: **[Preparation for zoomable map](https://observablehq.com/@fhooe-infovis/preparation-for-zoomable-map)** (Don´t abort, the observable will ask you multiple times if you want to close it, but it works!) * **And here the countries were changed and the zoomAbleMap-object created:** **[Nested zoomable map](https://observablehq.com/@fhooe-infovis/nested-zoomable-map)** 4d:T14e4,//Code adjusted from: https://observablehq.com/@d3/zoomable-treemap chart = { const data = zoomAbleWorld; const width = 928; const height = 924; function tile(node, x0, y0, x1, y1) { const children = node.children || []; const count = children.length; if (count) { const numCols = Math.ceil(Math.sqrt(count)); // Calculate number of columns based on count const numRows = Math.ceil(count / numCols); // Calculate number of rows based on count const cellWidth = (x1 - x0) / numCols; // Calculate width of each cell const cellHeight = (y1 - y0) / numRows; // Calculate height of each cell children.forEach((child, i) => { const colIndex = i % numCols; // Calculate column index const rowIndex = Math.floor(i / numCols); // Calculate row index child.x0 = x0 + colIndex * cellWidth; // Set x0 based on column index and cell width child.x1 = child.x0 + cellWidth; // Set x1 based on x0 and cell width child.y0 = y0 + rowIndex * cellHeight; // Set y0 based on row index and cell height child.y1 = child.y0 + cellHeight; // Set y1 based on y0 and cell height }); } } function createHierarchy(data) { const hierarchyData = { name: data.name }; if (data.children && data.children.length > 0) { hierarchyData.children = data.children.map(child => createHierarchy(child)); } return hierarchyData; } function getNodeName(node) { return node.data.name || ''; // If name is undefined, return an empty string } const hierarchy = d3.hierarchy(createHierarchy(data)) .sum(d => d.children ? d.children.length : 1) // You can adjust the sum function based on your data .sort((a, b) => { const nameA = getNodeName(a); const nameB = getNodeName(b); return nameA.localeCompare(nameB); // Sort based on node names if available, otherwise sort based on depth }); const root = d3.treemap().tile(tile)(hierarchy); const x = d3.scaleLinear().rangeRound([0, width]); const y = d3.scaleLinear().rangeRound([0, height]); const format = d3.format(",d"); const name = d => d.ancestors().reverse().map(d => d.data.name.replaceAll(" ", "")).join("/"); const svg = d3.create("svg") .attr("viewBox", [0.5, -30.5, width, height + 30]) .attr("width", width) .attr("height", height + 30) .attr("style", "max-width: 100%; height: auto;") .style("font", "10px Calibri"); let group = svg.append("g") .call(render, root); function render(group, root) { const node = group .selectAll("g") .data(root.children.concat(root)) .join("g"); node.filter(d => d === root ? d.parent : d.children) .attr("cursor", "pointer") .on("click", (event, d) => d === root ? zoomout(root) : zoomin(d)); node.append("title") .text(d => `${name(d)}\n${format(Math.max(1, Math.floor(d.value / 2)))}`); node.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", d => d === root ? "#fff" : d.children ? "#ccc" : "#ddd") .attr("stroke", "#fff"); node.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); node.append("text") .attr("font-weight", d => d === root ? "bold" : null) .selectAll("tspan") .data(d => (d === root ? name(d) : d.data.name).split(/\s(?=[A-Z][a-z]*\b|$)(?![^(]*$)/).concat(format(Math.max(1, Math.floor(d.value / 2))))) .join("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .attr("font-weight", (d, i, nodes) => i === nodes.length - 1 ? "normal" : null) .text(d => d) .style("font-size", "1.2em") group.call(position, root); } function position(group, root) { group.selectAll("g") .attr("transform", d => d === root ? `translate(0,-30)` : `translate(${x(d.x0)},${y(d.y0)})`) .select("rect") .attr("width", d => d === root ? width : x(d.x1) - x(d.x0)) .attr("height", d => d === root ? 20 : y(d.y1) - y(d.y0)); } function zoomin(d) { const group0 = group.attr("pointer-events", "none"); const group1 = group = svg.append("g").call(render, d); x.domain([d.x0, d.x1]); y.domain([d.y0, d.y1]); svg.transition() .duration(750) .call(t => group0.transition(t).remove() .call(position, d.parent)) .call(t => group1.transition(t) .attrTween("opacity", () => d3.interpolate(0, 1)) .call(position, d)); } function zoomout(d) { const group0 = group.attr("pointer-events", "none"); const group1 = group = svg.insert("g", "*").call(render, d.parent); x.domain([d.parent.x0, d.parent.x1]); y.domain([d.parent.y0, d.parent.y1]); svg.transition() .duration(750) .call(t => group0.transition(t).remove() .attrTween("opacity", () => d3.interpolate(1, 0)) .call(position, d)) .call(t => group1.transition(t) .call(position, d.parent)); } return svg.node(); }4e:T6c1,**Prepared in separate notebook: [Preparation for Nested Zoomable Map](https://observablehq.com/@fhooe-infovis/preparation-for-zoomable-map)** * ***Continents is originally a file from GitHub:*** (https://gist.githubusercontent.com/bumbeishvili/d2680078bb5232d11993d36030c5770c/raw/f19267222668edd504f739bb3c82c55f00283112/continents.json), which had not the right format for us, so the json needed to be reconstructed * Preparation for Nested Zoomable Map * ***Regions is created out of the CountryBorders-file in QGIS manually:*** * 1. Importing CountryBorders in QGIS 2. Creating a filter for each region separately to use in QGIS (createFilterFromMap) 3. Creating a selection by filter: "Select features by Value" -> enter something in "ISO_A3" (just to see the filter option later) -> "Show in table" -> Copying the created filter into the "Advanced Filter" -> Selecting every shown ISO_A3 by hand 4. Dissolve the countries together: "Vector" -> "Geoprocessing Tools" -> "Dissolve" -> enable "Selected features only" -> "Run" 5. Change the properties of the region: Rightclick on layer "Rename layer" (Name it correctly) -> Rightclick on layer "Toggle Editing" -> Upper right corner "Identify features" -> Rightclick on feature "View feature form" -> change Features -> Rightclick on layer "Current edits" -> "Save for selected layers" (Changes are now saved) 6. Rightclick on layer "Export" -> "Save features as" -> Set a filename -> Choose "GeometryType" "Polygon" -> OK (Region is now exported). 7. It is then reconstructed to one JSON-file, so it can be used in the visualization in the external notebook *Fix for shape problems: https://hanshack.com/geotools/geosentences/*4f:T7f4,//Code from: https://observablehq.com/@d3/color-legend function Swatches(color, { columns = null, format, unknown: formatUnknown, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 } = {}) { const id = `-swatches-${Math.random().toString(16).slice(2)}`; const unknown = formatUnknown == null ? undefined : color.unknown(); const unknowns = unknown == null || unknown === d3.scaleImplicit ? [] : [unknown]; const domain = color.domain().concat(unknowns); if (format === undefined) format = x => x === unknown ? formatUnknown : x; function entity(character) { return `&#${character.charCodeAt(0).toString()};`; } if (columns !== null) return htl.html`

${domain.map(value => { const label = `${format(value)}`; return htl.html`

${label}

`; })}

`; return htl.html`

${domain.map(value => htl.html`${format(value)}`)}

`; }50:T45a,function createTooltip(d){ const location = d.Location ? `Location: ${d.Location}` : ""; const country = d.Country ? `(${d.Country.replace(" (the)", "")})` : ""; const seq = d.Seq ? `Nr. ${d.Seq}` : ""; const disasterSubgroup = d.DisasterSubgroup ? `${d.DisasterSubgroup} Catastrophe` : ""; const disasterSubtype = d.DisasterSubtype ? `(${d.DisasterSubtype})` : ""; const disasterSubsubtype = d.DisasterSubsubtype ? `-${d.DisasterSubsubtype}` : ""; const startMonth = d.StartMonth ? `Time: ${d.StartMonth}/` : ""; const startYear = d.StartYear ? `${d.StartYear}` : ""; const endMonth = d.EndMonth ? `-${d.EndMonth}/` : ""; const endYear = d.EndYear ? `${d.EndYear}` : ""; const totalAffected = d.TotalAffected ? `Total Affected: ${d.TotalAffected}` : ""; //const latitude = d.Latitude ? `Latitude: ${d.Latitude}/` : ""; //const longitude = d.Longitude ? `Longitude: ${d.Longitude}` : ""; return `${location} ${country}\n${seq} ${disasterSubgroup} ${disasterSubtype} ${disasterSubsubtype}\n${startMonth}${startYear}${endMonth}${endYear}\n${totalAffected}` //\n${latitude}${longitude}` }51:T1554,function createZoomAbleMap(chosenWidth=900, chosenHeight=500, minZoom=0.5, maxZoom=100, projection=d3.geoMercator(), data=zoomAbleMapObject, fillColor="red", strokeColor="white", fillColorNone="#444", names = false, textColor = "grey", fontSize = 1, coordinates = zoomAbleWorld, markersData=Catastrophes, radius=1, markersFillColor="orange") { const width = chosenWidth; const height = chosenHeight; const zoom = d3.zoom() .scaleExtent([minZoom, maxZoom]) .on("zoom", zoomed); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: 100%;") .on("click", reset); const path = d3.geoPath(projection); const g = svg.append("g"); let land = null; let states = null; let textLabels = null; let markers = null; function update(data){ g.selectAll("*").remove(); if (!data.features) { console.error("Data features are null or undefined"); return; } land = g.append("g") .attr("fill", "grey") .selectAll("path") .data(landData.features) .join("path") .attr("d", path) .attr("cursor", "pointer") states = g.append("g") .attr("fill", fillColorNone) .attr("cursor", "pointer") .attr("stroke", strokeColor) .attr("stroke-width", 0.1) .selectAll("path") .data(data.features) .join("path") .attr("d", path) .on("click", clicked); textLabels = g.append("g") .attr("pointer-events", "none") .selectAll("text") .data(data.features) .join("text") .attr("text-anchor", "middle") .style("font-size", fontSize) .attr("fill", textColor) .text(d => d.properties.name) .attr("transform", d => `translate(${path.centroid(d)})`); states.append("title").text(d => d.properties.name); markers = g.selectAll("circle") .data(markersData) .join("g"); // Append circles markers.append("circle") .attr("cx", d => projection([d.Longitude, d.Latitude])[0]) .attr("cy", d => projection([d.Longitude, d.Latitude])[1]) .attr("r", radius) .attr("fill", function(d){ if(d.DisasterSubgroup === "Biological"){return "limegreen"} else if(d.DisasterSubgroup === "Climatological"){return "red"} else if(d.DisasterSubgroup === "Geophysical"){return "orange"} else if(d.DisasterSubgroup === "Hydrological"){return "lightblue"} else if(d.DisasterSubgroup === "Meteorological"){return "yellow"} }); markers.append("title") .text(d => createTooltip(d)); g.append("path") .attr("fill", "none") .attr("stroke", strokeColor) .attr("stroke-linejoin", "round") .attr("stroke-width", 10) .attr("d", path(countrymesh.features)); } update(data); svg.call(zoom); function reset() { states.transition().style("fill", null); setTimeout(() => {data = zoomAbleMapObject; fontSize = 10; update(data);}, 750); svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width, height]) ); } function clicked(event, d) { console.log(d) if(d.properties.name != "Antarctica"){ const [[x0, y0], [x1, y1]] = path.bounds(d); event.stopPropagation(); states.transition().style("fill", null); d3.select(this).transition().style("fill", fillColor); console.log(d) if(d.properties.name === "South America"){ d = d.features[0] } if(data.territoryType !== "Region"){ setTimeout(() => { data = d; const transform = d3.zoomTransform(svg.node()); const fontSizeScaled = Math.min((fontSize / transform.k) * 10, 2); if(data.territoryType == "Country"){ fontSizeScaled = Math.min((fontSize / transform.k) * 10, 1); } radius = Math.max(0.01, Math.min((radius / transform.k) * 2, 1)) update(data); textLabels.style("font-size", fontSizeScaled);}, 750); } svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale(Math.min(100, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height))) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2), d3.pointer(event, svg.node()), ); } } function zoomed(event) { const {transform} = event; g.attr("transform", transform); g.attr("stroke-width", 10);// / transform.k); const fontSizeScaled = Math.min((fontSize / transform.k), 2); textLabels.style("font-size", fontSizeScaled); textLabels.attr("fill", textColor); // Update marker radius on zoom markers.selectAll("circle") .attr("r", Math.max(0.01, Math.min((radius / transform.k) * 2, 1))); } return svg.node(); }52:[{"id":"62a608ec355d3bde129e01eb0cbfe72f9e1c6cb83248729075e8e1afecd4e1ee032ea0076608d57fa2893f98988a3d36abe9e343b1ad3e4e0f80842dab61dd09","href":"https://static.observableusercontent.com/files/62a608ec355d3bde129e01eb0cbfe72f9e1c6cb83248729075e8e1afecd4e1ee032ea0076608d57fa2893f98988a3d36abe9e343b1ad3e4e0f80842dab61dd09","name":"continents.json","type":"application/json","lastModified":1714903968024.642,"size":212654},{"id":"dbf27aeb1ec074f746f84b4952bf9000fe6233cf8db5b4fdcddc2722c685a49922615b015b8c8ef3d6c53842a4cb43b4962d61b303453d702250ec7876a50517","href":"https://static.observableusercontent.com/files/dbf27aeb1ec074f746f84b4952bf9000fe6233cf8db5b4fdcddc2722c685a49922615b015b8c8ef3d6c53842a4cb43b4962d61b303453d702250ec7876a50517","name":"CatastrophesForMapDisplayByYear.json","type":"application/json","lastModified":1714903968024.642,"size":6330072},{"id":"ab2c7452e6338e736c120dcd3f6eed4bd12c0fde4d19a6612ce46732e36b5d1e773dca146d9ecd0567b397d45eb80fe2adbfe9b6b38c0441d78989bc36f8b2b8","href":"https://static.observableusercontent.com/files/ab2c7452e6338e736c120dcd3f6eed4bd12c0fde4d19a6612ce46732e36b5d1e773dca146d9ecd0567b397d45eb80fe2adbfe9b6b38c0441d78989bc36f8b2b8","name":"regions.json","type":"application/json","lastModified":1714904342567.256,"size":17040240},{"id":"8f8c31a1b823c828369b8e0de05da3daba68ec0b64db75e79ccc77d735542e8ade4a55f89fc236d7ac4144b02701c705fb8fdb436cd2e5c714acf7eaea3228ff","href":"https://static.observableusercontent.com/files/8f8c31a1b823c828369b8e0de05da3daba68ec0b64db75e79ccc77d735542e8ade4a55f89fc236d7ac4144b02701c705fb8fdb436cd2e5c714acf7eaea3228ff","name":"CatastrophesForMapDisplay@12.json","type":"application/json","lastModified":1714903968024.642,"size":6330010},{"id":"f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","href":"https://static.observableusercontent.com/files/f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","name":"countries-50m.json","type":"application/json","lastModified":1714903968024.642,"size":756420},{"id":"2b78b21b3fdbf15e28957ef637220c4e0befd90a5e265319b49e6ab989016758c8f10fb781dd752173b693e45541be031f0f3deaf94c9244d9d8f32a3e38b94a","href":"https://static.observableusercontent.com/files/2b78b21b3fdbf15e28957ef637220c4e0befd90a5e265319b49e6ab989016758c8f10fb781dd752173b693e45541be031f0f3deaf94c9244d9d8f32a3e38b94a","name":"1900_2021_DISASTERS.xlsx - emdat data.csv","type":"text/csv","lastModified":1714903968024.642,"size":4746123},{"id":"6a2b3fcb9889f0df12ce89bbe524db57f1d21ee967c6baddb6e9dd91673231e31541fbfd6b4f3e5d64ae38f32ee72dc5fecd03c46c259600cbcefc4021327907","href":"https://static.observableusercontent.com/files/6a2b3fcb9889f0df12ce89bbe524db57f1d21ee967c6baddb6e9dd91673231e31541fbfd6b4f3e5d64ae38f32ee72dc5fecd03c46c259600cbcefc4021327907","name":"CatastrophesFilled@2.json","type":"application/json","lastModified":1714903968024.642,"size":6417919},{"id":"73834fd255e58c76d376da3b4121f480142a413f48012ded0579f7e96f4edb60a0f4b5d17396cba6aa7a2bf9d7083fcd1750d8d754e41d9073ed03362172201f","href":"https://static.observableusercontent.com/files/73834fd255e58c76d376da3b4121f480142a413f48012ded0579f7e96f4edb60a0f4b5d17396cba6aa7a2bf9d7083fcd1750d8d754e41d9073ed03362172201f","name":"Countries@1.json","type":"application/json","lastModified":1714903968024.642,"size":3938563}] 48:{"id":"43f3925cefc265c7","slug":"zoomable-world-map","title":"Zoomable Worldmap (Catastrophes)","thumbnail":"c0556b444e89f1785e6be67825c83ba86dc603c215ca91b5471a4836f5cb4c29","access_level":"public","create_time":"$D2024-05-05T10:12:48.024Z","update_time":"$D2024-05-06T18:46:09.977Z","view_time":null,"first_public_time":"$D2024-05-05T10:34:49.580Z","has_unpublished_edits":null,"fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/ed8c4512a4de73fcd51f2a548db547555258287f869eea03112d4859ccbac5c3","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":3671,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"07cfc458835fa3dd","login":"lucag97","name":"Luca Geiger","avatar_url":"https://avatars-next.observableusercontent.com/6fc20002336a949e37a07b1948fa08cc98230d8b1dfe52090849af91d53a427d","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"65ffd534de330094","login":"mandykeck","name":"Mandy Keck","avatar_url":"https://avatars-next.observableusercontent.com/0f537a0f64fadffd6bdc89fc8ec0139996ce692d1483c1a1c1a9ef22b7462ec4","tier":null,"role":"editor"},{"type":"team","id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/ed8c4512a4de73fcd51f2a548db547555258287f869eea03112d4859ccbac5c3","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Zoomable Worldmap (Catastrophes)","cells":[{"id":3663,"value":"# Zoomable Worldmap (Catastrophes)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":261,"value":"## Tables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":445,"value":"### Natural Disasters 1990 - 2020 in Countries\nhttps://www.kaggle.com/datasets/brsdincer/all-natural-disasters-19002021-eosdis?resource=download","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":432,"value":"CatastrophesByYear = await FileAttachment(\"1900_2021_DISASTERS.xlsx - emdat data.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"CatastrophesByYear","database":"$undefined"},{"id":2352,"value":"catastrophes = FileAttachment(\"CatastrophesFilled@2.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2350,"value":"Catastrophes = catastrophes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"Catastrophes","database":"$undefined"},{"id":2414,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2393,"value":"nest(Catastrophes, d => d.DisasterSubgroup, d => d.DisasterType, d => d.DisasterSubtype)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1316,"value":"---\n## Code\n*Add notebook cells containing imports and code that do not have visualizations below.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"import { toc } from \"@nebrius/indented-toc\" // This component generates the Table of Contents","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1213,"value":"/*cities = CatastrophesByYear.map(d => [\n d.Location,\n { \n latitude: d.Latitude,\n longitude: d.Longitude,\n country: d.Country, \n region: d.Region, \n //continent: d.Continent,\n //disasterSubgroup: d.DisasterSubgroup,\n //disasterType: d.DisasterType,\n //disasterSubType: d.DisasterSubtype,\n }\n ]);*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1700,"value":"data = nest(CatastrophesByYear, d => d.Continent, d => d.Region, d => d.Country, d => d.ISO)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3350,"value":"catastrophesCoordinates = FileAttachment(\"CatastrophesForMapDisplay@12.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3472,"value":"catastrophesCoordinatesByYear = FileAttachment(\"CatastrophesForMapDisplayByYear.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3499,"value":"markersData = selection === \"All\" ? catastrophesCoordinates : catastrophesCoordinatesByYear[yearDynamic - 1990]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3515,"value":"catastropheColorScale = [\"limegreen\", \"red\", \"orange\", \"lightblue\", \"yellow\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1318,"value":"---\n## Visualizations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3475,"value":"zoomAbleMap = createZoomAbleMap(900, 500, 1, 500, d3.geoNaturalEarth1(), zoomAbleMapObject, \"#110C34\", \"whitesmoke\", \"#111\", true, \"#E8C423\", 10, catastrophes, markersData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3519,"value":"legend = Swatches(d3.scaleOrdinal([\"Biological (Epidemic, Insect Infestation)\", \"Climatological (Wildfire, Drought, Glacial Lake Outburst)\", \"Geophysical (Earthquake, Mass Movement (Dry), Volcanic Activity)\", \"Hydrological (Flood, Landslide)\", \"Meteorological (Strom, Extreme Temperature)\"], catastropheColorScale), {\n columns: \"400px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3490,"value":"viewof selection = Inputs.radio([\"All\", \"Selected Year\"], {value: \"All\", label: html`Display choice: `});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3479,"value":"viewof yearDynamic = Scrubber(\n d3.range(1990, 2020+1, 1), // min to max years in 5 year increments\n { autoplay: false, delay: 500, loop: false } // experiment with these settings!\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2388,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1263,"value":"---\n## 1. Tools, Helpers & More\n### 1.1 Topographic Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":737,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2535,"value":"landData = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2406,"value":"countries = FileAttachment(\"Countries@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"countrymesh = topojson.mesh(world, world.objects.countries, (a, b) => a !== b);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2273,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2285,"value":"function createFilterFromMap(map, nameToSearchFor){\n let keys = Array.from(map.get(nameToSearchFor).keys());\n let keysString = \"(\\\"ISO_A3\\\" ILIKE '%\" + keys.join(\"%' OR \\\"ISO_A3\\\" ILIKE '%\") + \"%')\";\n return keysString;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2085,"value":"isoByContinents = nest(CatastrophesByYear, d => d.Continent, d => d.ISO)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2293,"value":"isoByRegions = nest(CatastrophesByYear, d => d.Region, d => d.ISO)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2295,"value":"//Example usage for filter:\nexampleFilter = createFilterFromMap(isoByContinents, \"Africa\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2257,"value":"regions = FileAttachment(\"regions.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2254,"value":"continents = FileAttachment(\"continents.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2375,"value":"**Prepared in separate notebook: [Nested zoomable map](https://observablehq.com/@fhooe-infovis/nested-zoomable-map)** \nThe zoomAbleWorld now contains a nested structure, in the format: {name *(String)*, features *(Object)*, children *(List of Objects)*}. The actual nesting of the whole object looks as follows: \n**World -> Continent -> Region -> Country -> Provinces**\n * name: name of the continent, region, country or province\n * features: the whole object needed for the geometry\n * children: list of all children belonging to the parent","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2385,"value":"import {zoomAbleWorld} from \"@fhooe-infovis/nested-zoomable-map\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2472,"value":"import {zoomAbleMapObject} from \"@fhooe-infovis/nested-zoomable-map\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1283,"value":"### 1.2 Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3481,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3517,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1246,"value":"//Whole section from: https://observablehq.com/@mbostock/group & https://observablehq.com/@mbostock/nested-groups\nfunction noop() {}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1256,"value":"function identity(x) { return x; }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1254,"value":"group = {\n const reduce = (p, v) => (p.push(v), p);\n const init = () => [];\n return function group(values, keyof) {\n return groupReduce(values, keyof, reduce, init);\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"function groupReduce(values, keyof = identity, reduce, init = noop) {\n const map = new Map();\n let index = -1;\n for (const value of values) {\n const key = keyof(value, ++index, values);\n map.set(key, reduce(map.has(key) ? map.get(key) : init(key), value, index, values));\n }\n return map;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1242,"value":"function nest(values, ...keys) {\n return (function regroup(values, i) {\n if (i >= keys.length) return values;\n const map = group(values, keys[i]);\n return new Map(Array.from(map, ([k, v]) => [k, regroup(v, i + 1)]));\n })(values, 0);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"//https://observablehq.com/@d3/world-choropleth/2\nimport {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"import {Legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1729,"value":"function cloneMap(map) {\n const clonedMap = new Map();\n for (const [key, value] of map) {\n if (value instanceof Map) {\n clonedMap.set(key, cloneMap(value));\n } else {\n clonedMap.set(key, value);\n }\n }\n return clonedMap;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1799,"value":"function cloneObject(obj) {\n if (typeof obj !== 'object' || obj === null) {\n // If the value is not an object, return it directly\n return obj;\n }\n\n const clonedObj = Array.isArray(obj) ? [] : {}; // Determine if obj is an array or an object\n for (const key in obj) {\n if (Object.prototype.hasOwnProperty.call(obj, key)) {\n // Recursively clone nested objects\n clonedObj[key] = cloneObject(obj[key]);\n }\n }\n return clonedObj;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2339,"value":"$50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1521,"value":"$51","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W52","stdlib":"1"}} 24:null