chart = {
const width = 1000,//pixel size of the map
height = 1000;
const svg = d3.create("svg")
.attr("viewBox", [25, 0, width-30, height]);
// Use Mercator projection
var projection = d3
.geoMercator()//projection system used
.fitSize([width, height], bbox8Qgis);
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")
//static lines from QGIS
staticLines(path6, community8.features,"rgb(250,250,250)",'1','1',"gray")
staticLines(path, park8.features,"rgb(204,204,204)",'.25','1',"white")
staticLines(path2, peddemand8.features,"none",'1','.5',"rgb(153,153,153)")
staticLines(path3, publicplazas8.features,"none",'1','1',"black")
staticLines(path4, openspacesOther8.features,"rgb(153,204,153)",'1','1',"rgb(51,102,51)")
staticLines(path5, railroad8.features,"none",'1','.1',"black")
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(network,'none','1','.25','rgb(0,102,153)')
polyline(vortex,'none','.1','3','rgb(255,159,42)')
//polyline(connectingroute,'none','1','1','rgb(204,102,102)')
function polyline(data, sfill, sOpac, sW, stroke){
p.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)
}
//static points from QGIS
//staticCircles(library8.features,'5','rgb(255,102,0)','5',"1")
staticCircles(pops8.features,'3','rgb(0,153,204)','5',"1")
//staticCircles(streetseats8.features,'4','red','5',"1")
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)
}
////////////////////////////-------PART 2-------
//// Display OTHER PARKS names from QGIS
t.enter().append('text')
.data(streetseats8.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("text") //appends path to data
.attr('class','sText')
.attr('x',function(d) {return path.centroid(d)[0]-10})
.attr("y",function(d) {return path.centroid(d)[1]+25})
.attr('fill', 'red')
.style('font-family','bahnschrift')
.style('text-anchor','start')
.style("font-size", "10px")
.text(function(d){return d.properties.ifo_busine})
t.enter().append('text')
.data(streetseats8.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("text") //appends path to data
.attr('class','sText')
.attr('x',function(d) {return path.centroid(d)[0]-10})
.attr("y",function(d) {return path.centroid(d)[1]+35})
.attr('fill', 'red')
.style('font-family','bahnschrift')
.style('text-anchor','start')
.style("font-size", "8px")
.text(function(d){return d.properties.location})
var wrap = svg.selectAll("text.sText")
.each(function(d, i) { wrap_text(d3.select(this), 150) })
//// Adding interactive POP ZONE
p.enter().append("polyline")
.data(zone9Pop) //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", '2')
.style("stroke", 'black')
.style('stroke-dasharray','5 5')
.on("mouseover",activatePOPzone)
.on("mouseout",removePOPzone)
function activatePOPzone(event,d){
svg
p.enter().append("polyline")
.data(textobj9Pop)
.enter()
.append('polyline')
.attr('class','popzone')
.attr("points", function(d) {return d})
.style("fill", 'none')
.style("stroke-width",'2')
.style("stroke", 'rgb(0,102,153)')
p.enter().append("polyline")
.data(network)
.enter()
.append('polyline')
.attr('class','popzone')
.attr("points", function (d){return d})
.style("fill",'none')
.style('stroke-opacity','1')
.style("stroke-width",'.25')
.style("stroke", 'rgb(0,102,153)')
}
function removePOPzone(event,d){
svg.selectAll('polyline.popzone').remove()
}
//// Adding ICON (starshape) from spreadsheet locations
//----draw STAR
/*
p.enter().append("polyline")
.data(library8.features) //get data to define path
.enter()
.append('polyline')
.attr("points", icon9Lib)
.attr('transform',function(d) {return 'translate('+path.centroid(d)[0]+','+path.centroid(d)[1]+')'})
.style("fill",'orange')
.style("stroke-width",'.5')
.style("stroke",'none')
//----draw invisble mouse-hover circle
c.enter().append('circle')
.data(library9)
.enter()
.append("circle")
.attr('cx','0')
.attr("cy",'0')
.attr('transform',function(d) {return 'translate('+projection([d.Long,d.Lat])[0]+','+projection([d.Long,d.Lat])[1]+')'})
.attr('r','15')
.attr('fill','white')
.style('fill-opacity','0')
.style("stroke-width",'none')
.on("mouseover",addText)
.on("mouseout",removeText)
*/
p.enter().append("polyline")
.data(library9)
.enter()
.append('polyline')
.attr("points", icon9Lib)
.attr('transform',function(d) {return 'translate('+projection([d.Long,d.Lat])[0]+','+projection([d.Long,d.Lat])[1]+')'})
.style("fill",'orange')
.style("stroke-width",'1')
.style("stroke",'orange')
.on("mouseover",addText)
.on("mouseout",removeText)
function addText(event,d){
d3.select(this).style('fill','brown')
//---Text at points
svg
.append("text")
.attr('class','lText')
.attr('x',projection([d.Long,d.Lat])[0]+20)
.attr("y",projection([d.Long,d.Lat])[1]+20)
.attr('fill','brown')
.style('font-family','bahnschrift')
.style("font-size", "15px") //https://developer.mozilla.org/en-US/docs/Web/CSS
.text(d.Name)
//---Text at fixed location
svg
.append("text")
.attr('class','lText')
.attr('x',30)
.attr("y",25)
.attr('fill', 'black')
.style('font-family','bahnschrift')
.style("font-size", "15px") //https://developer.mozilla.org/en-US/docs/Web/CSS
.text('Address: '+d.Address)
var wrap = svg.selectAll("text.lText")
.each(function(d, i) { wrap_text(d3.select(this), 100) })
}
//adding ICON (seat shape) from RHINO
p.enter().append("polyline")
.data(icon9Ss1)
.enter()
.append('polyline')
.attr('class','seat')
.attr("points", function(d) {return d})
.style("fill", 'red')
.style("stroke-width", '1')
.style("stroke", 'red')
.on("mouseover",activateRoute)
.on("mouseout",removeRoute)
function activateRoute(event,d){
svg
p.enter().append("polyline")
.data(connectingroute)
.enter()
.append('polyline')
.attr('class','seatflash')
.attr("points", function(d) {return d})
.style("fill", 'none')
.style("stroke-width",'2')
.style("stroke", 'rgb(204,102,102)')
p.enter().append("polyline")
.data(icon9Ss1)
.enter()
.append('polyline')
.attr('class','seatflash')
.attr("points", function(d) {return d})
.style("fill", 'white')
.style("stroke-width", '1.5')
.style("stroke", 'white')
p.enter().append("polyline")
.data(icon9Ss2)
.enter()
.append('polyline')
.attr('class','seatflash')
.attr("points", function(d) {return d})
.style("fill", 'red')
.style("stroke-width", '.2')
.style("stroke", 'white')
p.enter().append("polyline")
.data(textobj9Ss)
.enter()
.append('polyline')
.attr('class','seatflash')
.attr("points", function(d) {return d})
.style("fill", 'none')
.style("stroke-width",'.75')
.style("stroke", 'rgb(204,102,102)')
}
function removeRoute(event,d){
svg.selectAll('polyline.seatflash').remove()
}
function removeText(){
svg.selectAll('text.lText').remove()
d3.select(this).style('fill','orange')
}
return svg.node();
}
icon9Ss = FileAttachment("icon9-ss@4.txt").tsv({array:true})
icon9Ss1 = FileAttachment("icon9-ss-1@2.txt").tsv({array:true})
icon9Ss2 = FileAttachment("icon9-ss-2@1.txt").tsv({array:true})
textobj9Ss = FileAttachment("textobj9-ss.txt").tsv({array:true})
textobj9Pop = FileAttachment("textobj9-pop@1.txt").tsv({array:true})
zone9Pop = FileAttachment("zone9-pop.txt").tsv({array:true})
icon9Lib = FileAttachment("icon9-lib@3.txt").tsv({array:true})
library9 = d3.csv(library9Link,d3.autoType)
library9Link = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQWfbF9lchXLHDFarLcIrVN2JOLXnWOAa00DkPwNY7oWET4D29LRxPRiWkyfXSspfAmvqPYqmTjpvEf/pub?output=csv"
connectingroute = FileAttachment("ConnectingRoute.txt").tsv({array:true})
vortex = FileAttachment("Vortex.txt").tsv({array:true})
network = FileAttachment("Network.txt").tsv({array:true})
park8 = FileAttachment("park-8.geojson").json()
community8 = FileAttachment("Community-8.geojson").json()
railroad8 = FileAttachment("Railroad-8.geojson").json()
openspacesOther8 = FileAttachment("OpenSpaces-other-8.geojson").json()
publicplazas8 = FileAttachment("PublicPlazas-8.geojson").json()
streetseats8 = FileAttachment("StreetSeats-8.geojson").json()
pops8 = FileAttachment("Pops-8.geojson").json()
library8 = FileAttachment("Library-8.geojson").json()
bbox8Qgis = FileAttachment("bbox-8-qgis.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"
peddemand8 = FileAttachment("PedDemand-8.geojson").json()
textobj9Pop1 = FileAttachment("textobj9-pop.txt").text()
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.
