Associate Professor of GIScience at the University of Iowa
Published
Edited
Mar 21, 2022
US_solar_2_feature = topojson.feature(US_solar_2, US_solar_2.objects.suit_solar_2)
csv_data_2 = d3.csvParse(await FileAttachment("suit_solar_2_csv.csv").text(),({zip_int, pct_suitab}) => [+zip_int, +pct_suitab])
choropleth_2 = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
//svg is the canvas that we defined based on the width and height above. SVG is the "painting" inside the canvas.
svg.append("g")
.attr("transform", "translate(250,20)")
//translate=position of the legend
.append(() =>
legend({
color: color2,//color variable
title: data_2.title,
width: 260,
tickFormat: ".1f"
})
);
//paint the map
svg.append("g")//g=graphics, grouping the polygons
.selectAll("path_2")
.data(US_solar_2_feature.features)//polygons and features from topojson. Goes through every polygon one by one. You have to join the polygons to the attributes to figure out what color each polygon should be. This is done by the fill.
.join("path_2")
.attr("stroke", "black")///outline of the polygons
.attr("stroke-linejoin", "round")
.attr("stroke-width", .1)
// .attr("fill", function(d){
// console.log(color2(data_2.get(+d.properties.zip)));
// return color2(data_2.get(+d.properties.zip));
// })
.attr("fill", d => color2(data_2.get(+d.properties.zip)))//asking what values goes with this name?//Goes through every polygon, takes the NAME and asks the data map what is the value for this name?
.attr("d", path_2)
.append("title")
.text(d => " Percent Suitability " + data_2.get(+d.properties.zip));//return a string with the value of the NAME that appears when it is hovered over!
//d.properties is how the join is performed. color is assigned to the fill attribute and that assigns a color to the polygons from the topojsons
return svg.node();
}
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.
