Vulnerability Map
zips = FileAttachment("zip_test4.geojson").json()
Score = FileAttachment("Score.geojson").json()
Arizona = FileAttachment("Arizona Boundary 2nd.geojson").json()
nycParks = FileAttachment("parks_nyc_reduced@2.geojson").json()
subway_lines = FileAttachment("subway_lines@2.geojson").json()
subSts = FileAttachment("subway_sts@1.geojson").json()
racks = FileAttachment("bike_racks.geojson").json()
d3 = require("d3@6")
Legend(d3.scaleThreshold([5, 7, 9, 11, 13, 15], d3.schemeYlOrBr[7]), {
title: "Water Security Level",
tickSize: 0
})
chart = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [-60, 0, width, height]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], Arizona);
var path = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(Arizona.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "white")
.style('fill-opacity','.8')
.style("stroke-width", ".35")
.style("stroke", "#ccc")
//insert parks into map
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(Score.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", d => color(d.properties.Base_Base))
.style('fill-opacity','.5')
.style("stroke-width", ".1")
.style("stroke", "rgb(255,0,0)")
.on('mouseover', addFill)
.on('mouseleave', removeFill)
//add park labels and park fill
function addFill(event,d) {
d3.select(this).style("fill", "red")
d3.select(this).style('fill-opacity','.8')
svg
.append('text')
.attr("class","labels")
.attr('x','10')
.attr('y','70')
.attr('font-size','.85em')
.text(d.properties.Name_Name)
svg
.append('text')
.attr("class","labels")
.attr('x','10')
.attr('y','90')
.attr('font-size','.85em')
.text(d.properties.Base_Base)
}
//take away park labels/park fill
function removeFill(event,d) {
d3.selectAll("text.labels").remove()
d3.select(this).style("fill", d => color(d.properties.Base_Base))
d3.select(this).style('fill-opacity','.5')
}
return svg.node();
}
callout = (g, value) => {
if (!value) return g.style("display", "none");
g
.style("display", null)
.style("pointer-events", "none")
.style("font", "10px sans-serif");
const path = g.selectAll("path")
.data([null])
.join("path")
.attr("fill", "white")
.attr("stroke", "black");
const text = g.selectAll("text")
.data([null])
.join("text")
.call(text => text
.selectAll("tspan")
.data((value + "").split(/\n/))
.join("tspan")
.attr("x", 0)
.attr("y", (d, i) => `${i * 1.1}em`)
.style("font-weight", (_, i) => i ? null : "bold")
.text(d => d));
const {x, y, width: w, height: h} = text.node().getBBox();
text.attr("transform", `translate(${-w / 2},${15 - y})`);
path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);
}
color = d3.scaleQuantize([4, 15], d3.schemeYlOrBr[9])
import {Legend} from "@d3/color-legend"
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.
