choropleth = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("transform", "translate(480,0)")
.append(() =>
legend({
color: nullcolorforlegend,
title: "No Data",
width: 50,
tickFormat: ".1f"
})
);
svg.append("g")
.attr("transform", "translate(480,0)")
.append(() =>
legend({
color: color,
title: data.title,
width: 300,
tickFormat: ".1f"
.attr("fill", function(d){
if(data.get(d.properties.GISJOIN) > 0){
return color(data.get(d.properties.GISJOIN));
}
else{
return nancolor;
}
})
.attr("d", path)
.append("title")
.text(d => " Vacancy Percentage: " + data.get(d.properties.GISJOIN));
svg.append("g")
.selectAll("path")
.data(tracts.features)
.join("path")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1)
// .attr("fill", function(d){
// console.log(color(data.get(d.properties.FIPS)[0]))
// return color(data.get(d.properties.FIPS)[0]);
// })
.attr("fill", d => color(data.get(d.properties.GISJOIN)))
.attr("d", path)
.append("title")
.text(d => " Percent Vacant: " + data.get(d.properties.GISJOIN));
return svg.node();
}
nancolor = d3.color("gray")
nullcolorforlegend = d3.scaleOrdinal()
.domain([NaN])
.range([nancolor])
//more information on sequential scales: https://observablehq.com/@d3/sequential-scales
// color = d3.scaleSequentialQuantile([...data.values()], d3.interpolateBlues)
color = d3.scaleQuantile()
.domain(vacant_housing)
.range(YlOrge)
// color = d3.scaleThreshold()
// .domain(quantiles)
// .range(YlGnBu)
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.
