30:T405,viewof plots = { const el = document.createElement("div"); vegaEmbed(el, spec).then(({ view }) => { view.addSignalListener("selectionType", (name, value) => { if (value && value.Type) { mutable selectionType = value.Type; } else { mutable selectionType = null; } }); view.addSignalListener("selectionCountry", (name, value) => { if (value && value.Country) { mutable selectionCountry = value.Country; } else { mutable selectionCountry = null; } }); view.addSignalListener("selectionDate", (name, value) => { if (value && Object.keys(value).length > 0) { mutable selectionDate = value; } else { mutable selectionDate = null; } }); view.addSignalListener("selectionDuration", (name, value) => { if (value && Object.keys(value).length > 0) { mutable selectionDuration = value; } else { mutable selectionDuration = null; } }); }); return el; }31:T5c5,viewof map = { const container = html`

`; yield container; const map = L.map(container).setView([40, 20], 4); L.tileLayer( "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png" ).addTo(map); filtered.forEach(({ Id, Lat, Lon, Type, Countries, ...rest }) => { if (Lat == null || Lon == null) return; const coords = Lat.map((latVal, i) => [latVal, Lon[i]]); const color = `hsl(${Math.random() * 360}, 80%, 50%)`; L.polyline(coords, { color: colorsType[Type], weight: 4, opacity: 0.4 }) .bindTooltip( `

ID: ${Id}
Countries: ${Countries.join(", ")}
Mean excess: ${rest.Mean_excess}

`, { permanent: false, direction: "bottom", offset: [0, 40] } ) .on("mouseover", function (e) { this.setStyle({ weight: 10, opacity: 1.0 }); }) .on("mouseout", function (e) { this.setStyle({ weight: 4, opacity: 0.4 }); }) .addTo(map); coords.forEach(([lat, lon]) => { L.circleMarker([lat, lon], { radius: 2, color: "gray", opacity: 0.6, fillColor: color, fillOpacity: 0.8, weight: 1 }).addTo(map); }); }); return map; }32:T127f,spec = { //--------------------------------------------------------------- const selectCountry = vl.selectPoint("selectionCountry").fields(["Country"]); const selectType = vl.selectPoint("selectionType").fields(["Type"]); const selectDuration = vl.selectInterval("selectionDuration").encodings("y"); //const selectDate = vl.selectInterval("selectionDate").encodings("x"); // Select interval const selectDate = vl .selectInterval("selectionDate") .encodings("x") .bind("scales"); // Select with zoom const minDuration = d3.min(data, (d) => +d.Duration); const maxDuration = d3.max(data, (d) => +d.Duration); const domainDuration = d3.range(minDuration, maxDuration + 1); //--------------------------------------------------------------- const plotEvent = vl .markCircle({ stroke: "gray", strokeWidth: 0.5 }) .params(selectDate) .data(data) .transform( vl.flatten("Countries").as("Country"), vl.filter(vl.and(selectCountry, selectType, selectDuration)) ) .encode( vl.x().fieldT("Date"), vl .y() .fieldN("Duration") .axis({ tickMinStep: 1 }) .scale({ domain: domainDuration, reverse: true }) .title("Duration (day)"), vl .color() .fieldN("Type") .scale({ range: Object.values(colorsType), domain: Object.keys(colorsType) }), vl .opacity() .if( vl.and(selectCountry, selectDate, selectType, selectDuration), vl.value(0.5) ) .value(0.05), vl.size().fieldQ("Mean_excess"), vl.tooltip(["Id", "Type", "Date", "Countries", "Mean_excess"]), vl.order().fieldQ("Mean_excess").sort("descending") ) .width(800) .height(200); //--------------------------------------------------------------- const plotCountry = vl .markBar() .params(selectCountry) .data(data) .transform( vl.flatten("Countries").as("Country"), vl.filter(vl.and(selectDate, selectType, selectDuration)), vl.aggregate([{ op: "count", as: "Count" }]).groupby(["Country", "Type"]), vl .joinaggregate([{ op: "sum", field: "Count", as: "Total" }]) .groupby(["Country"]) ) .encode( vl.x().fieldQ("Count").axis({ tickMinStep: 1 }), vl.y().fieldN("Country").scale({ domain: allCountries }), vl.color().fieldN("Type").scale({ range: colorsType }), vl.opacity().if(selectCountry, vl.value(1.0)).value(0.2), vl.tooltip(["Country", "Type", "Count", "Total"]) ) .width(600) .height(600); //--------------------------------------------------------------- const plotType = vl .markBar() .params(selectType) .data(data) .transform( vl.flatten("Countries").as("Country"), vl.filter(vl.and(selectDate, selectCountry, selectDuration)), vl.aggregate([{ op: "count", as: "Count" }]).groupby(["Type"]) ) .encode( vl.x().fieldQ("Count").axis({ tickMinStep: 1 }), vl .y() .fieldN("Type") .scale({ domain: Object.keys(colorsType) }), vl .color() .fieldN("Type") .scale({ range: Object.values(colorsType), domain: Object.keys(colorsType) }), vl.opacity().if(selectType, vl.value(1.0)).value(0.2), vl.tooltip(["Type", "Count"]) ) .width(200) .height(100); //--------------------------------------------------------------- const plotDuration = vl .markBar() .params(selectDuration) .data(data) .transform( vl.flatten("Countries").as("Country"), vl.filter(vl.and(selectCountry, selectDate, selectType)), vl .aggregate([{ op: "count", as: "Count" }]) .groupby(["Duration", "Type"]), vl .joinaggregate([{ op: "sum", field: "Count", as: "Total" }]) .groupby(["Duration"]) ) .encode( vl.x().fieldQ("Count").axis({ tickMinStep: 1 }), vl .y() .fieldN("Duration") .scale({ domain: domainDuration, reverse: true }) .title("Duration (day)"), vl .color() .fieldN("Type") .scale({ range: Object.values(colorsType), domain: Object.keys(colorsType) }), vl.opacity().if(selectDuration, vl.value(1.0)).value(0.2), vl.tooltip(["Duration", "Type", "Count", "Total"]) ) .width(200) .height(200); //--------------------------------------------------------------- return vl .vconcat( plotEvent, vl.hconcat(plotCountry, vl.vconcat(plotType, plotDuration)) ) .toSpec(); }33:[{"id":"0255f23a7fa06eba0c439a014f0fdcdb5ac0a25a21ff2cad4ff788d76c85e7f48c7474dadab1f1cfd4c7f5a6c452e5241891021e335afb5ab352acf01471589f","href":"https://static.observableusercontent.com/files/0255f23a7fa06eba0c439a014f0fdcdb5ac0a25a21ff2cad4ff788d76c85e7f48c7474dadab1f1cfd4c7f5a6c452e5241891021e335afb5ab352acf01471589f","name":"events_data@2.json","type":"application/json","lastModified":1750433257868.497,"size":3084699}] 2e:{"title":"rhita","cells":[{"id":0,"value":"# rhita","pinned":false,"hidden":false,"mode":"md"},{"id":1494,"value":"htmlAll = html`\n${viewof htmlSelections}\n${viewof plots}\n${viewof map}\n
\n${viewof table}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1469,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":957,"value":"viewof htmlSelections = html`\n

Selections (${filtered.length})

Country: ${\n selectionCountry ? selectionCountry.join(\", \") : \"All\"\n }
Date: ${\n selectionDate && selectionDate.Date\n ? selectionDate.Date.map((d) => new Date(d).getFullYear()).join(\":\")\n : \"All\"\n }
Type: ${\n selectionType ? selectionType.join(\", \") : \"All\"\n }
Duration: ${\n selectionDuration ? selectionDuration.Duration.join(\", \") : \"All\"\n }

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1012,"value":"viewof table = Inputs.table(filtered)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1485,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":622,"value":"colorsType = ({\n coldspell: \"#012a4a\",\n heatwave: \"#d00000\",\n \"heavy precipitation\": \"#94d2bd\",\n \"strong wind\": \"#ee9b00\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"function extractField(d, pattern) {\n const regex = new RegExp(pattern, \"i\"); // ignore case\n const match = Object.keys(d).find((k) => regex.test(k));\n return +d[match];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1582,"value":"data = await FileAttachment(\"events_data@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"//allCountries = Array.from(new Set(data2.flatMap((d) => d.Countries))).sort()\nallCountries = Array.from(new Set(data.flatMap((d) => d.Countries))).sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"filtered = (() => {\n return data.filter((d) => {\n const inCountry = selectionCountry\n ? d.Countries.some((country) => selectionCountry.includes(country))\n : true;\n\n const inType = selectionType ? selectionType.includes(d.Type) : true;\n\n const inDuration = selectionDuration\n ? selectionDuration.Duration.includes(d.Duration)\n : true;\n\n const inDate =\n selectionDate && selectionDate.Date\n ? (() => {\n const [start, end] = selectionDate.Date.map((dt) => new Date(dt));\n const current = new Date(d.Date);\n return current >= start && current <= end;\n })()\n : true;\n\n return inCountry && inType && inDuration && inDate;\n });\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1635,"value":"mutable selectionType = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1638,"value":"mutable selectionDate = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1642,"value":"mutable selectionCountry = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1644,"value":"mutable selectionDuration = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1479,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1628,"value":"vegaEmbed = require(\"vega-embed@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1466,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(\n (L._style = html``)\n );\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1512,"value":"---","pinned":false,"hidden":false,"mode":"md"}],"files":"$W33","stdlib":"1","titling":"auto"}