chart = {
const width = 900,//pixel size of the map
height = 900;
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], bbox41);//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 path6 = d3.geoPath().projection(projection);
var path7 = d3.geoPath().projection(projection);
var path8 = d3.geoPath().projection(projection);
var path9 = 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")
//lines from rhino
polyline(river,'rgb(212, 238, 248)','1','3','none')
//polyline(droneRoute01,'none','1','.8','rgb(56, 132, 255)')
polyline(slowStreet,'none','1','1','rgb(255, 94, 94)')
polyline(signalOutline2,'rgb(192,192,192)','1','2')
polyline(signalLight13,'rgb(255, 102,102)','1','.8','white')
polyline(signalLight22,'rgb(255,212,92)','1','.8','white')
polyline(signalLight33,'rgb(200,225,200)','1','.8','white')
polyline(slowIcon1,'rgb(255,178,102)','.9','2','white')
polyline(droneOutline,'white','.9','1','black')
polyline(droneInnerline,'none','.9','.3','black')
polyline(senoirFinal,'rgb(255,212,92)','1','1.1','white')
polyline(dashed,'rgb(255,212,92)','1','1.1','grey')
//static lines from qgis
//staticLines(path3, subways.features,"none",1,.5,"rgb(180,180,180)")
staticLines(path2, park.features,"rgb(200,225,200)",'.25','.1','.2',"rgb(0,255,0)")
//staticLines(path5, hump.features,"none",'1','.5',"black")
staticLines(path, building.features,"rgb(228,228,228)",'.25','.1',"rgb(228,228,228)")
staticLines(path7, manhattan.features,"none",'1','1.5',"rgb(0,0,0)")
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)
}
//static points from qgis
function polyline(data, sfill, sOpac, sW, stroke){
g.enter()
.append("polyline")
.data(data) //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", sfill)
.style('stroke-opacity',sOpac)
.style("stroke-width", sW)
.style("stroke", stroke)
}
function staticCircles(data,r,sfill, sOpac, sWidth){
c.enter()
.append('circle')
.data(data) //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', r)
.attr('fill', sfill)
.style('fill-opacity',sOpac)
.style("stroke-width", sWidth)
}
p.enter()
.append("polyline")
.data(signalLight22) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", function(d){return d})
.style("fill", 'rgb(255,212,92)')
.style("stroke-width", '.8')
.style("stroke", 'white')
.on("mouseover", addcircle2)
.on("mouseout", removecircle2)
function addcircle2(event,d){
c.enter()
.append("circle")
.data(crosswalk.features) //get data to define path
.enter()
.append('circle')
.attr('class','signalLight22')
.attr('cx',function(d) {return path.centroid(d)[0]})
.attr("cy",function(d) {return path.centroid(d)[1]})
.attr('r', 3)
.attr('fill', 'white')
.style("stroke-width", ".8")
.style("stroke", "black")
p.enter()
.append("polyline")
.data(signalLight22) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", function(d){return d})
.style("fill", 'rgb(255,128,0)')
.style("stroke-width", '1')
.style("stroke", 'white')
.on("mouseover", addcircle2)
.on("mouseout", removecircle2)
}
function removecircle2(event, d) {
svg.selectAll('circle.signalLight22').remove();
}
/// slow icon
p.enter().append("polyline")
.data(slowIcon1) //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
//.attr('transform',function(d) {return 'translate('+path.centroid(d)[0]+','+path.centroid(d)[1]+')'})
.style("fill", 'rgb(255,128,0)')
.style("stroke-width", '1')
.style("stroke", 'white')
.on("mouseover", addslowZone)
.on("mouseout", removeSlowZone)
function addslowZone(event,d){
p.enter().append("polyline")
.data(slowZone) //get data to define path
.enter()
.append('polyline')
.attr('class','slowIcon')
.attr("points", function(d) {return d})
.style("fill", 'rgb(255,128,0)')
.style('fill-opacity','.3')
.style("stroke-width", '3')
.style("stroke", 'white')
p.enter().append("polyline")
.data(slowIcon1) //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
//.attr('transform',function(d) {return 'translate('+path.centroid(d)[0]+','+path.centroid(d)[1]+')'})
.style("fill", 'rgb(255,128,0)')
.style("stroke-width", '1')
.style("stroke", 'white')
.on("mouseover", addslowZone)
.on("mouseout", removeSlowZone)
}
function removeSlowZone(event,d){
svg.selectAll('polyline.slowIcon').remove()
svg.selectAll('text.mText').remove()
}
/// drone
p.enter().append("polyline")
.data(route2) //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
//.attr('transform',function(d) {return 'translate('+path.centroid(d)[0]+','+path.centroid(d)[1]+')'})
.style("stroke-width", '1')
.style("fill", 'rgb(56, 132, 255)')
.style("stroke", 'white')
.on("mouseover", adddroneroute)
.on("mouseout", removedroneroute)
function adddroneroute(event,d){
p.enter().append("polyline")
.data(droneRoute01) //get data to define path
.enter()
.append('polyline')
.attr('class','route2')
.attr("points", function(d) {return d})
.style("stroke-width", '.8')
.style("stroke", 'rgb(56, 132, 255)')
.style("fill", 'none')
p.enter().append("polyline")
.data(route2) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", function(d){return d})
.style("fill", 'rgb(56, 132, 255)')
.style("stroke-width", '1')
.style("stroke", 'white')
.on("mouseover", adddroneroute)
.on("mouseout", removedroneroute)
}
function removedroneroute(event,d){
svg.selectAll('polyline.route2').remove()
}
/// senior icon
p.enter().append("polyline")
.data(senoirFinal) //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
//.attr('transform',function(d) {return 'translate('+path.centroid(d)[0]+','+path.centroid(d)[1]+')'})
.style("fill", 'rgb(255,212,92)')
.style("stroke-width", '1')
.style("stroke", 'white')
.on("mouseover", addseniorzonefinal)
.on("mouseout", removeseniorzonefinal)
function addseniorzonefinal(event,d){
p.enter().append("polyline")
.data(seniorZoneFinal) //get data to define path
.enter()
.append('polyline')
.attr('class','senoirfinal')
.attr("points", function(d) {return d})
.style("fill", 'rgb(255,212,92)')
.style('fill-opacity','.3')
.style("stroke-width", '3')
.style("stroke", 'white')
p.enter().append("polyline")
.data(senoirFinal) //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
//.attr('transform',function(d) {return 'translate('+path.centroid(d)[0]+','+path.centroid(d)[1]+')'})
.style("fill", 'rgb(255,212,92)')
.style("stroke-width", '1')
.style("stroke", 'white')
.on("mouseover", addseniorzonefinal)
.on("mouseout", removeseniorzonefinal)
}
function removeseniorzonefinal(event,d){
svg.selectAll('polyline.senoirfinal').remove()
svg.selectAll('text.mText').remove()
}
return svg.node();
}
route2 = FileAttachment("route2.txt").tsv({array:true})
dashed = FileAttachment("dashed.txt").tsv({array:true})
dashLine = FileAttachment("dash line.txt").tsv({array:true})
route = FileAttachment("route.txt").tsv({array:true})
senior = FileAttachment("senior.txt").tsv({array:true})
kids = FileAttachment("kids.txt").tsv({array:true})
signalMini = FileAttachment("signal mini.txt").tsv({array:true})
crosswalk = FileAttachment("crosswalk.geojson").json()
pointData = FileAttachment("point data.geojson").json()
seniorZoneFinal = FileAttachment("senior zone final.txt").tsv({array:true})
senoirFinal = FileAttachment("senoir final.txt").tsv({array:true})
slowIcon1 = FileAttachment("slow icon.txt").tsv({array:true})
seniorIcon = FileAttachment("senior icon.txt").tsv({array:true})
slowText = FileAttachment("slow text.txt").tsv({array:true})
museumlink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTr1k-h5ZFcvdxIuNH2iW71oTu18qIBz8ZRojBJVsPhr25O_IYhkTE-X1UeFkXypQkHf1L_B3RMCvWA/pub?output=csv'
museums = d3.csv(museumlink,d3.autoType)
finalpoint = FileAttachment("finalpoint.geojson").json()
points = FileAttachment("points.geojson").json()
signalIcon4 = FileAttachment("signal icon4.txt").tsv({array:true})
signalIcon3 = FileAttachment("signal icon3.txt").tsv({array:true})
signalIcon2 = FileAttachment("signal icon2.txt").tsv({array:true})
trafficeSignal = FileAttachment("traffice signal@1.txt").tsv({array:true})
signalLight2 = FileAttachment("signal icon2@1.txt").tsv({array:true})
signalIcon = FileAttachment("signal icon.txt").tsv({array:true})
slowStreet = FileAttachment("Slow street.txt").tsv({array:true})
droneRoute01 = FileAttachment("drone route 01.txt").tsv({array:true})
slowZone = FileAttachment("slow zone.txt").tsv({array:true})
signalLight13 = FileAttachment("signal light1@3.txt").tsv({array:true})
signalLight22 = FileAttachment("signal light2@2.txt").tsv({array:true})
signalLight33 = FileAttachment("signal light3@3.txt").tsv({array:true})
signalOutline2 = FileAttachment("signal outline 2.txt").tsv({array:true})
river = FileAttachment("river.txt").tsv({array:true})
manhattan = FileAttachment("manhattan.geojson").json()
signal = FileAttachment("signal.txt").tsv({array:true})
boundary2 = FileAttachment("boundary@3.geojson").json()
parklink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTr1k-h5ZFcvdxIuNH2iW71oTu18qIBz8ZRojBJVsPhr25O_IYhkTE-X1UeFkXypQkHf1L_B3RMCvWA/pub?output=csv'
parks = d3.csv(parklink,d3.autoType)
road2 = FileAttachment("road2.geojson").json()
hump = FileAttachment("hump.geojson").json()
building = FileAttachment("building.geojson").json()
park = FileAttachment("park.geojson").json()
sfepeed = FileAttachment("speed.geojson").json()
subway = FileAttachment("subway.geojson").json()
spotsLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRwB-ukffxTe8cd2j54Lg_PGvR-3Dm6A6TZNS9AV1TRz5iNL3shNkXsyJLlXTGzcI4UCkyh9MJS9P0G/pub?output=csv'
spots = d3.csv(spotsLink,d3.autoType)
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
bbox41 = FileAttachment("bbox4@1.geojson").json()
droneInnerline = FileAttachment("drone innerline.txt").tsv({array:true})
droneOutline = FileAttachment("drone outline.txt").tsv({array:true})
signalIcon5 = FileAttachment("signal icon5.txt").tsv({array:true})
vzv_leadingPedestrianIntervalSignals = FileAttachment("VZV_Leading Pedestrian Interval Signals.geojson").json()
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.
