Published
Edited
Dec 6, 2021
NYC Facilities map
zips = FileAttachment("zip_test4.geojson").json()
nycStreets = FileAttachment("test street.geojson").json()
nycWaters = FileAttachment("Waternyc.geojson").json()
nycParks = FileAttachment("parks_nyc_reduced@2.geojson").json()
subway_lines = FileAttachment("subway_lines-2.geojson").json()
nycFacilities = FileAttachment("Facilitynyc.geojson").json()
subSts = FileAttachment("subway_sts@1.geojson").json()
d3 = require("d3@6")
chart = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [-60, -20, width, height])
.style("background", "linear-gradient(to bottom right, rgb(240,240,240), rgb(165,165,165)");
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], zips);
var path = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
// add title
svg
.append('text')
.attr('x','570')
.attr('y','820')
.attr('font-size','1.35em')
.style("font", "24px source serif pro")
.attr('font-weight', 'bold')
.style("fill", "rgb(110,15,15)")
.text("NYC Facilities map")
svg
.append('text')
.attr('x','570')
.attr('y','837')
.attr('font-size','.6em')
.style("font", "10px source serif pro")
.style("fill", "rgb(110,15,15)")
.text("the New York city’s map indicating the relationship")
svg
.append('text')
.attr('x','570')
.attr('y','846')
.attr('font-size','.6em')
.style("font", "10px source serif pro")
.style("fill", "rgb(110,15,15)")
.text("between public facilities, parks, water features, and population.")
var g = svg.append("g").attr("id", "paths");
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(zips.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", "rgb(130,20,20)")
.style("fill", d => color(d.properties.POPULATION))
.style('fill-opacity','.5')
.style("stroke-width", ".25")
.style('stroke-opacity','.9')
.style("stroke", "rgb(20,40,115)")
//insert waters into map
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(nycWaters.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", "rgb(20,50,125)")
.style('fill-opacity','.75')
.style("stroke-width", ".25")
.style('stroke-opacity','.75')
.style("stroke", "rgb(0,0,0)")
//insert parks into map
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(nycParks.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", "rgb(110,15,15)")
.style('fill-opacity','.6')
.style("stroke-width", ".2")
.style("stroke", "rgb(110,15,15)")
.on('mouseover', addFill)
.on('mouseleave', removeFill)
g.selectAll("path2") //d3 geopath
//svg
//.selectAll('path')
.data(nycStreets.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-opacity','0')
.style("stroke-width", ".05")
.style("stroke", "rgb(0,0,0)")
g.selectAll("path2") //d3 geopath
//svg
//.selectAll('path')
.data(subway_lines.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-opacity','0')
.style("stroke-width", ".25")
.style("stroke", "rgb(180,160,30)")
g.selectAll("circle") //d3 geopath
//svg
//.selectAll('path')
.data(nycFacilities.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr('cx',function(d) {return path.centroid(d)[0]})
.attr("cy",function(d) {return path.centroid(d)[1]})
.attr('r',9)
.attr('fill','rgb(30,60,100)')
.style('fill-opacity','.2')
.on('mouseover', addBox)
.on('mouseleave', removeBox)
//add line from texts
var l = svg.selectAll('line')
.data(nycFacilities.features.slice(0,221))
.enter()
.append('line')
.attr('x1',40)
.attr('y1',function(d,i){return i*3.95-3})
.attr('x2',70)
.attr('y2',function(d,i){return i*3.95-3})
.attr('stroke-width','.3')
.attr('stroke-opacity','.6')
.style('stroke','rgb(130,20,20)')
l.enter().append('line')
.data(nycFacilities.features.slice(0,221))
.enter()
.append('line')
.attr('x1',70)
.attr('y1',function(d,i){return i*3.95-3})
.attr('x2',function(d) {return path.centroid(d)[0]})
.attr('y2',function(d) {return path.centroid(d)[1]})
.attr('stroke-width','.3')
.attr('stroke-opacity','.3')
.style('stroke','rgb(130,20,20)')
//add texts
svg.selectAll('text')
.data(nycFacilities.features.slice(0,221))
.enter()
.append('text')
.attr('x','35')
.attr('y',function(d,i){return i*4-14})
.attr('font-size','.225em')
.style("font", "3px source serif pro")
.attr('text-anchor','end')
.style("fill", "rgb(110,15,15)")
.text(function(d){return d.properties.facility})
//svg.selectAll('text2')
//.data(nycFacilities.features.slice(220,400))
//.enter()
//.append('text')
//.attr('x','70')
//.attr('y',function(d,i){return i*4-5})
//.attr('font-size','.225em')
//.attr('text-anchor','end')
//.style("fill", "rgb(110,15,15)")
//.text(function(d){return d.properties.facility})
//add park labels and park fill
function addFill(event,d) {
d3.select(this).style("fill", "rgb(250,250,250)")
d3.select(this).style('fill-opacity','.65')
svg.append('rect')
.attr('x', '163')
.attr('y', '60')
.attr('width', 230)
.attr('height', 30)
.attr('class','labels')
.attr('stroke', 'rgb(110,15,15)')
.attr('stroke-width','.15')
.attr('fill-opacity', '0')
.attr('fill', 'white');
svg
.append('text')
.attr('class','labels')
.attr('x','170')
.attr('y','75')
.attr('font-size','.85em')
.style("font", "14px source serif pro")
.style("fill", "rgb(110,15,15)")
.text(d.properties.park_name)
svg
.append('text')
.attr('class','labels')
.attr('x','170')
.attr('y','85')
.attr('font-size','.50em')
.style("font", "8px source serif pro")
.style("fill", "rgb(110,15,15)")
.text(d.properties.landuse)
}
//take away park labels and park fill
function removeFill(event,d) {
d3.selectAll('text.labels').remove()
d3.selectAll('rect.labels').remove()
d3.select(this).style("fill", "rgb(110,15,15)")
d3.select(this).style('fill-opacity','.6')
}
//add facilities
var tooltip = svg.append("g");
function addBox(event, d) {
var centroid = path.centroid(d);
//var centroid = function(d) {return path.centroid(d)};
tooltip.call(
callout,
`${d.properties.facility}
${d.properties.address}, ${d.properties.address}`
);
tooltip.attr("transform", "translate(" + centroid + ")");
}
function removeBox(event, d) {
tooltip.call(callout,null)
}
return svg.node();
}
color = d3.scaleQuantize([1, 100000], d3.schemeGreys[9])
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`);
}
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.
