Public
Edited
Jul 22, 2024
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], boundingBox);
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 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")//for texts in google sheets
var l = svg.selectAll("line")
//static lines from qgis
staticLines(path6, cityCouncilDistrict.features,"rgb(250,249,238)",'.25','.1',"rgb(0,255,0)")
staticLines(path3, subways.features,"none",1,.85,"rgb(124,83,23)")
staticLines(path4, parks.features,"rgb(200,225,200)",'.25','.1',"rgb(0,255,0)")
staticLines(path5, nycStreetCenterLines.features,"none",1,.25,"rgb(100,100,100)")
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
staticCircles(stationlarge.features,'25',"rgb(124,83,23)",'.2',"0")
staticCircles(restrooms.features,'2',"rgb(10,88,117)",'1',"0")
//staticCircles(subwayStation.features,'4',"rgb(124,83,23)",'1',"0")
staticCircles(greenFacilities.features,'3',"rgb(70,91,74)",'1',"0")
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)
}
//lines from rhino
//polyline(graphic_test,'red','1','0','none')
polyline(greenroute,'none','0.3','0.75',"rgb(23,80,2)")
//polyline(iconnew,"rgb(25,124,55)",'1','0','none')
//polyline(zone01,"rgb(25,124,55)",'1','0','none')
polyline(title,"rgb(78,124,61)",'1','0','none')
polyline(droneaxonnew,'none','.2','0.75',"rgb(78,124,61)")
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)
}
//Display Lattitude of Parks
t.enter().append('text')
.data(parc) //get data to define path
.enter() //there are more data than elements, this selects them
.append("text") //appends path to data
.attr('class','parc')
.attr('x',60)
.attr("y",function(d,i){return 100 +(i*15)})
.attr('fill', 'black')
.style('font-family','helvetica')
.style("font-size", "7px")
.style("text-anchor", "end")
.text(function(d){return d.Lat})
//.on("mouseover",parkText)
//.on("mouseout",removeMusText)
//Display Longittude of Parks
t.enter().append('text')
.data(parc) //get data to define path
.enter() //there are more data than elements, this selects them
.append("text") //appends path to data
.attr('class','parc')
.attr('x',120)
.attr("y",function(d,i){return 100 +(i*15)})
.attr('fill', 'black')
.style('font-family','helvetica')
.style("font-size", "7px")
.style("text-anchor", "end")
.text(function(d){return d.Long})
//.on("mouseover",musText)
//.on("mouseout",removeMusText)
//ANNOTATION LINES
l.enter().append('line')
.data(Publicparks) //get data to define path
.enter() //there are more data than elements, this selects them
.append("line") //appends path to data
.attr('class','parc')
.attr('x1',120)
.attr("y1",function(d,i){return 100 +(i*15)})
.attr('x2',function(d) {return projection([d.Long,d.Lat])[0]})
.attr("y2",function(d,i){return 100 +(i*15)})
.attr('stroke', 'black')
.attr('stroke-width', '.25')
.style('stroke-dasharray', '3 2')
l.enter().append('line')
.data(Publicparks) //get data to define path
.enter() //there are more data than elements, this selects them
.append("line") //appends path to data
.attr('class','parc')
.attr('x1',function(d) {return projection([d.Long,d.Lat])[0]})
.attr("y1",function(d,i){return 100 +(i*15)})
.attr('x2',function(d) {return projection([d.Long,d.Lat])[0]})
.attr("y2",function(d) {return projection([d.Long,d.Lat])[1]})
.attr('stroke', 'black')
.attr('stroke-width', '.25')
.style('stroke-dasharray', '3 2')
//Icons on different locations(public parks)
p.enter().append("polyline")
.data(Publicparks) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", iconnew) //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", "rgb(255,225,21)")
.style("stroke-width",'.25')
.style("stroke", 'black')
.on("mouseover",addText)
.on("mouseout",removeText )
//Icons on qgis MTA station
p.enter().append("polyline")
.data(subwayStation.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", mmm) //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(124,83,23)")
.style("stroke-width",'none')
.style("stroke", 'none')
//Rectangle area to pop up and hide drawings
p.enter().append("polyline")
.data(zone01) //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", 'white')
.style('fill-opacity','0')
.style("stroke-width",'1.2')
.style("stroke", "rgb(17,81,118)")
.style('stroke-dasharray','2 2')
.on("mouseover",addDrawing)
.on("mouseout",removeDrawing )
function addDrawing(event,d) {
p.enter().append("polyline")
.data(routes01) //get data to define path
.enter()
.append('polyline')
.attr ('class','routes')
.attr("points", function(d) {return d})
.style("fill", 'none')
//.style('fill-opacity','0')
.style("stroke-width",'.5')
.style("stroke", "rgb(17,81,118)")
//.style('stroke-dasharray','2 2')
p.enter().append("polyline")
.data(blocks2) //get data to define path
.enter()
.append('polyline')
.attr ('class','routes')
.attr("points", function(d) {return d})
.style("fill", 'none')
//.style('fill-opacity','0')
.style("stroke-width",'.2')
.style("stroke", 'black')
//.style('stroke-dasharray','2 2')
}
function removeDrawing(event,d) {
svg.selectAll('polyline.routes').remove()
}
function name(params) {
}
/*
//points from spreadsheet
c.enter().append('circle')
.data(Publicparks) //get data to define path
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr('class','Publicparks')
.attr('cx',function(d) {return projection([d.Long,d.Lat])[0]})
.attr("cy",function(d) {return projection([d.Long,d.Lat])[1]})
.attr('r', 6)
.attr('fill', "rgb(255,225,21)")
.style('fill-opacity','1')
.style("stroke-width", ".25")
.style("stroke", "black")
.on("mouseover",addText)
.on("mouseout",removeText )
*/
function addText(event,d) {
svg //draw Park Name
.append("text")
.attr('class','tPublicparks')
.attr('x',projection([d.Long,d.Lat])[0]-20)
.attr("y",projection([d.Long,d.Lat])[1]+20)
.attr('fill', 'black')
.style('font-family','sans-serif')
.style("font-size", "12px")
.style("stroke", "black")
.text(d.Name)
svg //draw Park Description
.append("text")
.attr('class','tPublicparks')
.attr('x',20)
.attr("y",850)
.attr('fill', 'black')
.style('font-family','sans-serif')
.style("font-size", "8px")
.text(d.Description)
var wrap = svg.selectAll("text.tPublicparks")
.each(function(d, i) { wrap_text(d3.select(this), 150) });
}
function removeText(){
//svg.selectAll('text,').remove()
svg.selectAll('text','tPublicparks').remove()
}
return svg.node();
}
mmm = FileAttachment("MMM.txt").tsv({array:true})
droneaxonnew = FileAttachment("droneaxonnew.txt").tsv({array:true})
title = FileAttachment("TITLE.txt").tsv({array:true})
blocks2 = FileAttachment("Blocks@2.txt").tsv({array:true})
routes01 = FileAttachment("routes01.txt").tsv({array:true})
zone01 = FileAttachment("zone01.txt").tsv({array:true})
iconnew = FileAttachment("iconnew.txt").tsv({array:true})
greenFacilities = FileAttachment("Green Facilities.geojson").json()
boundingBox = FileAttachment("Bounding Box.geojson").json()
subwayStation = FileAttachment("subway station.geojson").json()
cityCouncilDistrict = FileAttachment("City Council District.geojson").json()
nycStreetCenterLines = FileAttachment("NYC street center lines.geojson").json()
graphic_test = FileAttachment("graphic_test.txt").tsv({array:true})
bbox1 = FileAttachment("bbox@1.geojson").json()
restrooms = FileAttachment("restrooms.geojson").json()
subways = FileAttachment("subways.geojson").json()
parks = FileAttachment("parks.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"
stationlarge = FileAttachment("stationlarge.geojson").json()
greenroute = FileAttachment("GREENROUTE.txt").tsv({array:true})
ParkLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSE2UhehgHm96MkzTHnwhacdwUvZuTMW6TZY2bYGz9m3C26JLTXpyvkqDLpleXjAyh1HQLvGItc99aH/pub?output=csv'
Publicparks = d3.csv(ParkLink,d3.autoType)
PARCLOCATION = "https://docs.google.com/spreadsheets/d/e/2PACX-1vThNwu2IuFZNclW-Kp-zcFyF7-8DixpLt7PFlJ_pvm9Cc19wOsfN7r1GVtDrUmmA8e5i21v1kAWjvEu/pub?output=csv"
parc = d3.csv(PARCLOCATION,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.
