Public
Edited
Jul 27, 2023
d3 = require("d3@6")
chart = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [39, 39, width-100, height-100]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 20, height - 20], bbox2);
var path1 = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var path4 = d3.geoPath().projection(projection);
var path5 = d3.geoPath().projection(projection);
var path3 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
g.selectAll("path5") //d3 geopath
.data(bbox2.features) //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", path5) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "grey")
.style("fill-opacity", "0.2")
.style("stroke", "none")
.style('stroke-opacity','0')
.style("stroke-width", '.75')
.style("stroke", "rgb(0,0,0)")
g.selectAll("path2") //d3 geopath
.data(BaseMap.features) //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", path2) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style("stroke", "grey")
.style('stroke-opacity','0.5')
.style("stroke-width", '.75')
.style("stroke", "rgb(0,0,0)")
g.selectAll("path3") //d3 geopath
.data(BldgFtprints.features) //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", path3) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "rgb(242,17,86)")
.style("fill-opacity", "0.1")
.style('stroke-opacity','1')
.style("stroke-width", '0.8')
.style("stroke", "rgb(245,123,23)")
var p = svg.selectAll("polyline") //d3 geopath
/* .data(blobs)
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr("points", function(d) {return d})
.style("stroke","rgb(191,67,105")
.style("stoke-width","3px")
.style("fill","none")
*/
g.selectAll("path3") //d3 geopath
.data(spclparkingLots.features) //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", path3) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "orange")
.style("fill-opacity", "1")
.style('stroke-opacity','1')
.style("stroke-width", '1')
.style("stroke", "black")
var c = svg.selectAll("circle") //d3 geopath
.data(RecyclingBins.features)
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr("cx", function(d) {return path1.centroid(d)[0]})
.attr("cy", function(d) {return path1.centroid(d)[1]})
.attr('r',5)
.attr('fill','rgb(224,197,73)')
.style('fill-opacity','1')
.style("stroke-width", '1')
.style("stroke", "black")
c.enter().append("circle")
.data(DropOff.features)
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr("cx", function(d) {return path1.centroid(d)[0]})
.attr("cy", function(d) {return path1.centroid(d)[1]})
.attr('r',10)
.attr('fill','red')
.style('fill-opacity','1')
.style("stroke-width", '9')
.style("stroke", "rgb(234,212,117)")
.style('stroke-opacity','0.6')
.on("mouseover", DropOffhover)
.on("mouseout", DropOffout)
function DropOffhover(i,d){
console.log(d.properties.ntaname)
p.enter().append("polyline")
.data(beeicon)
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr("points", function(d) {return d.icon})
.attr("class","bi")
.style("fill", "white")
.style("fill-opacity", "1")
.style('stroke-opacity','1')
.style("stroke-width", '1')
.style("stroke", "black")
.attr ("transform", function(d){return'translate('+projection([d.longitude,d.lat])[0]+" "+projection([d.longitude,d.lat])[1]+")"})
//p = svg.selectAll("polyline") //d3 geopath
//text
var t = svg.selectAll("text") //d3 geopath
.data(RecyclingBins.features)
.enter() //there are more data than elements, this selects them
.append("text") //appends path to data
.attr("x", function(d) {return path1.centroid(d)[0]})
.attr("y", function(d) {return path1.centroid(d)[1]-12})
.style("font-family","d-din")
.style("font-weight","bold")
.style("font-size", "8px")
.style('fill', "black")
.style("text-anchor","end")
.text(function(d) {return d.properties.name})
svg.append("text")
.attr("class","dtext")
.attr("x","150")
.attr("y","200")
.style("font-family","coolvetica")
.style("font-weight","1200")
.style("font-size", "12px")
.style('fill', "rgb(191,67,105")
.style("text-anchor","end")
.text(d.properties.ntaname)
var wrap = svg.selectAll("text.dtext")
.each(function(d,i) {wrap_text(d3.select(this),100)})
//annotation lines
svg.append("line")
.attr("class","dline")
.attr("x1","151")
.attr("y1","200")
.attr("x2",projection([d.properties.longitude,d.properties.latitude])[0])
.attr("y2","200")
.style("stroke","black")
.style("linetype","dotted")
.attr('stroke-dasharray','4,4')
.style("stroke-width","1px")
svg.append("line")
.attr("class","dline")
.attr("x1",projection([d.properties.longitude,d.properties.latitude])[0])
.attr("y1","200")
.attr("x2",projection([d.properties.longitude,d.properties.latitude])[0])
.attr("y2",projection([d.properties.longitude,d.properties.latitude])[1])
.style("stroke","black")
.style("linetype","dotted")
.attr('stroke-dasharray','4,4')
.style("stroke-width","1px")
}
function DropOffout(){
svg.selectAll("text.dtext").remove()
svg.selectAll("line.dline").remove()
svg.selectAll("polyline.bi").remove()
}
p.enter().append("polyline") //d3 geopath
.data(outlineBee)
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr("class","outline")
.attr("points", function(d) {return d})
.style("stroke","none")
.style("stroke-width","1.5")
.style("fill","white")
.style("fill-opacity","0.7")
//.on("mouseover", OL1)
//.on("mouseout", annieout)
// function outlineBee(i,d){
// d3.select(this).style("stroke-width","5");
// d3.select(this).style("cursor", "default");
// }
p.enter().append("polyline") //d3 geopath
.data(poppy)
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr("class","dpoppy")
.attr("points", function(d) {return d})
.style("stroke","grey")
.style("stroke-width","0.8")
.style("fill","none")
.style("fill-opacity","1")
.on("mouseover", annieshiz)
.on("mouseout", annieout)
function annieshiz(i,d) {
p.enter().append("polyline") //d3 geopath
.data(Journey2)
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr("class","djourney2")
.attr("points", function(d) {return d})
.style("stroke","rgb(127,127,127)")
.style("stroke-width","1.5px")
.style("fill","none")
.style("fill-opacity","0.3")
.style('stroke-dasharray','6,3')
}
function annieout() {
svg.selectAll("polyline.djourney2").remove()
// svg.selectAll("polyline.outline").remove()
}
return svg.node();
}
beeicon = {
var combinedData = []
for (let i=0; i<DropOff.features.length; i++) {
combinedData.push ({lat:DropOff.features[i].properties.latitude, longitude: DropOff.features[i].properties.longitude,icon:BeeSymbol,ntaname:DropOff.features[i].properties.ntaname})
}
return combinedData
}
poppy = FileAttachment("Bee 1@7.txt").tsv({array:true})
Journey2 = FileAttachment("Journey 2.txt").tsv({array:true})
blobs = FileAttachment("Line_Test@2.txt").tsv({array:true})
LargeBee = FileAttachment("Large Bee.txt").tsv({array:true})
BeeSymbol = FileAttachment("Bee Symbol@1.txt").tsv({array:true})
bbox2 = FileAttachment("Bounding Box@1.geojson").json()
BaseMap = FileAttachment("Base Map.geojson").json()
BldgFtprints = FileAttachment("Building Footprints (2).geojson").json()
spclparkingLots = FileAttachment("Special Parking Lots.geojson").json()
RecyclingBins = FileAttachment("Recycling Bins.geojson").json()
DropOff = FileAttachment("Drop Off Points.geojson").json()
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
DropoffData = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQrebv2cvK7L0Qqai3ZVeo6pJWFz2xe6ET4faXBDwVQbRDWwaqBtETcXrEs521Xo1iiE4A2ZsyvoMzn/pub?output=csv"
outlineBee = FileAttachment("Outline Bee.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.
