Published
Edited
Dec 6, 2021
NYC Student Crime Map
zips = FileAttachment("zip_test4.geojson").json()
nycBoroughs = FileAttachment("NYC Boroughs.geojson").json()
nycSchools = FileAttachment("NYC Public Schools.geojson").json()
nycCrimes = FileAttachment("NYC Full Student Crime.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], zips);
var path = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
//const g = svg.append("g");
//const states = g.append("g")
//Heading
svg .append('text')
.attr('x','100')
.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','100')
.attr('y','45')
.attr('font-size','.85em')
.attr('fill','#C06953')
.style("font", "14px roboto")
.text("In relation to public school locations")
//info
svg.append('text')
.attr("class","descript")
.attr('x','100')
.attr('y','80')
.attr('font-size','.85em')
.attr('fill','#C06953')
.style("font", "10px roboto")
.text("BOROUGH:")
svg.append('text')
.attr("class","descript")
.attr('x','100')
.attr('y','110')
.attr('font-size','.85em')
.attr('fill','#C06953')
.style("font", "10px roboto")
.text("AREA (In Sq Km):")
svg.append('text')
.attr("class","descript")
.attr('x','100')
.attr('y','140')
.attr('font-size','.85em')
.attr('fill','#C06953')
.style("font", "10px roboto")
.text("ZIP:")
svg.append('text')
.attr("class","descript")
.attr('x','100')
.attr('y','170')
.attr('font-size','.85em')
.attr('fill','#C06953')
.style("font", "10px roboto")
.text("POPULATION:")
//insert zips into map
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", "none")
.attr("fill", d => color(d.properties.POPULATION))
.style('fill-opacity','.5')
.style("stroke", "#ccc")
//making centroids in zips
var c = svg.selectAll("circle") //d3 geopath
.data(zips.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.POPULATION/10000})
.style("fill", "black")
.style('fill-opacity','1')
//Adding text on left column
svg.selectAll('text')
.data(zips.features)
.enter()
.append('text')
.attr('x','0')
.attr('y',function(d,i){return i*3.3})
.attr('font-size','.25em')
.attr('text-anchor','end')
.text(function(d){return d.properties.PO_NAME})
.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 horizontal line for a distance from label for aesthetics
//var l = svg.selectAll('line')
//.data(zips.features)
//.enter()
//.append('line')
//.attr('x1',2)
//.attr('y1',function(d,i){return i*3.2+10})
//.attr('x2',60) //2 pixels away from the text
//.attr('y2',function(d,i){return i*3.2+10})
//.attr('stroke-width','.4')
//.attr('stroke-opacity','.1')
//.style('stroke','rgb(0,0,0)')
//add line from label to zip centroid
var l = svg.selectAll('line')
.data(zips.features)
.enter()
.append('line')
.attr('x1',2)
.attr('y1',function(d,i){return i*3.3})
.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")
svg
.append('text')
.attr('class','labels')
.attr('x','100')
.attr('y','155')
.attr('font-size','.85em')
.style("font", "10px roboto")
.attr('fill','#DC7358')
.text(d.properties.PO_NAME)
svg
.append('text')
.attr('class','labels')
.attr('x','100')
.attr('y','185')
.attr('font-size','.55em')
.style("font", "10px roboto")
.attr('fill','#DC7358')
.text(d.properties.POPULATION)
}
//insert boroughs into map
g.selectAll("path2") //d3 geopath
//svg
//.selectAll('path')
.data(nycBoroughs.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", "white")
.attr('fill-opacity','0.01')
.style("stroke-width", ".5")
.style("stroke", "black")
.style("stroke-opacity", ".5")
.on('mouseover',addFill) //Highlighting boroughs over which mouse hovers
.on('mouseleave',removeFill) //De-highlighting boroughs over which mouse hovered and left
//making circles in boroughs with radii based on shape areas
//var c = svg.selectAll("circle") //d3 geopath
//.data(nycBoroughs.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',function(d) {return d.properties.shape_area/10000})
//.style("fill", "red")
//.style('fill-opacity','1')
//Adding text
svg.selectAll('text')
.data(nycBoroughs.features)
.enter()
.append('text')
.attr('x',function(d) {return path.centroid(d)[0]})
.attr('y',function(d) {return path.centroid(d)[1]})
.attr('font-size','2em')
.text(function(d){return d.properties.boro_name})
//Adding labels and fill to boroughs for interaction
function addFill(event,d) {
d3.select(this).style("fill", "#DC7358")
d3.select(this) .style('fill-opacity','.75')
//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','100')
.attr('y','95')
.attr('font-size','.85em')
.style("font", "10px roboto")
.attr('fill','#DC7358')
.text(d.properties.boro_name)
svg
.append('text')
.attr('class','labels')
.attr('x','100')
.attr('y','125')
.attr('font-size','.55em')
.attr('fill','#DC7358')
.style("font", "10px roboto")
.text((d.properties.shape_area)/10000000)
}
//take away borough labels/borough fill
function removeFill(event,d) {
d3.selectAll('text.labels').remove()
d3.select(this).style("fill", "white")
d3.select(this) .style('fill-opacity','.01')
d3.select(this).style("stroke-width", ".5")
d3.select(this).style("stroke", "black")
d3.select(this).style("stroke-opacity", ".5")
}
//adding circle around staten island for aesthetics
var c = svg.selectAll('circle')
.attr('cx',190)
.attr('cy',690)
.attr('r',180)
.style("fill", 'none')
//.style('fill-opacity','.5')
//.style("stroke", "#ccc")
.attr('stroke-width','.4')
.attr('stroke-opacity','.1')
.style('stroke','#DC7358')
.style('stroke-dasharray',"8")
//insert schools into map
var c = svg.selectAll("circle") //d3 geopath
//svg
//.selectAll('path')
.data(nycSchools.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)
.style("fill", "white")
.style('fill-opacity','1')
.style("stroke-width", "1")
.style("stroke", "white")
//.on('mouseover',addRack)
//.on('mouseout',removeBox)
//insert crimes into map
var c = svg.selectAll("circle") //d3 geopath
//svg
//.selectAll('path')
.data(nycCrimes.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", "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)
//Adding crime text on left column
//svg.selectAll('text')
//.data(nycCrimes.features)
//.enter()
//.append('text')
//.attr('x','0')
//.attr('y',function(d,i){return i*2+10})
//.attr('font-size','.15em')
//.attr('text-anchor','end')
//.text(function(d){return d.properties.location_n})
//add line from label to crime location
//svg.selectAll('line')
//.data(nycCrimes.features)
//.enter()
//.append('line')
//.attr('x1',function(d) {return path.centroid(d)[0]})
//.attr('y1',function(d) {return path.centroid(d)[1]})
//.attr('x2','2') //2 pixels away from the text
//.attr('y2',function(d,i){return i*2+10})
//.attr('stroke-width','.4')
//.attr('stroke-opacity','.08')
//.style('stroke','rgb(0,0,0)')
//Adding fill to crimes for interaction
//function addFill2(event,d) {
//d3.select(this).style("fill", "black")
//d3.select(this) .style('fill-opacity','1')
//}
//take away crime labels/fill
//function removeFill2(event,d) {
//d3.select(this).style("fill", "red")
//d3.select(this) .style('fill-opacity','1')
//}
//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)
}
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, 100000], 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.
