temps1980 = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("transform", "translate(300,20)")
.append(() =>
legend({
color: thresholdchange,
title: datatemp1980.title,
width: 450,
tickFormat: "0.1f"
})
);
svg.append("g")
.selectAll("path")
.data(countiestemp1980.features)
.join("path")
.attr("stroke", "black")
.attr("stroke-linejoin", "bevel")
.attr("stroke-width", 0.2)
// .attr("fill", function(d){
// console.log(color(data.get(d.properties.FIPS)[0]))
// return color(data.get(d.properties.FIPS)[0]);
// })
.attr("fill", function(d){
if(datatemp1980.get(+d.properties.STCOFIPS) > 0){
return thresholdchange(datatemp1980.get(d.properties.STCOFIPS));
}
else{
return nancolor;
}
})
.attr("fill", d => thresholdchange(datatemp1980.get(+d.properties.STCOFIPS)))
.attr("d", path)
.append("title")
.text(d => " Temperature: " + datatemp1980.get(+d.properties.STCOFIPS));
return svg.node();
}
choropleth = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("transform", "translate(300,20)")
.append(() =>
legend({
color: color,
title: data.title,
width: 450,
tickFormat: "0.1f"
})
);
svg.append("g")
.selectAll("path")
.data(counties.features)
.join("path")
.attr("stroke", "black")
.attr("stroke-linejoin", "bevel")
.attr("stroke-width", 0.2)
// .attr("fill", function(d){
// console.log(color(data.get(d.properties.FIPS)[0]))
// return color(data.get(d.properties.FIPS)[0]);
// })
.attr("fill", function(d){
if(data.get(+d.properties.STCOFIPS) > 0){
return color(data.get(d.properties.STCOFIPS));
}
else{
return nancolor;
}
})
.attr("fill", d => color(data.get(+d.properties.STCOFIPS)))
.attr("d", path)
.append("title")
.text(d => " Risk Index: " + data.get(+d.properties.STCOFIPS));
return svg.node();
}
choropleth2 = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("transform", "translate(300,20)")
.append(() =>
legend({
color: ordinalcolor,
title: data.title,
width: 450,
tickFormat: "0.1f"
})
);
svg.append("g")
.selectAll("path")
.data(counties.features)
.join("path")
.attr("stroke", "black")
.attr("stroke-linejoin", "bevel")
.attr("stroke-width", 0.2)
// .attr("fill", function(d){
// console.log(color(data.get(d.properties.FIPS)[0]))
// return color(data.get(d.properties.FIPS)[0]);
// })
.attr("fill", function(d){
if(ordinaldata.get(+d.properties.STCOFIPS) > 0){
return ordinalcolor(ordinaldata.get(d.properties.STCOFIPS));
}
else{
return nancolor;
}
})
.attr("fill", d => ordinalcolor(ordinaldata.get(+d.properties.STCOFIPS)))
.attr("d", path)
.append("title")
.text(d => " Risk Rating: " + ordinaldata.get(+d.properties.STCOFIPS));
return svg.node();
}
chart(numericSort(risk), jenks)
UStemp = FileAttachment("ProjectedNRISHP.json").json()
countiestemp1980 = topojson.feature(US, US.objects.ProjectedNRISHP)
csv_datatemp1980 = d3.csvParse(await FileAttachment("difference.csv").text(),({STCOFIPS, Difference}) => [+STCOFIPS, +Difference])
datatemp1980 = Object.assign(new Map(csv_datatemp1980), {title: "Temperature Anomolies 1975-1980 by County"})
temp1980 = Array.from(csv_datatemp1980.values(), d => d[1])
thresholdchange = d3.scaleThreshold()
.domain([-16.5, 0, 1, 2.5, 4, 8, 16.3])
.range(["#fef0d9", "#fdd49e", "#fdbb84", "#fc8d59", "#e34a33", "#b30000"])
viewof binss = Inputs.range([-16.4, 16.3], {step: 0.1, label: "Bins"})
Plot.plot({
marks: [
Plot.rectY(datatemp1980, Plot.binX({y: "count"}, {x: "datatemp1980", thresholds: binss})),
Plot.ruleY([0])
]
})
csv_dataOrdinal = d3.csvParse(await FileAttachment("National_Risk_Index_Counties_807384124455672111-3 (2)-1-3@1.csv").text(),({STCOFIPS, Rating}) => [+STCOFIPS, Rating])
ordinaldata = Object.assign(new Map(csv_dataOrdinal), {title: "Assessing Wildfire Risk by County, Ordinal"})
colors = d3.scaleThreshold()
.domain(pnaturalbreaks)
.range(PuPi)
ordinalcolor = d3.scaleOrdinal()
.domain (["Very Low", "Relatively Low", "Relatively Moderate", "Relatively High", "Very High"])
.range (["#fee5d9", "#fcae91", "#fb6a4a", "#de2d26", "#a50f15"]);
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
