Untitled / NIU ReDAV

altitude = FileAttachment("Altitude.ipynb")

counties_altitude = FileAttachment("Altitudes.csv").csv()

Storm_Data.map((storm) => {

const stormCoords = [parseFloat(storm.BEGIN_LON), parseFloat(storm.BEGIN_LAT)];

const containingCounty = counties.features.find((county) => {

const countyPolygon = county.geometry.coordinates[0];

return d3.geoContains(county, stormCoords);

});

if (containingCounty) {

const countyID = containingCounty.properties.GEOID.replace(/^0+/, "");

storm.countyGEOID = countyID;

} else {

storm.countyGEOID = null;

}

const altitude = storm.countyGEOID !== null ? countyAltitudeMap.get(storm.countyGEOID) : null;

storm.altitude = altitude;

return storm;

});

AltitudeColorScale = d3.scaleSequential([minAltitude, maxAltitude], d3.interpolateViridis);

DurationColorScale1 = d3.scaleSequential(DurationsColorScaleDomain, d3.interpolateYlOrRd);

// contoursData = {

// let values = [];

// counties.features.map((row)=>{

// var countyID = row["properties"]["GEOID"].replace(/^0+/, "");

// var altitude = countyAltitudeMap.get(countyID)

// d3.range(altitude/200).map(Object).forEach((d,i)=>{

// values.push({"data":row, id:i});

// })

// return values;

// }

// densityContours = d3.contourDensity()

// .x(d => path.centroid(d.data)[0])

// .y(d => path.centroid(d.data)[1])

// .size([width, height])

// .cellSize(2)

// //.bandwidth(4)

// (contoursData)

// ColoredContourMap = {

// const svg = d3.select(DOM.svg(width, height))

// .style("width", "100%")

// .style("height", "auto");

// var divElt = htl.html`<div></div>`

// var max = -Infinity

// var min = Infinity

// densityContours.forEach((contour) => {

// max = Math.max(max,contour.value);

// min = Math.min(min,contour.value)

// //countyAltitudeMap.set(countyFips, altitude);

// });

// var color1 = d3.scaleSequential([min,max],d3.interpolateViridis)

// divElt.append(Legend(color1, {

// title: "Height above local see level in meters."

// }))

// svg.append("path")

// .datum(counties)

// .attr("d", path)

// .style("fill", "none")

// .style("stroke", "#000")

// .style("stroke-width", .1)

// .attr("id", "pathtwo");

// svg.append("clipPath")

// .attr("id", "ClipPathTwo")

// .append("use")

// .attr("xlink:href","#pathtwo");

// const contours = svg.append("g")

// .attr("fill", "none")

// .selectAll(".contour")

// .data(densityContours)

// .enter().append("g");

// contours.append("path")

// .attr("clip-path","url(#ClipPathTwo)")

// .attr("class", "contour")

// .attr("d", d3.geoPath())

// .style("stroke", "#000")

// .style("stroke-width", .5)

// .style("fill", d => color1(d.value))

// svg.selectAll(".LatLon")

// .data(Storm_Data)

// .enter().append("circle")

// .attr("class","Latlon")

// .attr("cx", d => {

// var pr = projection([d.BEGIN_LON, d.BEGIN_LAT]);

// if(pr)

// return (pr[0])

// })

// .attr("cy", d => {

// var pr = projection([d.BEGIN_LON, d.BEGIN_LAT])

// if(pr)

// return pr[1];

// })

// .attr("r",0.5)

// .style("fill","red")

// divElt.append(svg.node())

// return divElt;

// }

{

const svg = d3.select(DOM.svg(width, height));

const divElt = d3.select(document.createElement('div'));

divElt.append("br");

var AltitudeRangeDecider = 50;

var selectedCountyID = null;

var FilterValues = [];

var barOutput = 0;

if(selectedCountyID === null)

{

FilterValues = StormTypesFilter

barOutput = DrawBars()

}

if(StormTypesFilter.length==0){

FilterValues = AllStormTypes;

}

const map = svg.selectAll("path.county")

.data(counties.features)

.enter().append("path")

.attr("d", path)

.style("fill", d => AltitudeColorScale(countyAltitudeMap.get(d.properties.GEOID.replace(/^0+/, ""))))

.on('click', (event, d) => {

selectedCountyID = d.properties.GEOID.replace(/^0+/, "");

console.log(selectedCountyID)

console.log(countyAltitudeMap.get(selectedCountyID))

updateCirclesVisibility();

updateAltitudeText();

//updateCountyHighlights();

var altitudeForBars = selectedCountyID !== null ? Math.round(countyAltitudeMap.get(selectedCountyID)) : null;

barOutput = altitudeForBars !== null ? DrawBars([altitudeForBars-50,altitudeForBars+50]):DrawBars()

d3.selectAll(".plot-d6a7b5").remove();

divElt.node().append(barOutput)

});

map.append("title").text((d)=>"Altitude: "+Math.round(countyAltitudeMap.get(d.properties.GEOID.replace(/^0+/, "")))+" m.")

var EventFilteredStormData = Storm_Data.filter(d => FilterValues.includes(d.EVENT_TYPE))

const averageDuration = d3.mean(EventFilteredStormData, d => d.StormDuration);

const points = svg.selectAll(".LatLon")

.data(EventFilteredStormData)

.enter().append("circle")

.attr("class", "Latlon")

.attr("cx", d => {

const pr = projection([d.BEGIN_LON, d.BEGIN_LAT]);

return pr ? pr[0] : null;

})

.attr("cy", d => {

const pr = projection([d.BEGIN_LON, d.BEGIN_LAT]);

return pr ? pr[1] : null;

})

.style("fill", d => {

return d.StormDuration <= 30 ? DurationColorScale1(d.StormDuration) : "red"

})

.attr("r", d=>{

return StormTypesFilter.length == 0 ? 0.6:1.5

})

points.append("title").text((d) => "Event Type: " + d.EVENT_TYPE + "\nStorm Duration: " +

parseFloat(d.StormDuration).toFixed(2) + " hrs.");

divElt.append("div")

.style("text-align", "center")

.style("margin-top", "10px")

.text(`Showing storms points from years 2019 - 2023(Until Oct)`)

.style("font-weight", "bold")

.style("font-size", "20px");

divElt.append("button")

.text("Reset")

.style("width", "100px")

.style("height", "40px")

.style("background-color", "#000")

.style("color", "#ffffff")

.on("click", () => {

svg.selectAll(".Latlon")

.transition()

.duration(2000)

.attr("r",0.6)

.style("opacity", 1);

svg.selectAll('path')

.attr("stroke","none");

selectedCountyID = null;

updateAltitudeText();

barOutput = DrawBars();

d3.selectAll(".plot-d6a7b5").remove();

divElt.node().append(barOutput)

});

divElt.append("br");

divElt.append(() => Legend(DurationColorScale1,{

title: "Storm durations in hours."

}));

divElt.append(() => Legend(AltitudeColorScale,{

title: "Height above local see level in meters."

}));

const altitudeText = divElt.append("div")

.style("text-align", "center")

.style("margin-top", "10px")

.style("opacity", 1)

.text(`No altitude is selected.`)// The average duration of all storms is ${parseFloat(averageDuration).toFixed(2)} hrs.`)

.style("font-weight", "bold")

.style("font-size", "20px");

function updateCirclesVisibility() {

svg.selectAll('.Latlon')

.filter(d => d.countyGEOID != null)

.interrupt()

.transition()

.duration(2000)

.attr("r",d=>{

const countyID = d.countyGEOID.toString();

const altitude = countyAltitudeMap.get(countyID);

console.log(countyID)

return altitude && selectedCountyID && Math.abs(altitude - countyAltitudeMap.get(selectedCountyID)) <= AltitudeRangeDecider ? 1.5 : 0;

})

svg.selectAll('.Latlon')

.filter(d => d.countyGEOID == null)

.interrupt()

.transition()

.duration(3000)

.style('opacity', 0)

}

function updateCountyHighlights ()

{

svg.selectAll('path')

.attr("stroke","none");

svg.selectAll('path')

.filter((d)=>

{

var selectedAltitude = countyAltitudeMap.get(selectedCountyID);

var geoID = d.properties["GEOID"].replace(/^0+/, "");

if (selectedAltitude-50 <= countyAltitudeMap.get(geoID) && countyAltitudeMap.get(geoID)<=selectedAltitude+50)

return true;

else

return false;

})

.attr("stroke","black")

.attr("stroke-width","1.5px")

}

function updateAltitudeText() {

const altitude = selectedCountyID !== null ? Math.round(countyAltitudeMap.get(selectedCountyID)) : null;

const newText = altitude !== null ? ()=> {

const altitudeRangeStart = altitude - AltitudeRangeDecider;

const altitudeRangeEnd = altitude + AltitudeRangeDecider;

return `Selected altitude : ${altitude}m. Displaying points and counties between altitude range ${altitudeRangeStart}m - ${altitudeRangeEnd}m.`

}

: `No altitude is selected.`;// The average duration of all storms is ${parseFloat(averageDuration).toFixed(2)} hrs.`;

altitudeText

.transition()

.duration(1000)

.style("opacity", 0)

.transition()

.duration(2000)

.text(newText)

.style("opacity", 1);

}

divElt.append(() => svg.node());

divElt.node().append(barOutput)

return divElt.node();

}

Purpose-built for displays of data