Zooming Into Staten island
borough = FileAttachment("Staten Island Borough.geojson").json()
councils = FileAttachment("SI Councils.geojson").json()
neighborhoods = FileAttachment("SI Neighborhoods.geojson").json()
schools = FileAttachment("SI Schools.geojson").json()
crimes = FileAttachment("SI Student Crime.geojson").json()
centroids = FileAttachment("SI Centroids Revised.geojson").json()
dronepath = FileAttachment("SI Drone Pathway@1.geojson").json()
d3 = require("d3@6")
chart = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [-50, -20, width, height])
.style("background", "#ffeacf");
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], borough);
var path = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var path3 = d3.geoPath().projection(projection);
var path4 = d3.geoPath().projection(projection);
//Heading
svg .append('text')
.attr('x','-10')
.attr('y','30')
.attr('font-size','.85em')
.attr('fill','#DC7358')
.style("font", "30px roboto")
.style("font-weight", "bold")
.text("NYC STUDENT CRIME")
//Description
svg.append('text')
.attr("class","descript")
.attr('x','-10')
.attr('y','45')
.attr('font-size','.85em')
.attr('fill','#C06953')
.style("font", "14px roboto")
.text("The Safety Drone For Staten Island")
//info
svg.append('text')
.attr("class","descript")
.attr('x','-10')
.attr('y','100')
.attr('font-size','.85em')
.attr('fill','#C06953')
.style("font", "10px roboto")
.text("ZIP:")
svg.append('text')
.attr("class","descript")
.attr('x','-10')
.attr('y','130')
.attr('font-size','.85em')
.attr('fill','#C06953')
.style("font", "10px roboto")
.text("AREA (In Sq Km):")
//insert borough into map
var g = svg.append("g").attr("id", "paths");
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(borough.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','.5')
.style("stroke-width", "1")
.style("stroke", "#ccc")
//insert crimes into map
var c = svg.selectAll("circle") //d3 geopath
//svg
//.selectAll('path')
.data(crimes.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',5)
.style("fill", "red")
.style('fill-opacity','.8')
//.style("stroke-width", "1")
//.style("stroke", "rgb(255,0,0)")
//.on('mouseover',addFill2) //Highlighting crimes over which mouse hovers
//.on('mouseleave',removeFill2) //De-highlighting crimes over which mouse hovered and left
.on('mouseover',addBox)
.on('mouseout',removeBox)
//add crime location tool tip
var tooltip = svg.append("g");
function addBox(event, d) {
var centroid = path.centroid(d);
tooltip.call(
callout,
`${d.properties.schools}
${d.properties.address}
${d.properties.schools_in}`
);
tooltip.attr("transform", "translate(" + centroid + ")");
}
//add school box
//function addRack(event, d) {
//var centroid = path.centroid(d);
//tooltip.call(
//callout,
// `${d.properties.SCHOOLNAME}
// ${d.properties.ADDRESS}
// ${d.properties.PRIN_PH}`
// );
//tooltip.attr("transform", "translate(" + centroid + ")");
//}
//removing crime location tool tip
function removeBox(event, d) {
tooltip.call(callout,null)
}
//insert neighborhoods into map
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(neighborhoods.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
.attr("fill", d => color(d.properties.shape_area))
.style('fill-opacity','.5')
.style("stroke", "#ccc")
.on('mouseover', addFill)
.on('mouseleave', removeFill)
//Adding fill to neighborhoods for interaction
function addFill(event,d) {
d3.select(this).style("fill", "white")
d3.select(this) .style('fill-opacity','1')
//d3.select(this).style("stroke-width", "1.5")
//d3.select(this).style("stroke", "black")
//d3.select(this).style("stroke-opacity", "1")
svg
.append('text')
.attr('class','labels')
.attr('x','-10')
.attr('y','115')
.attr('font-size','.85em')
.style("font", "10px roboto")
.attr('fill','#DC7358')
.text(d.properties.ntaname)
svg
.append('text')
.attr('class','labels')
.attr('x','-10')
.attr('y','145')
.attr('font-size','.55em')
.attr('fill','#DC7358')
.style("font", "10px roboto")
.text((d.properties.shape_area)/10000000)
}
//take away neighborhood fill
function removeFill(event,d) {
d3.selectAll('text.labels').remove()
d3.select(this).style("fill", d => color(d.properties.shape_area))
d3.select(this) .style('fill-opacity','.5')
.style("stroke", "#ccc")
}
//making centroids in neighborhoods
var c = svg.selectAll("circle") //d3 geopath
.data(neighborhoods.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',1)
.attr('r',function(d){return d.properties.shape_area/10000000})
.style("fill", "none")
//.style('fill-opacity','1')
.style("stroke-width", "1")
.style("stroke", "white")
//Adding text on left column
svg.selectAll('text')
.data(neighborhoods.features)
.enter()
.append('text')
.attr('x','-10')
.attr('y',function(d,i){return i*20+100})
.attr('font-size','.85em')
//.attr('text-anchor','end')
.attr('fill','black')
.style("font", "8px roboto")
.text(function(d){return d.properties.ntaname})
.on('mouseover',addStroke) //Highlighting lines of zips over which mouse hovers
.on('mouseleave',removeStroke) //De-highlighting lines of zips over which mouse hovered and left
//add line from label to zip centroid
var l = svg.selectAll('line')
.data(neighborhoods.features)
.enter()
.append('line')
.attr('x1',-10)
.attr('y1',function(d,i){return i*20+100})
.attr('x2',function(d) {return path.centroid(d)[0]}) //2 pixels away from the text
.attr('y2',function(d) {return path.centroid(d)[1]})
.attr('stroke-width','.4')
.attr('stroke-opacity','.1')
.style('stroke','rgb(0,0,0)')
.on('mouseover',addStroke) //Highlighting lines of zips over which mouse hovers
.on('mouseleave',removeStroke) //De-highlighting lines of zips over which mouse hovered and left
//Adding highlight to zip lines for interaction
function addStroke(event,d) {
d3.select(this).style("stroke-width", ".8")
d3.select(this).style("stroke", "black")
d3.select(this).style("stroke-opacity", "1")
}
//take away highlight to zip lines
function removeStroke(event,d) {
d3.selectAll('text.labels').remove()
d3.select(this).style("stroke-width", ".4")
d3.select(this).style("stroke", "black")
d3.select(this).style("stroke-opacity", ".1")
}
//insert council into map
var g = svg.append("g").attr("id", "paths");
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(councils.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
.attr("fill", "none")
//.attr('fill-opacity','0.01')
.style("stroke-width", "1")
.style("stroke", "black")
.style("stroke-opacity", "1")
//insert schools into map
var c = svg.selectAll("circle") //d3 geopath
//svg
//.selectAll('path')
.data(schools.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',3)
.style("fill", "white")
.style('fill-opacity','1')
.style("stroke-width", "1")
.style("stroke", "white")
//insert centroids into map
g.selectAll("path2") //d3 geopath
//svg
//.selectAll('path')
.data(centroids.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", "black")
.style('fill-opacity','.5')
.style("stroke-width", "1")
.style("stroke", "black")
//.style("stroke-opacity", "1")
.on('mouseover', addFill2)
.on('mouseleave', removeFill2)
//Adding fill to centroids for interaction
function addFill2(event,d) {
d3.select(this).style("fill", "red")
d3.select(this) .style('fill-opacity','1')
//d3.select(this).style("stroke-width", "1.5")
//d3.select(this).style("stroke", "black")
//d3.select(this).style("stroke-opacity", "1")
svg
.append('text')
.attr('class','labels')
.attr('x','120')
.attr('y','850')
.attr('font-size','.85em')
.style("font", "14px roboto")
.attr('fill','#DC7358')
.style("font-weight", "bold")
.text(d.properties.Descriptio)
}
//take away centroid fill
function removeFill2(event,d) {
d3.selectAll('text.labels').remove()
d3.select(this).style("fill", 'black')
d3.select(this).style('fill-opacity','.5')
d3.select(this).style("stroke-width", "1")
d3.select(this).style("stroke", "black")
//.style("stroke", "#ccc")
}
//insert drone pathway into map
g.selectAll("path3") //d3 geopath
//svg
//.selectAll('path')
.data(dronepath.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", "none")
//.style('fill-opacity','1')
.style("stroke-width", "1")
.style("stroke", "red")
.style("stroke-opacity", ".4")
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([1, 150000000], d3.schemeOrRd[9]) //Color name from observable color scheme data online
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.
