2b:null 2c:["$","title",null,{"children":"Untitled | NIU ReDAV | Observable"}] 31:T9e8,Usmap = { const width = 1000; const height = 600; const path = d3.geoPath(); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // Your data aggregation code const aggregatedData = d3.rollup( FilteredData, v => v.length, d => d.County.toLowerCase() ); // Define color scale const colorScale = d3.scaleSequential(d3.interpolateBlues) .domain([0, d3.max(aggregatedData.values())]); const g = svg.append("g") .attr("id","map-container") g.append("g") .selectAll("path") .data(topojson.feature(us, us.objects.counties).features) .join("path") .attr("stroke", "grey") .attr("stroke-opacity",0.15) .attr("fill", d => { const countyId = d.id; const CountyName = d.properties.name; const county = CountyName.toLowerCase(); const countyData = aggregatedData.get(county); if(countyData == undefined){ return "white" } return colorScale(countyData); }) .attr("d",path) .append("title") .text(function (d) { const CountyName = d.properties.name; const county = CountyName.toLowerCase(); var countyData = aggregatedData.get(county); if (countyData == undefined){ countyData = 0} return countyData}); g.append("g") .selectAll("path") .data(topojson.feature(us, us.objects.states).features) .join("path") .attr("fill","none") .attr("stroke", "grey") .attr("stroke-linejoin", "round") .attr("d",path) .on("mouseover.highlight", function(d) { d3.select(this) .raise() .style("stroke", "black") .style("stroke-width", 4); }) .on("mouseout.highlight", function(d) { d3.select(this) .style("stroke", null) .style("stroke-width", null);; }) .on("click", function(e,d){ d3.select(Heatmaps).select("g#heatmap-group").selectAll("rect").remove(); const State = d.properties.name; const StateUpper = State.toUpperCase(); console.log(StateUpper); const filterdata = FilteredData.filter(d => d.State == StateUpper); console.log(filterdata) const HeatDiv = document.getElementById("Heat"); HeatDiv.innerHTML = ''; const newData = HeatMap(filterdata); HeatDiv.appendChild(newData); }); svg .append('g') .attr('transform', 'translate(600, 10)') .append(() => legend({ color: colorScale, title: 'Storms occurred' }) ); return svg.node(); }32:Tc17,function HeatMap(Data){ const margin = ({ top: 20, right: 30, bottom: 30, left: 100 }); const width = 400 const height = 400 const svg = d3.create("svg") .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom + 200 ); const xAxisScale = d3.scaleBand() .domain([0, 1, 2, 3]) .range([margin.left, width + 50]) .padding(0.1); const xAxisGroup = svg.append("g") .attr('transform', `translate(0,${height})`); const yAxisScale = d3.scaleBand() .range([height ,0]) .padding(0.1); const yAxisGroup = svg.append('g') .attr("transform",`translate(${margin.left},0)`) const parseTime = d3.timeParse("%m/%d/%Y %H:%M"); const legendMargin = { top: 10, right: 30, bottom: 30, left: -40 }; const legendWidth = 120; const legendX = margin.left - legendMargin.left - legendWidth; const filterData = Data.filter(function (d) { return ( d.Datetime && new Date(d.YearMonth.toString().substr(0, 4), d.YearMonth.toString().substr(4, 2) - 1).getMonth() + 1 ); }); const nestedData = d3.group(filterData, d => d.Event_Type, d => Math.floor(parseTime(d.Datetime).getHours() / 6)); const rolledUpData = Object.fromEntries([...nestedData].map(([key1, nestedMap]) => [ key1, Object.fromEntries([...nestedMap].map(([key2, values]) => [key2, values.length])) ])); const eventTypes = Array.from(new Set(filterData.map(d => d.Event_Type))); const timeIntervals = Array.from(new Set(filterData.map(d => Math.floor(parseTime(d.Datetime).getHours() / 6)))).sort(); const heatmapData = timeIntervals.flatMap(interval => eventTypes.map(eventType => ({ eventType, interval, count: rolledUpData[eventType]?.[interval] || 0 })) ); const colorScale = d3.scaleSequential(d3.interpolateReds) .domain([0, d3.max(heatmapData, d => d.count)]); const g = svg.append("g") .attr("id","heatmap-group"); g.selectAll("rect") .data(heatmapData) .join("rect") .attr("x", d => ((d.interval*(width/4)) +margin.left )) .attr("y", d => eventTypes.indexOf(d.eventType) * (height / eventTypes.length)) .attr("width", width *0.2) .attr("height", height / eventTypes.length) .style("fill", d => colorScale(d.count)) .append("title") .text(d => `Count: ${d.count}`); xAxisGroup.call(d3.axisBottom(xAxisScale) .tickFormat(d => `${d * 6}:00-${(d + 1) * 6}:00`) ); yAxisScale.domain(eventTypes); yAxisGroup .call(d3.axisLeft(yAxisScale)) .selectAll("text") .call(g => g.append("text") .attr("x", margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(eventTypes.yAxis)); svg .append('g') .attr('transform', `translate(${legendX},${height + margin.top + margin.bottom + legendMargin.top})`) .append(() => legend({ color: colorScale, title: 'Storms throughout time intervals' }) ); return svg.node(); }33:T8cd,function StateMap(selectedState) { const width = 600 const height = 600 const svg = d3.select(DOM.svg(width, height)) const stateData = topojson.feature(usData, usData.objects.states).features.filter((d) => d.properties.name === selectedState); const StateU = selectedState.toUpperCase(); const filteredData = FilteredData.filter(entry => entry.Damage !== null && entry.State === StateU); const countiesData = topojson.feature(usData, usData.objects.counties).features; const projection = d3.geoIdentity().fitSize([width, height], stateData[0]); const path = d3.geoPath().projection(projection); // Make our SVG responsive. svg.attr('viewBox', `0 0 ${width} ${height}`) svg.attr('preserveAspectRatio', 'xMidYMid meet') svg.style('max-width', '100%').style('height', 'auto') const g = svg.append('g') .attr('class', 'states') g.append('g') .selectAll('path') .data(stateData) .join('path') .attr('class', 'state') .attr('d', path) .attr('id', 'state') g.append('clipPath') .attr('id', 'clip-state') .append('use') .attr('xlink:href', '#state') const colorScale = d3.scaleSequential(d3.interpolateBlues) .domain([0, 600]); // All counties. const countiesGroup = g.append('g') .attr('class', 'counties') .selectAll('g') .data(countiesData) .join('g') .attr('clip-path', 'url(#clip-state)') .attr('class', 'county'); countiesGroup.append('path') .attr('d', path) countiesGroup.append('circle') .attr('cx', (d) => path.centroid(d)[0]) .attr('cy', (d) => path.centroid(d)[1]) .attr('r', (d) => { const county = d.properties.name; const countyUpper = county.toUpperCase(); const damageCount = filteredData.filter(entry => entry.County === countyUpper).length; if(damageCount > 10 && damageCount <100){ return damageCount * 30/100; } }) .attr("fill","red") .attr('class', 'damage-circle') .append("title") .text(function(d){ const county = d.properties.name; const countyUpper = county.toUpperCase(); const damageCount = filteredData.filter(entry => entry.County === countyUpper).length; return damageCount; }) return svg.node(); }34:[{"id":"c6337ef3dfd1e85e5ae2d30a58446332c13734f6e259582f2b8ab10ab206b083ae7d5d459945b35f1e89d81d84e9ea89b117414c8e231fdfb813d6045b9d3c80","href":"https://static.observableusercontent.com/files/c6337ef3dfd1e85e5ae2d30a58446332c13734f6e259582f2b8ab10ab206b083ae7d5d459945b35f1e89d81d84e9ea89b117414c8e231fdfb813d6045b9d3c80","name":"StormEvent_details.csv","type":"text/csv","lastModified":1701560994960.944,"size":28809964}] 2f:{"id":"828622fbe3fa940c","slug":null,"title":"","thumbnail":"7edfb92a8ccc1e507053fc33f4ba4d5a914e2ccfcd66160c2f9e0139a5399ab0","access_level":"public","create_time":"$D2023-12-02T23:46:38.181Z","update_time":"$D2023-12-08T20:10:18.918Z","view_time":null,"first_public_time":"$D2023-12-08T20:12:33.879Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6be90def0eaad608","login":"niu-redav","name":"NIU ReDAV","avatar_url":"https://avatars-next.observableusercontent.com/4f6116f4cf961cd7132568b8dbe99bfaa543dbb9ef5eca3152ed1f54f12d0e0b","tier":"pro_2024"},"version":659,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5bbe47348ec1f471","login":"satyasri-karuturi","name":"Satyasri Karuturi","avatar_url":"https://avatars-next.observableusercontent.com/63bc8c0fa192fc295f4a6cc9773ede1009df6835c59cb5daee4a9c6ad07f2c9e","tier":null}],"members":[{"type":"individual","id":"0290d485d6927639","login":"dakoop","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3db1688f30a1b05a38931e472a94cfdfe52090e6ecdd5fe4b5f9ed17708aebe4","tier":null,"role":"editor"},{"type":"team","id":"6be90def0eaad608","login":"niu-redav","name":"NIU ReDAV","avatar_url":"https://avatars-next.observableusercontent.com/4f6116f4cf961cd7132568b8dbe99bfaa543dbb9ef5eca3152ed1f54f12d0e0b","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":349,"value":"### Final Project (CSCI 490 / 627)\n### Satyasri Karuturi\n### Z1984045\n### Data Visualization\n---\nUsing the following dataset with Storm events:\nhttps://www.ncei.noaa.gov/pub/data/swdi/stormevents/csvfiles - StormEvents_details-ftp_v1.0_d2022_c20231116.csv\n

This project aims to provide a holistic overview of storm patterns and their consequences in the year 2022, fostering an understanding of the interplay between weather events and regional damages.\n### Tasks\n\n* What spatial trends can be observed in event types across US map or Selected State?\n* Can patterns be identified regarding specific time intervals during which these storm events are more likely to occur?\n* Which counties exhibit a higher susceptibility to the impact of these storms, and what insights can be derived from the distribution of damages within these counties?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"\n

${Usmap}

${Heatmaps}

${Statemaps}

-->\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":474,"value":"{\n const state = d3.select(Usmap).select(\"g#map-container\").selectAll(\"path\");\n\n state.on(\"click\", function(e,d){\nd3.select(Heatmaps).select(\"g#heatmap-group\").selectAll(\"rect\").remove();\n \n const State = d.properties.name;\n const StateUpper = State.toUpperCase();\n\n const filterdata = FilteredData.filter(d => d.State == StateUpper);\n const HeatDiv = document.getElementById(\"Heat\");\n HeatDiv.innerHTML = '';\n const newData = HeatMap(filterdata);\n HeatDiv.appendChild(newData);\n \n d3.select(Statemaps).select(\"g#states\").selectAll(\"path\").remove();\n var StateDiv = document.getElementById(\"State\");\n StateDiv.innerHTML = '';\n const newState = StateMap(State);\n StateDiv.appendChild(newState); \n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"Data = FileAttachment(\"StormEvent_details.csv\").csv({typed: d3.autoType})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"FilteredData ={\n const data2 = Data.map(d => ({\n YearMonth : d.BEGIN_YEARMONTH,\n Event_ID : d.EVENT_ID,\n State : d.STATE,\n Month : d.MONTH_NAME,\n Event_Type : d.EVENT_TYPE,\n Latitude : d.BEGIN_LAT,\n Longitude : d.BEGIN_LON,\n Datetime : d.BEGIN_DATE_TIME,\n County : d.CZ_NAME,\n Damage : d.DAMAGE_PROPERTY\n }));\n return data2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@2/us/10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"usData = await d3.json('https://d3js.org/us-10m.v2.json')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"radius = d3.scaleSqrt([0, d3.max(FilteredData, d => d.Damage)], [0, 40])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"Statemaps = StateMap(\"Illinois\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"Heatmaps = HeatMap(FilteredData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"fData = FilteredData.filter(entry => entry.Damage !== null);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"totalDamageByCounty = {};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"aggregatedData = d3.rollup(\n FilteredData,\n v => v.length,\n d => d.County.toLowerCase(),\n d => d.Damage\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"