// // Create the SVG container
// map = {
// const svg = d3.create("svg")
// .attr("viewBox", [0, -50, width, height]);
// // Legend Group (optional)
// const legendGroup = svg.append("g")
// .attr("transform", "translate(50, 50)");
// // 1. Render Floodplain Layer
// svg.append("g")
// .attr("transform", "scale(0.9)")
// .selectAll("path")
// .data(floodplain.features) // Using floodplain GeoJSON
// .join("path")
// .attr("fill", "#3182bd") // Floodplain fill color
// .attr("stroke", "white") // Floodplain outline
// .attr("stroke-linejoin", "round")
// .attr("d", path_floodplain); // Using the pre-defined path generator
// // 2. Render Basemap Layer (Assuming basemap is also GeoJSON)
// svg.append("g")
// .attr("transform", "scale(0.9)")
// .selectAll("path")
// .data(basemap.features) // Using basemap GeoJSON
// .join("path")
// .attr("fill", "#d9d9d9") // Basemap fill color
// .attr("stroke", "white") // Basemap outline
// .attr("stroke-linejoin", "round")
// .attr("d", path_floodplain); // Same path generator
// // 3. Render Flood Depth Circles (Points)
// svg.append("g")
// .attr("transform", "scale(0.9)") // Adjust the map elements
// .selectAll("circle")
// .data(points.features
// .map(d => (d.value = Math.sqrt(d.properties[attributeName]), d)) // Calculate radius value
// .sort((a, b) => b.value - a.value)) // Sort by value for better layering
// .join("circle")
// .attr("transform", d => `translate(${path_floodplain.centroid(d)})`)
// .attr("r", d => radius(d.value)) // Circle size based on value
// .attr("fill", d => colors(d.value)) // Color based on value
// .attr("fill-opacity", 1) // Opacity
// .attr("stroke", "#bdbdbd") // Outline of the dots
// .attr("stroke-width", 0.5) // Outline width
// .append("title")
// .text(d => `${d.properties[building_type]} | ${d.properties[idName]} | ${format(d.properties[attributeName])} mm`);
// // 4. Title
// svg.append("text")
// .attr("x", 450)
// .attr("y", -25)
// .attr("text-anchor", "middle")
// .attr("font-size", "30px")
// .attr("font-weight", "bold")
// .text("Different Facilities at Flood Risk");
// // 5. Subtitle
// svg.append("text")
// .attr("x", 450)
// .attr("y", -5)
// .attr("text-anchor", "middle")
// .attr("font-size", 16)
// .attr("font-style", "italic")
// .text("Johnson County, Iowa");
// // 6. Data Source Text
// svg.append("text")
// .attr("x", 400)
// .attr("y", 200)
// .attr("text-anchor", "middle")
// .attr("font-size", 12)
// .attr("font-style", "italic")
// .text("Data: Census 2019 - 2023, FEMA Geospatial Resource Center and Iowa Geospatial Data Clearinghouse")
// .attr("transform", "translate(-140, 350)");
// // 7. Legend (Optional, you can enhance this)
// const legend = svg.append("g")
// .attr("transform", `translate(${width - 900}, 380)`);
// // Legend title
// legend.append("text")
// .attr("y", -20)
// .attr("text-anchor", "middle")
// .attr("font-size", 16)
// .text("Flood Depth (mm)");
// // Legend circles
// legend.selectAll("circle")
// .data(quantileBreaks)
// .join("circle")
// .attr("cy", (d, i) => i * 40)
// .attr("r", d => radius(d))
// .attr("fill", (d, i) => YlOrRd[i]);
// // Legend labels
// legend.selectAll("text.label")
// .data(quantileBreaks)
// .join("text")
// .attr("class", "label")
// .attr("x", 30)
// .attr("y", (d, i) => i * 40 + 5)
// .text(d => format(d, 2));
// return svg.node();
// // }
// // Create the SVG container
// mao = {
// const svg = d3.create("svg")
// .attr("viewBox", [0, -50, width, height]);
// // Legend Group (if needed)
// const legendGroup = svg.append("g")
// .attr("transform", "translate(50, 50)");
// // Floodplain - Using Floodplain GeoJSON directly
// svg.append("g")
// .attr("transform", "scale(0.9)")
// .selectAll("path")
// .data(floodplain.features) // Directly using GeoJSON features
// .join("path")
// .attr("fill", "white") // Basemap fill
// .attr("stroke", "#3182bd") // Basemap outline
// .attr("stroke-linejoin", "round")
// .attr("d", path_floodplain); // Using the pre-defined path generator
// // svg.append("g") //Basemap
// // .attr("transform", "scale(0.9)")
// // .append("path")
// // .datum(topojson.feature(basemap, basemap.objects.johnson_county_fld_dpth))
// // .attr("fill", "#d9d9d9") // basemap fill
// // .attr("d", path_basemap);
// // 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_basemap);
// // Title
// svg.append("text")
// .attr("x", 450)
// .attr("y", -25)
// .attr("text-anchor", "middle")
// .attr("font-size", "30px")
// .attr("font-weight", "bold")
// .text("Different Facilities at Flood Risk");
// // Subtitle
// svg.append("text")
// .attr("x", 450)
// .attr("y", -5)
// .attr("text-anchor", "middle")
// .attr("font-size", 16)
// .attr("font-style", "italic")
// .text("Johnson County, Iowa");
// // Data Source Text
// svg.append("text")
// .attr("x", 400)
// .attr("y", 200)
// .attr("text-anchor", "middle")
// .attr("font-size", 12)
// .attr("font-style", "italic")
// .text("Data: Census 2019 - 2023, FEMA Geospatial Resource Center and Iowa Geospatial Data Clearinghouse")
// .attr("transform", "translate(-140, 350)");
// return svg.node();
// }
// symbolLegend = plot({
// autosize: "pad",
// data: [
// {
// name: "values",
// values: circleLabels
// }
// ],
// scales: [
// {
// name: "symbolColor",
// type: "ordinal",
// domain: {data: "values", field: "data"},
// range: YlOrRd
// },
// {
// name: "symbolSize",
// type: "ordinal",
// domain: circleLabels,
// range: sizeArrayForLegend
// }
// ],
// legends: [Object.assign({offset: 0, }, symbolLegendDef)],
// })
//proportional symbols
//radius = d3.scaleSqrt([0, d3.max(attribute)], [0, 30])
// buildingUseColors = d3.scaleOrdinal()
// .domain(["Residential", "Commercial", "Industrial", "Public"])
// .range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728"]); // Example color scheme
// buildingColorScale = d3.scaleOrdinal()
// .domain(["Agriculture", "Commercial", "Education", "Government", "Industrial", "Residential", "Unclassified", "Utility and Misc"]) // Add relevant building types
// .range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#8c6bb1", "#6e016b", "#238443", "#ae017e"]); // Assign distinct colors
console.log(floodplain);
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.
