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], looser);//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")
//lines from rhino
polyline(seaExtended,'rgb(236,247,254)','100','0.9','rgb(246,244,254)')
//static lines from qgis
//staticLines(path3, subways.features,"none",1,.5,"rgb(180,180,180)")
staticLines(path5, sea.features,"rgb(236,244,254)",'1','0.2',"rgb(245,246,251)")
staticLines(path5, borough.features,"rgb(230,230,228)",'1','0.2',"rgb(200,200,200)")
staticLines(path5, parks1.features,"rgb(200,215,200)",'1','.1',"rgb(185,200,185)")
staticLines(path5, residential.features,"rgb(250,250,220)",'0.2','1',"rgb(247,247,217)")
staticLines(path5, streetCenterline.features,"none",'1','0.2',"rgb(170,170,170)")
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(wifiHotspot.features,'2','rgb(253,236,1)','1',"0")
staticCircles(linkStations.features,'2','rgb(85,65,125)','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(body,'none','1','0.65','rgb(191,63,63)')
polyline(pivot,'none','1','0.55','rgb(155,181,155)')
polyline(camera,'none','1','0.55','rgb(89,166,254)')
polyline(f,'rgb(177,62,66)','1','1','rgb(215,66,72)')
polyline(l,'rgb(177,62,66)','1','1','rgb(215,66,72)')
polyline(y,'rgb(186,93,81)','1','1','rgb(215,66,72)')
polyline(untitled,'rgb(196,156,155)','1','1','rgb(215,66,72)')
polyline(gCarryingDrone,'none','1','1','rgb(196,156,155)')
polyline(drone,'none','100','0.5','rgb(196,156,155)')
polyline(wifidrone,'none','100','2','rgb(245,236,15)')
polyline(dronelink,'none','100','2','rgb(185,25,25)')
polyline(dronelink1,'none','100','0.9','rgb(185,25,25)')
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)
}
p.enter().append("polyline")
.data(Newbar) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", martini) //The d attribute defines a path to be drawn, only applies to appended elements
.attr('transform', function(d) {
var coordinates = projection([d.Longitude, d.Latitude]);
return 'translate(' + (coordinates[0] - 10) + ',' + (coordinates[1] + 10) + ')';
})
.style("fill", 'rgb(71,80,216)')
.style("stroke-width", '1')
.style("stroke", 'rgb(85,65,125)')
.on("mouseover", addText)
.on("mouseout", removeText)
p.enter().append("polyline")
.data(wifipoints) //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", 'white')
.style("opacity", '0.5')
.style("stroke-width", '1')
.style("stroke", 'white')
.on("mouseover", addwifistream)
.on("mouseout", removewifistream)
function addwifistream(event, d) {
p.enter().append("polyline")
.data(wifistream) //get data to define path
.enter()
.append('polyline')
.attr('class', 'wifistream')
.attr('points', function(d){return d}) // The d attribute defines a path to be drawn, only applies to appended elements
.style('stroke-width', '0.2')
.style('stroke', 'rgb(186,93,81)')
.style('fill', 'rgb(215,66,72)')
.style('opacity', '0.5')
}
function removewifistream(event, d) {
svg.selectAll('.wifistream').remove(); // Correctly select and remove elements with class 'wifistream'
}
p.enter().append("polyline")
.data(dronepath) //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", 'no')
.style("stroke-width", '1')
.style('stroke.dasharray','5 5')
.style("stroke", 'white')
.on("mouseover", addfire)
.on("mouseout", removefire)
function addfire(event, d) {
p.enter().append("polyline")
.data(fire) //get data to define path
.enter()
.append('polyline')
.attr('class', 'fire')
.attr('points', function(d){return d}) // The d attribute defines a path to be drawn, only applies to appended elements
.style('stroke-width', '0.2')
.style('stroke', 'rgb(186,93,81)')
.style('fill', 'rgb(215,66,72)')
.style('opacity', '0.5')
}
function removefire(event, d) {
svg.selectAll('.fire').remove(); // Correctly select and remove elements with class 'wifistream'
}
//points from spreadsheet
c.enter().append('circle')
.data(Newbar) //get data to define path
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr('class','spots')
.attr('cx',function(d) {return projection([d.Longitude,d.Latitude])[0]-5})
.attr("cy",function(d) {return projection([d.Longitude,d.Latitude])[1]+5})
.attr('r', 1)
.attr('fill', 'yellow')
.style('fill-opacity','1')
.style("stroke-width", "0.5")
.style("stroke", "black")
.on("mouseover", addText)
.on("mouseout", removeText)
function addText(event,d) {
svg//draw text
.append("text") //appends path to data
.attr('class','BText')
.attr('x',projection([d.Longitude,d.Latitude])[0])
.attr("y",projection([d.Longitude,d.Latitude])[1])
.attr('fill', 'rgb(177,62,66)')
.style('font-family','helvetica')
.style("font-size", "15px")
.text(d.Name)
svg//draw text
.append("text") //appends path to data
.attr('class','BText')
.attr('x',50)
.attr("y",375)
.attr('fill', 'rgb(186,93,81)')
.style('font-family','impact')
.style("font-size", "25px")
.text(d.Description)
}
function removeText() {
svg.selectAll('text,BText').remove()
}
return svg.node();
}
dronepath1 = FileAttachment("dronepath@1.txt").text()
fire = FileAttachment("fire.txt").text()
wifipoints = FileAttachment("WIFIPOINTS@2.txt").tsv({array:true})
dronepath = FileAttachment("dronepath.txt").tsv({array:true})
NewbarL = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRuUyBX3DpRF4T8NT6ZOgi67GMU2IH64oSpkGRj5IfkpEVKMN696SCslOjkXtXYNeMzprBTJOmZsrKn/pub?output=csv'
Newbar = d3.csv(NewbarL,d3.autoType)
seaExtended = FileAttachment("Sea Extended.txt").tsv({array:true})
dronelink1 = FileAttachment("DroneLink1.txt").tsv({array:true})
wifidrone = FileAttachment("WifiDrone.txt").tsv({array:true})
dronelink = FileAttachment("DroneLink.txt").tsv({array:true})
drone = FileAttachment("Drone Route@1.txt").tsv({array:true})
f = FileAttachment("f.txt").tsv({array:true})
l = FileAttachment("L.txt").tsv({array:true})
y = FileAttachment("Y.txt").tsv({array:true})
untitled = FileAttachment("5.txt").tsv({array:true})
gCarryingDrone = FileAttachment("g carrying drone.txt").tsv({array:true})
body = FileAttachment("Body@3.txt").tsv({array:true})
camera = FileAttachment("Camera@3.txt").tsv({array:true})
pivot = FileAttachment("Pivot@3.txt").tsv({array:true})
linkStations = FileAttachment("LINK Stations.geojson").json()
wifiHotspot = FileAttachment("Wifi Hotspot.geojson").json()
parks1 = FileAttachment("Parks.geojson").json()
residential = FileAttachment("Residential.geojson").json()
streetCenterline = FileAttachment("Street Centerline.geojson").json()
borough = FileAttachment("Borough .geojson").json()
sea = FileAttachment("Sea.geojson").json()
looser = FileAttachment("looser.geojson").json()
spotsLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRwB-ukffxTe8cd2j54Lg_PGvR-3Dm6A6TZNS9AV1TRz5iNL3shNkXsyJLlXTGzcI4UCkyh9MJS9P0G/pub?output=csv'
spots = d3.csv(spotsLink,d3.autoType)
martini = FileAttachment("martini glass@2.txt").tsv({array:true})
wifistream = FileAttachment("wifistream@5.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.
