choropleth = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// Add floodplain layer first (so it appears behind the block groups)
// svg.append("path")
// //.datum(topojson.mesh(basemap, basemap.objects.johnson_county_fld_dpth, (a, b) => a !== b))
// .attr("fill", "none")
// .attr("stroke", "white") //basemap outline
// .attr("stroke-linejoin", "round")
// .attr("d", path_floodplain);
//Block groupss
svg.append("g")
.selectAll("path")
.data(blkgrp_features.features)
.join("path")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1)
.attr("fill", d => color(data.get(d.properties.GISJOIN)))
.attr("d", path)
.append("title")
.text(d => `${d.properties[idName]} : Flood Depth ${d3.format(".2f")(data.get(d.properties.GISJOIN))} feet`);
svg.append("g")
//.attr("transform", "scale(0.0000000000000005)")
.selectAll("path")
.data(floodplain.features)
.join("path")
//.attr("fill", "#white") // color for floodplain
//.attr("fill-opacity", .5) //
.attr("stroke", "#e34a33")
.attr("stroke-width", 5)
.attr("d", path);
// Add legend (unchanged)
svg.append("g")
.attr("transform", `translate(20, ${height - 90})`)
.append(() =>
legend({
color: color,
title: "Flood Depth (Feet)",
width: 260,
tickFormat: ".1f"
})
);
// Add title (unchanged)
svg.append("text")
.attr("x", width / 2)
.attr("y", 20)
.attr("text-anchor", "middle")
.attr("font-size", "30px")
.attr("font-weight", "bold")
.text("Flood Exposure at Block Group Level");
// Add subtitle (unchanged)
svg.append("text")
.attr("x", width / 2)
.attr("y", 40)
.attr("text-anchor", "middle")
.attr("font-size", 16)
.attr("font-style", "italic")
.text("Johnson County, Iowa");
// Add data source (unchanged)
svg.append("text")
.attr("x", 320)
.attr("y", 250)
.attr("text-anchor", "middle")
.attr("font-size", 12)
.attr("font-style", "italic")
.text("Data: Census 2019 - 2023 and Iowa Geospatial Data Clearinghous")
.attr("transform", "translate(-140, 350)");
return svg.node();
}
// choropleth = {
// const svg = d3.create("svg") //This is for cerating the canvas
// .attr("viewBox", [0, 0, width, height]);
// // svg.append("g")
// // .attr("transform", "translate(360, 0)")
// // .append(() =>
// // legend({
// // color: color,
// // title: data.title,
// // width: 260,
// // tickFormat: ".1f"
// // })
// // );
// svg.append("g")
// .attr("transform", `translate(20, ${height - 90})`) // Adjust to bottom-left
// .append(() =>
// legend({
// color: color,
// //title: data.title,
// title: "Flood Depth (Feet)",
// width: 260,
// tickFormat: ".1f"
// })
// );
// svg.append("g")
// .selectAll("path")
// .data(blkgrp_features.features)
// .join("path")
// .attr("stroke", "white") // sets the border color to white.
// .attr("stroke-linejoin", "round") // Sets the shape of corners where two borders meet, here it ismaking them rounded
// .attr("stroke-width", 1) // sets the width of the border. Here the width is 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 => " Flood Depth (feet): " + data.get(d.properties.GISJOIN));
// .text(d => `${d.properties[idName]} : Flood Depth ${d3.format(".2f")(data.get(d.properties.GISJOIN))} feet`);
// svg.append("text")
// .attr("x", width / 2) // Centers the title horizontally
// .attr("y", 20) // Adjusts the vertical position
// .attr("text-anchor", "middle") // Aligns the text to the center
// .attr("font-size", "30px") // Sets the font size
// .attr("font-weight", "bold") // Makes the title bold
// .text("Flood Exposure at Block Group Level"); // The title text
// //this line of codes to add a subtitle
// svg.append("text")
// .attr("x", width / 2)
// .attr("y", 40)
// .attr("text-anchor", "middle")
// .attr("font-size", 16)
// .attr("font-style", "italic")
// .text("Johnson County, Iowa");
// //this line of codes to add another line at the bottom
// svg.append("text")
// .attr("x", 320)
// .attr("y", 250)
// .attr("text-anchor", "middle")
// .attr("font-size", 12)
// .attr("font-style", "italic")
// .text("Data: Census 2019 - 2023 and Iowa Geospatial Data Clearinghous")
// .attr("transform", "translate(-140, 350)");
// return svg.node();
// }
//path_floodplain = d3.geoPath().projection(projection)
floodplain = await FileAttachment("floodplain_johnson_county.json").json();
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.
