Hudson Yards
chart = {
const width = 1800,
height = 1100;
const svg = d3.create("svg")
.attr("viewBox", [50, 50, width-100, height-100]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], boundaires);
var path1 = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var path3 = d3.geoPath().projection(projection);
var path4 = d3.geoPath().projection(projection);
var path5 = d3.geoPath().projection(projection);
var path6 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
g.selectAll("path2") //d3 geopath
.data(roads.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", path2) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('stroke-opacity','0.5')
.style("stroke-width", '.6')
.style("stroke", "rgb(0,0,0)")
g.selectAll("path3") //d3 geopath
.data(buildings.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", path3) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "rgb(143,0,255)")
.style("fill-opacity", ".05")
.style('stroke-opacity','.4')
.style("stroke-width", '.5')
.style("stroke", "rgb(143,0,255)")
g.selectAll("path4") //d3 geopath
.data(parking.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", path4) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "rgb(100,0,255)")
.style("fill-opacity", ".2")
.style('stroke-opacity','.4')
.style("stroke-width", '.5')
.style("stroke", "rgb(180,0,255)")
.on('mouseover', addFill)
.on('mouseleave', removeFill)
var c = svg.selectAll("circle") //d3 geopath
.data(subwayStation.features)
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr("cx", function(d) {return path1.centroid(d)[0]})
.attr("cy", function(d) {return path1.centroid(d)[1]})
.attr('r',3)
.attr('fill','black')
g.selectAll("path2") //d3 geopath
.data(subwayLine.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", path2) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('stroke-opacity','1')
.style("stroke-width", '1.5')
.style("stroke", "rgb(0,0,140)")
g.selectAll("path2") //d3 geopath
.data(lines4.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", path2) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('stroke-opacity','1')
.style("stroke-width", '.2')
.style("stroke", "rgb(100,100,100)")
.on('mouseover',lineMouse)
.on('mouseout',lineMouseOut)
function lineMouse(event,d){
d3.select(this).style("stroke-width", '1.5')
//.attr('stroke-dasharray',"3 0")
}
function lineMouseOut(event,d){
d3.select(this).style("stroke-width", '0.2')
//.attr('stroke-dasharray',"3 3")
}
//.style("fill","rgb(40,40,30)")
//add park labels and park fill
function addFill(event,d) {
d3.select(this).style("fill", "rgb(255,0,180)")
d3.select(this).style('fill-opacity','.8')
svg
.append('text')
.attr("class","labels")
.attr('x','600')
.attr('y','600')
.attr('font-size','1em')
.text(d.description)
}
//take away park labels/park fill
function removeFill(event,d) {
d3.selectAll("text.labels").remove()
d3.select(this).style("fill", "rgb(100,0,255)")
d3.select(this).style('fill-opacity','.25')
}
var c = svg.selectAll("circle")
.data(drinkingFountain.features)
.enter()
.append("circle")
.attr("cx",function(d) {return path1.centroid(d)[0]})
.attr("cy",function(d) {return path1.centroid(d)[0]})
.attr('r',5)
.attr('fill','rgb(200,200,0)')
.style('fill-opacity',"2")
svg
.append("text")
.attr('class','title')
.attr('x','850')
.attr('y','610')
.attr('font-family','helvetica')
.attr('font-size','1em')
.attr('font-weight','bold')
.style("fill", "rgb(0,0,0)")
.text('Hudson Yards')
svg
.append("text")
.attr('class','title')
.attr('x','50')
.attr('y','100')
.attr('font-family','helvetica')
.attr('font-size','1.4em')
.attr('font-weight','bold')
.style("fill", "rgb(0,0,0)")
.text('Finding The Area of Safe Parking Lot')
svg
.append("text")
.attr('class','title')
.attr('x','287')
.attr('y','500')
.attr('font-family','helvetica')
.attr('font-size','1.4em')
.attr('font-weight','bold')
.style("fill", "rgb(200,200,200)")
.text('Hudson River')
svg
.append("text")
.attr('class','title')
.attr('x','850')
.attr('y','630')
.attr('font-family','helvetica')
.attr('font-size','.7em')
.attr('font-weight','200')
.style("fill", "rgb(0,0,0)")
.text('Live, Shop, Work and Dine in NYC')
svg
.append("text")
.attr('class','title')
.attr('x','850')
.attr('y','470')
.attr('font-family','helvetica')
.attr('font-size','.7em')
.attr('font-weight','200')
.style("fill", "rgb(0,0,0)")
.text('34 Street-Hudson Yards Subway Station - Line 7')
svg
.append("circle")
.attr('cx','720')
.attr('cy','480')
.attr('r',150)
.attr('stroke-width','.8')
.attr('stroke','rgb(0,0,0)')
.style("fill","rgb(143,0,255)")
.style('fill-opacity',".02")
.attr('stroke-dasharray','4,4')
svg
.append("circle")
.attr('cx','150')
.attr('cy','1000')
.attr('r',5)
.attr('stroke-width','.01')
.attr('stroke','rgb(0,0,0)')
.style("fill","rgb(200,200,0)")
.style('fill-opacity',"1")
svg
.append("text")
.attr('class','title')
.attr('x','165')
.attr('y','1005')
.attr('font-family','helvetica')
.attr('font-size','.7em')
.attr('font-weight','200')
.style("fill", "rgb(0,0,0)")
.text('Drinking Fountains')
svg.selectAll('text')
.data(area)
.enter()
.append('text')
.attr('x','1725')
.attr('y',function(d,i){return i*20.2-50})
.attr('font-size','.52em')
.attr('font-family','helvetica')
.attr('text-anchor','end')
.text(function(d){return d.description})
return svg.node();
}
boundaires = FileAttachment("Boundaires3.geojson").json()
buildings = FileAttachment("Buildings3.geojson").json()
drinkingFountain = FileAttachment("Drinking Fountain.geojson").json()
parking = FileAttachment("Parking.geojson").json()
roads = FileAttachment("Roads.geojson").json()
subwayLine = FileAttachment("Subway Line.geojson").json()
subwayStation = FileAttachment("Subway Station.geojson").json()
lines4 = FileAttachment("Default.geojson").json()
arealink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQlpedSRKaogu34r-gTg_2LV8mnpvg2k4JHgLuwmd3CMursniOLaxVHNSwTvo4oVM2-18zkn-vCf6RB/pub?gid=0&single=true&output=csv'
area = d3.csv(arealink, d3.autoType)
subwaylink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQPbOUklzbmTnopH9A1_t-74gd_FNmyGNDL_tgxQIyW_VH_Blsp7RIfM5Zb2_adIJwsWNgnbXVkrVmc/pub?gid=0&single=true&output=csv'
subway = d3.csv(subwaylink, d3.autoType)
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.
