the City Embrace Interactive Map
zips = FileAttachment("zip_test4.geojson").json()
RHY = FileAttachment("DYCD RHY (Runaway and Homeless Youth) Services.geojson").json()
IHDA = FileAttachment("Inclusionary Housing Designated Areas.geojson").json()
d3 = require("d3@6")
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], zips);
var path = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
//add line from label to RHY
svg.selectAll('line')
.data(RHY.features)
.enter()
.append('line')
.attr('x1',function(d) {return path.centroid(d)[0]})
.attr('y1',function(d) {return path.centroid(d)[1]})
.attr('x2',52)
.attr('y2',function(d,i){return i*6+20})
.attr('stroke-width','.3')
.attr('stroke-opacity','0.8')
.style('stroke','rgb(255,165,0)')
//add line from label to MIH
svg.selectAll('line')
.data(MIH.features)
.enter()
.append('line')
.attr('x1',function(d) {return path.centroid(d)[0]})
.attr('y1',function(d) {return path.centroid(d)[1]})
.attr('x2',52)
.attr('y2',function(d,i){return i*6+70})
.attr('stroke-width','0.3')
.attr('stroke-opacity','.2')
.style('stroke','rgb(21,27,84)')
//base 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))
.attr("fill", d => color(d.properties.POPULATION))
.style('fill-opacity','0.3')
.style("stroke", "rgb(255,250,240)")
.attr('stroke-width','0.3')
//base map gradient fill based on population
g.selectAll("circle") //d3 geopath
//svg
//.selectAll('path')
.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('class','outlines')
//.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements
.attr('cx',function(d){return path.centroid(d)[0]})
.attr('cy',function(d){return path.centroid(d)[1]})
//.attr('r',5)
//.attr('r', (d) => d.POPULATION/100)
.attr('r',function(d){return d.properties.POPULATION/10000})
.style("fill", "none")
.style('fill-opacity','.3')
.attr('stroke-opacity','.6')
.style("stroke", "rgb(255,250,240)")
//insert Inclusive Housing Designated Area into map
g.selectAll("path2") //d3 geopath
//svg
//.selectAll('path')
.data(IHDA.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(21,27,84)")
.style('fill-opacity','.25')
.style("stroke-width", ".2")
.style("stroke", "rgb(21,27,84)")
.on("mouseover", addFill)
.on("mouseleave", removeFill);
//insert Runaway Homeless Youth Centers into map
g.selectAll("path2") //d3 geopath
//svg
//.selectAll('path')
.data(RHY.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','5')
.style("stroke-width", ".15")
.style("stroke", "rgb(255,165,0)")
.style("fill", "rgb(255,165,0)")
//insert Mandatory Inclusive Housing into map
g.selectAll("path2") //d3 geopath
//svg
//.selectAll('path')
.data(MIH.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(21,27,84)")
.style('fill-opacity','0.8')
.style("stroke-width", ".2")
.style("stroke", "rgb(21,27,84)")
//add RHY text
svg.selectAll('text')
.data(RHY.features)
.enter()
.append('text')
.attr('x','50')
.attr('y',function(d,i){return i*6+20})
.attr('font-size','.25em')
.attr('text-anchor','end')
.text(function(d){return d.properties.divisionna})
//add Map title
svg.append('text')
.attr('x','550')
.attr('y','850')
.attr('font-size','1.75em')
.style('font-family', 'verdana')
.attr('fill', 'rgb(0,0,0)')
.attr('font-weight', 'bold')
.text('THE CITY EMBRACE')
//add Map subtitle
svg.append('text')
.attr('x','270')
.attr('y','870')
.attr('font-size','0.75em')
.style('font-family', 'verdana')
.attr('fill', 'rgb(100,100,100)')
.attr('font-weight', 'light')
.text('A Guide to Settle Runaway Homeless Youth from Crisis Centers to Nearby Inclusionary Housings')
//add RHY title
svg.append('text')
.attr('x','0')
.attr('y','10')
.attr('font-size','0.55em')
.style('font-family', 'verdana')
.attr('fill', 'rgb(255,165,0)')
.attr('font-weight', 'bold')
.text('Runaway Homeless Youth Centers')
//add MIH title
svg.append('text')
.attr('x','0')
.attr('y','150')
.attr('font-size','0.55em')
.style('font-family', 'verdana')
.attr('fill', 'rgb(21,27,84)')
.attr('font-weight', 'bold')
.text('Mandatory Inclusionary Housing Sites')
//add MIH text
svg.selectAll('text')
.data(MIH.features)
.enter()
.append('text')
.attr('x','50')
.attr('y',function(d,i){return i*6+70})
.attr('font-size','.25em')
.attr('text-anchor','end')
.text(function(d){return d.properties.project_nam})
//add IHDA labels and IHDA fill
function addFill(event,d) {
d3.select(this).style("fill", "rgb(195,88,23)")
d3.select(this).style('fill-opacity','.8')
svg.append('text')
.attr('x','700')
.attr('y','30')
.attr('font-size','0.65em')
.attr('fill', 'rgb(0,0,0)')
.attr('font-weight', 'bold')
.text('Inclusionary Housing Designated Area')
svg
.append('text')
.attr("class","labels")
.attr('x','700')
.attr('y','50')
.attr('font-size','.65em')
.text(d.properties.project_nam) // Properties + proper labels of each IHDA
svg.append('text')
.attr('x','700')
.attr('y','70')
.attr('font-size','0.65em')
.attr('fill', 'rgb(0,0,0)')
.attr('font-weight', 'bold')
.text('Project Adopted Date')
svg
.append('text')
.attr("class","labels")
.attr('x','700')
.attr('y','90')
.attr('font-size','.65em')
.text(d.properties.date_adopte) //
}
//take away IHDA labels/IHDA fill
function removeFill(event,d) {
d3.selectAll("text.labels").remove()
d3.select(this).style("fill", "rgb(88,127,167)")
d3.select(this).style('fill-opacity','.25')
}
return svg.node();
}
color = d3.scaleQuantize([1, 100000], d3.schemeBlues[9])
import {legend} from "@d3/color-legend"
callout2 = (g, value) => {
if (!value) return g.style("display", "none");
g
.style("display", null)
.style("pointer-events", "none")
.style("fill","rgb(175,175,0)")
.style("font", "10px sans-serif");
const path = g.selectAll("path")
.data([null])
.join("path")
.attr("fill", "rgb(255,255,255)")
.style('fill-opacity','0.75')
.attr("stroke", "rgb(175,175,0)");
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.
