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], bbox);
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")
var l = svg.selectAll("line")
//static lines from qgis
staticLines(path3, subways.features,"none",1,.5,"rgb(180,180,180)")
staticLines(path4, parks.features,"rgb(150,187,102)",'.05 ','0',"none")
staticLines(path5, side.features,"none",'1','.25',"rgb(173,173,173)")
staticLines(path6, sandy1.features,"none",'.25','1',"rgb(43,112,160)")
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(restrooms.features,'1','rgb(139,139,139)','.5',"0")
staticCircles(theater.features,'1','rgb(139,139,139)','.5',"0")
staticCircles(wifi.features,'2','rgb(234,97,9)','.25',"rgb(255,255,255)",".1")
staticCircles(center.features,'2','rgb(50,128,76)','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)
}
function addText3(event,d){
svg//draw text for icon
.append("text") //appends path to data
.attr('class','mText')
.attr('x', projection([d.latitude,d.long])[0])
.attr("y", projection([d.latitude,d.long])[1])
.attr('fill', 'black')
.style('font-family','times')
.style("font-size", "12px")
.text('evacuation center location')
}
//lines from rhino
//polyline(graphic_test,'red','1','0','none')
polyline(faceoutline,'rgb(165,194,222)','1','0','rgb(165,194,222)')
polyline(textunder,'white','1','1','none')
polyline(textoverride,'rgb(165,194,222)','1','1','none')
polyline(center1,'none','.1','5','rgb(139,139,139)')
//polyline(droneroutes,'none','1','.5','rgb(139,139,139)')
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)
}
//draw icons at spreadsheet location
p.enter().append("polyline")
.data(foods) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", icon1) //The d attribute defines a path to be drawn, only applies to appended elements
.attr('transform',function(d) {return 'translate('+projection([d.latitude,d.long])[0]+','+projection([d.latitude,d.long])[1]+')'})
.style("fill", 'green')
.style("stroke-width", '.1')
.style("stroke", 'black')
.on("mouseover", addText2)
.on("mouseout", removeText)
//draw and set zone 1
p.enter().append("polyline")
.data(zone1) //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", 'grey')
.style("fill-opacity",'.1')
.style("stroke-width", '.1')
.style("stroke", 'black')
.style('stroke-dasharray','5 5')
.on("mouseover", addWireframe)
.on("mouseout", removeWireframe)
//wireframe
function addWireframe(event,d) {
svg//draw wireframe
p.enter().append("polyline")
.data(mouseover_drone_routes) //get data to define path
.enter()
.append('polyline')
.attr('class','mouseover_drone_routes')
.attr("points", function(d) {return d})
.style("fill", 'none')
.style("stroke-width", '.5')
.style("stroke", 'rgb(173,173,173)')
svg//draw text
.append("text") //appends path to data
.attr('class','mText')
.attr('x',50)
.attr("y",250)
.attr('fill', 'black')
.style('font-family','times')
.style("font-size", "8px")
.text('Drone Routes Displayed')
}
function removeWireframe(event,d){
svg.selectAll('polyline.mouseover_drone_routes').remove()
svg.selectAll('text.mText').remove()
}
//////////////////////////////////////
//display name from spreadsheet
t.enter().append('text')
.data(foods) //get data to define path
.enter() //there are more data than elements, this selects them
.append("text") //appends path to data
//.attr('class','spots')
.attr('x',240)
.attr("y",function(d,i){return 800+i*10})
.attr('fill', 'black')
.style('font-family','times')
.style("font-size", "8px")
.style("text-anchor", "end")
.text(function(d){return d.name})
.on("mouseover",musText)
.on("mouseout",removeMusText)
function removeMusText(event,d){
svg.selectAll("line.foodLine").remove()
}
function musText(event,d){
//ANNO draw line pointing
l.enter().append('line')
.data(foods) //get data to define path
.enter() //there are more data than elements, this selects them
.append("line") //appends path to data
.attr('class','foodLine')
.attr('x1',240)
.attr("y1",function(d,i){return 800+i*10})
.attr('x2',function(d) {return projection([d.latitude,d.long])[0]-5})
.attr("y2",function(d,i) {return 800+i*10})
.attr('stroke', 'black')
.attr('stroke-width','.75')
.style('stroke-dasharray','3 3')
l.enter().append('line')
.data(foods) //get data to define path
.enter() //there are more data than elements, this selects them
.append("line") //appends path to data
.attr('class','foodLine')
.attr('x1',function(d) {return projection([d.latitude,d.long])[0]-5})
.attr("y1",function(d,i){return 800+i*10})
.attr('x2',function(d) {return projection([d.latitude,d.long])[0]-5})
.attr("y2",function(d) {return projection([d.latitude,d.long])[1]-5})
.attr('stroke', 'black')
.attr('stroke-width','.5')
.style('stroke-dasharray','3 3')
}
//display text from QGIS restROOM
t.enter().append('text')
.data(restrooms.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("text") //appends path to data
.attr('class','RestText')
.attr('x',function(d) {return path.centroid(d)[0]})
.attr("y",function(d) {return path.centroid(d)[1]-8})
.attr('fill', 'black')
.style('font-family','times')
.style('text-anchor','middle')
.style("font-size", "4px")
.text(function(d) {return d.properties.facility_n})
//points from spreadsheet
c.enter().append('circle')
.data(foods) //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.latitude,d.long])[0]-5})
.attr("cy",function(d) {return projection([d.latitude,d.long])[1]-5})
.attr('r', 5)
.attr('fill', 'rgb(255,255,83)')
.style('fill-opacity','1')
.style("stroke-width", "1")
.style("stroke", "black")
.on("mouseover", addText)
.on("mouseout", removeText)
function addText(event,d){
svg//draw text
.append("text") //appends path to data
.attr('class','mText')
.attr('x', projection([d.latitude,d.long])[0])
.attr("y", projection([d.latitude,d.long])[1])
.attr('fill', 'black')
.style('font-family','times')
.style("font-size", "12px")
.text(d.name)
svg//draw text
.append("text") //appends path to data
.attr('class','mText')
.attr('x', 50)
.attr("y", 300)
.attr('fill', 'black')
.style('font-family','times')
.style("font-size", "8px")
.text(d.description)
var wrap = svg.selectAll("text.mText")
.each(function(d,i){wrap_text(d3.select(this),100)})
}
function addText2(event,d){
svg//draw text for icon
.append("text") //appends path to data
.attr('class','mText')
.attr('x', projection([d.latitude,d.long])[0])
.attr("y", projection([d.latitude,d.long])[1])
.attr('fill', 'black')
.style('font-family','times')
.style("font-size", "12px")
.text('food bank location')
}
function removeText(event,d){
svg.selectAll('text.mText').remove()
}
return svg.node();
}
icon_hurricane = FileAttachment("icon_hurricane.txt").tsv({array:true})
zone1 = FileAttachment("zone1.txt").tsv({array:true})
mouseover_drone_routes = FileAttachment("mouseover_drone_routes.txt").tsv({array:true})
icon1 = FileAttachment("icon1@2.txt").tsv({array:true})
foodLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTI-M1VvxrFaXjK6f5L_C1jsoxxL60-aYKQ7p2D9Pghz1WcCkVW7c0U29m9zOwQihZpLfhdJ7bLGfnq/pub?output=csv'
droneroutes = FileAttachment("droneroutes.txt").tsv({array:true})
center1 = FileAttachment("center.txt").tsv({array:true})
textoverride = FileAttachment("textoverride.txt").tsv({array:true})
textunder = FileAttachment("textunder.txt").tsv({array:true})
title1 = FileAttachment("title@1.txt").tsv({array:true})
faceoutline = FileAttachment("faceoutline.txt").tsv({array:true})
title = FileAttachment("title.txt").tsv({array:true})
sandyreal = FileAttachment("sandyreal.geojson").json()
sandy = FileAttachment("sandy.geojson").json()
center = FileAttachment("center.geojson").json()
theater1 = FileAttachment("theater@1.geojson").json()
wifi = FileAttachment("wifi.geojson").json()
theater = FileAttachment("theater.geojson").json()
bbox = FileAttachment("bbox.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"
side = FileAttachment("side.geojson").json()
sandy1 = FileAttachment("sandy@1.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.
