Public
Edited
Sep 25, 2024
NYC Architecture Map
chart = {
const width = 900,//pixel size of the map
height = 1150;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width-50, height-10]);
// Use Mercator projection
var projection = d3
.geoMercator()//projection system used
.fitSize([width, height], box);//out bounding box is here
var path = d3.geoPath().projection(projection);//need one of these for each line layer from qgis
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 g = svg.selectAll('g').attr("id", "paths");//qgis lines variable //one variable for each geometry type
var c = svg.selectAll("circle")//for circles
var p = svg.selectAll("polyline")//for polylines from rhino
var t = svg.selectAll("text")
var l = svg.selectAll("line")
var i = svg.selectAll("image")
//static lines from qgis
//staticLines(path3, subways.features,"none",1,.5,"rgb(180,180,180)")
staticLines(path5, boundary.features,"rgb(245,245,245)",0.3,.5,"none")
staticLines(path2, parkZone1.features,"rgb(200,225,200)",'.25','.1',"rgb(0,255,0)")
staticLines(path3, road1.features,"none",1,.5,"rgb(253,191,111)")
staticLines(path4, waterbody.features,"rgb(120,234,226)",'1','.1',"none")
function staticLines(path, data, sfill, sOpac, sW, stroke){
g.enter().append("path")
.data(data) //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", sfill)
.style('stroke-opacity',sOpac)
.style("stroke-width", sW)
.style("stroke", stroke)
}
//lines from rhino
polyline(girlBag,'black','1','3','none','angles')
polyline(girlCamera,'black','1','3','none','angles')
polyline(girlHair,'rgb(116,101,74)','1','3','none','angles')
polyline(girlSkirt,'rgb(228,99,174)','0.3','none','none','angles')
polyline(girlLine,'none','1','1','black','angles')
polyline(heart,'red','1','2','none','angles')
polyline(newyorkOut,'blue','1','1','black','angles')
polyline(newyorkInside,'white','1','1','black','angles')
//polyline(newyorkOut,'blue','1','1','black','angles')
function polyline(data, sfill, sOpac, sW, stroke,classVar){
g.enter().append("polyline")
.data(data) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr('class',classVar)
.attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", sfill)
.style('stroke-opacity',sOpac)
.style("stroke-width", sW)
.style("stroke", stroke)
}
//heart action
p.enter().append("polyline")
.data(heart) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr('points',function(d){return d})//The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", 'red')
.style("stroke-width", '0.2')
.style("stroke", 'black')
.on("mouseover",addhText,)
.on("mouseout",removehText)
function addhText(event,d){
svg
.append("text")//appends path to data
.attr('class','hText')
.attr('x',20)
.attr("y",250)
.attr('fill', 'black')
.attr('font-family','Alegreya')
.style("font-size","30px")
.text("Welcome to New York(>^<)~~!")
svg
.append('polyline')
.attr('class','boat')
.attr('points',boatline)//The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", 'white')
.style("stroke-width", '0.5')
.style("stroke", 'black')
}
function removehText(){
svg.selectAll('text.hText').remove()
svg.selectAll('polyline.boat').remove()
}
//camera flash
p.enter().append("polyline")
.data(girlLine) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr('points',function(d){return d})//The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", 'none')
.style("stroke-width", '0.2')
.style("stroke", 'black')
.on("mouseover",addFlash,)
.on("mouseout",removeFlasht)
function addFlash(event,d){
svg
.append('polyline')
.attr('class','Flash')
.attr('points',flash)//The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", 'white')
.style("stroke-width", '0.5')
.style("stroke", 'white')
svg
.append("text")//appends path to data
.attr('class','CText')
.attr('x',50)
.attr("y",800)
.attr('fill', 'black')
.attr('font-family','helvetica')
.style("font-size","15px")
.text('Click！')
}
function removeFlasht(){
svg.selectAll('polyline.Flash').remove()
svg.selectAll('text.CText').remove()
}
//drew icons at spreadsheet Location
p.enter().append("polyline")
.data(architecture) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr('points',feet)//The d attribute defines a path to be drawn, only applies to appended elements
.attr("transform", function(d){return 'translate('+projection([d.Long,d.Lat])[0]+','+projection([d.Long,d.Lat])[1]+')'})
.style("fill", 'orange')
.style("stroke-width", '0.5')
.style("stroke", 'black')
.on("mouseover",addText,)
.on("mouseout",removeText)
function addText(event,d){
svg
.append("text")//appends path to data
.attr('class','mText')
.attr('x',projection([d.Long,d.Lat])[0]+10)
.attr("y",projection([d.Long,d.Lat])[1])
.attr('fill', 'black')
.attr('font-family','helvetica')
.style("font-size","20px")
.text(d.name)
svg
.append("text")//appends path to data
.attr('class','mText')
.attr('x',10)
.attr("y",250)
.attr('fill', 'black')
.attr('font-family','helvetica')
.style("font-size","15px")
.text(d.architect)
svg
.append("text")//appends path to data
.attr('class','mText')
.attr('x',10)
.attr("y",270)
.attr('fill', 'black')
.attr('font-family','helvetica')
.style("font-size","15px")
.text(d.year)
svg
.append('image')
.attr('xlink:href',d.pics)
.attr('x', 10)
.attr('y', 290)
.attr('width', '180')
.text(d.pics)
svg
.append("text")//appends path to data
.attr('class','mText')
.attr('x',projection([d.Long,d.Lat])[0]+20)
.attr("y",projection([d.Long,d.Lat])[1]-20)
.attr('fill', 'blue')
.attr('font-family',"Laila")
.style("font-size","15px")
.text("I'm here!!!")
svg
.append('polyline')
.attr('class','bubble')
.attr('points',bubble)//The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", 'none')
.style("stroke-width", '0.5')
.style("stroke", 'black')
svg
.append("text")//appends path to data
.attr('class','bText')
.attr('x',10)
.attr("y",700)
.attr('fill', 'blue')
.attr('font-family','Laila')
.style("font-size","10px")
.text(d.introduction)
var wrap = svg.selectAll("text.bText")
.each(function(d, i) { wrap_text(d3.select(this), 10) });
}
function removeText(){
svg.selectAll('text.mText').remove()
svg.selectAll('image').remove()
svg.selectAll('text.bText').remove()
svg.selectAll('polyline.bubble').remove()
}
return svg.node();
}
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
architecture = d3.csv(building_points,d3.autoType)
building_points = 'https://docs.google.com/spreadsheets/d/1XKyxIuhn0f9J4PDYEDgXRgTY2LIVY9cCsRZqDHBMt7U/pub?output=csv'
box = FileAttachment("box.geojson").json()
parkZone1 = FileAttachment("park zone@1.geojson").json()
road1 = FileAttachment("road@2.geojson").json()
waterbody = FileAttachment("waterbody@2.geojson").json()
boundary = FileAttachment("boundary.geojson").json()
heart = FileAttachment("heart@1.txt").tsv({array:true})
newyorkOut = FileAttachment("newyork-out@1.txt").tsv({array:true})
girlLine = FileAttachment("girl-line@3.txt").tsv({array:true})
newyorkInside = FileAttachment("newyork-inside@1.txt").tsv({array:true})
girlBag = FileAttachment("girl-bag@2.txt").tsv({array:true})
girlCamera = FileAttachment("girl-camera@2.txt").tsv({array:true})
girlHair = FileAttachment("girl-hair@2.txt").tsv({array:true})
girlSkirt = FileAttachment("girl-skirt@2.txt").tsv({array:true})
newyork = FileAttachment("newyork.txt").tsv({array:true})
feet = FileAttachment("feet@5.txt").tsv({array:true})
bubble = FileAttachment("bubble.txt").tsv({array:true})
flash = FileAttachment("flash@1.txt").tsv({array:true})
boatline = FileAttachment("boatline@1.txt").tsv({array:true})
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.
