{
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();
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("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();
}