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);//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")
var l = svg.selectAll("line")
polyline(_boundingBoxBlack,'black','2','2','none')
//static lines from qgis
staticLines(path5, _subwaylines.features,"none",'1','0.5',"rgb(150,63,63)")
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(_subwaystops.features,'0.5','yellow','0.8',"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', '1')
.attr('fill', sfill)
.style('fill-opacity',sOpac)
.style("stroke-width", sWidth)
}
//lines from rhino
polyline(_droneMovtLine,'none','0.5','1','yellow')
polyline(_ghostMovtLine,'none','1','0.5','white', '2,2')
polyline(_titleText2,'yellow','1','1','none', 'none', '0.8')
polyline(_titleTextInner,'black','1','1','none')
polyline(_droneBodyHidden,'none','0.7','1','rgb(150,63,63)', '1,1')
polyline(_droneBodyVisible,'none','1','0.5','white')
polyline(_droneWingsVisible,'none','1','0.5','white', '1,1')
polyline(_lineworkBase,'none','1','0.5','rgb(58,58,58)')
function polyline(data, sfill, sOpac, sW, stroke, strokeDashArray, fillOpacity){
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)
.style("stroke-dasharray",strokeDashArray)
.style("fill-opacity",fillOpacity)
}
//zone 01
p.enter().append("polyline")
.data(z01) //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", 'grey')
.style("fill-opacity", '0.05')
.on("mouseover", addic)
.on("mouseout", removeic)
function addic(event,d){
p.enter().append("polyline")
.data(ic01) //get data to define path
.enter()
.append('polyline')
.attr('class','ic01')
.attr("points", function(d) {return d})
.style("fill", 'white')
.style('fill-opacity','0.5')
}
function removeic(event,d){
svg.selectAll('.ic01').remove()
}
//zone 02
p.enter().append("polyline")
.data(z02) //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", 'grey')
.style("fill-opacity", '0.05')
.on("mouseover", addic2)
.on("mouseout", removeic02)
function addic2(event,d){
p.enter().append("polyline")
.data(ic02) //get data to define path
.enter()
.append('polyline')
.attr('class','ic02')
.attr("points", function(d) {return d})
.style("fill", 'white')
.style('fill-opacity','0.5')
}
function removeic02(event,d){
svg.selectAll('.ic02').remove()
}
//zone 03
p.enter().append("polyline")
.data(z03) //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", 'grey')
.style("fill-opacity", '0.05')
.on("mouseover", addic3)
.on("mouseout", removeic03)
function addic3(event,d){
p.enter().append("polyline")
.data(ic03) //get data to define path
.enter()
.append('polyline')
.attr('class','ic03')
.attr("points", function(d) {return d})
.style("fill", 'white')
.style('fill-opacity','0.5')
}
function removeic03(event,d){
svg.selectAll('.ic03').remove()
}
//zone 04
p.enter().append("polyline")
.data(z04) //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", 'grey')
.style("fill-opacity", '0.05')
.on("mouseover", addic4)
.on("mouseout", removeic04)
function addic4(event,d){
p.enter().append("polyline")
.data(ic04) //get data to define path
.enter()
.append('polyline')
.attr('class','ic04')
.attr("points", function(d) {return d})
.style("fill", 'white')
.style('fill-opacity','0.5')
}
function removeic04(event,d){
svg.selectAll('.ic04').remove()
}
//zone 05
p.enter().append("polyline")
.data(z05) //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", 'grey')
.style("fill-opacity", '0.05')
.on("mouseover", addic5)
.on("mouseout", removeic05)
function addic5(event,d){
p.enter().append("polyline")
.data(ic05) //get data to define path
.enter()
.append('polyline')
.attr('class','ic05')
.attr("points", function(d) {return d})
.style("fill", 'white')
.style('fill-opacity','0.5')
}
function removeic05(event,d){
svg.selectAll('.ic05').remove()
}
//zone 06
p.enter().append("polyline")
.data(z05) //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", 'grey')
.style("fill-opacity", '0.02')
.on("mouseover", addic06)
.on("mouseout", removeic06)
function addic06(event,d){
p.enter().append("polyline")
.data(ic06) //get data to define path
.enter()
.append('polyline')
.attr('class','ic06')
.attr("points", function(d) {return d})
.style("fill", 'white')
.style('fill-opacity','0.5')
}
function removeic06(event,d){
svg.selectAll('.ic06').remove()
}
//zone 07
p.enter().append("polyline")
.data(z07) //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", 'grey')
.style("fill-opacity", '0.02')
.on("mouseover", addic07)
.on("mouseout", removeic07)
function addic07(event,d){
p.enter().append("polyline")
.data(ic07) //get data to define path
.enter()
.append('polyline')
.attr('class','ic07')
.attr("points", function(d) {return d})
.style("fill", 'white')
.style('fill-opacity','0.5')
}
function removeic07(event,d){
svg.selectAll('.ic07').remove()
}
/*these are lines for annotation
l.enter().append('line')
.data(hauntedspots) //get data to define path
.enter() //there are more data than elements, this selects them
.append("line") //appends path to data
//.attr('class','spots')
.attr('x1',10)
.attr("y1",function(d,i){return 50+(i*16)})
.attr('x2',function(d) {return projection([d.Long,d.Lat])[0]})
.attr("y2",function(d) {return projection([d.Long,d.Lat])[1]})
.attr('stroke', 'yellow')
.style('stroke-opacity','0.3')
.style('stroke-width', "0.5")
.style('dash-array','3 2')
.style("font-size", "12px")*/
c.enter().append('circle')
.data(hauntedspots) // Assuming 'hauntedspots' is your data
.enter()
.append("circle")
.attr('class', 'spots')
.attr('cx', function(d) { return projection([d.Long, d.Lat])[0]; })
.attr("cy", function(d) { return projection([d.Long, d.Lat])[1]; })
.attr('r', 8)
.attr('fill', 'yellow')
.style('fill-opacity', '0.2')
.style("stroke-width", "0.1")
.on("mouseover", function(event, d) {
addicon(event, d);
addText(event, d);
})
.on("mouseout", function(event, d) {
removeicon(event, d);
removeText();
});
function addicon(event, d) {
svg.append("polyline")
.attr('class', 'icon')
.attr("points", _iconBody) // Assuming _iconBody is defined elsewhere
.attr('transform', 'translate(' + projection([d.Long, d.Lat]) + ')')
.style("fill", 'white')
.style("stroke-width", '0.5')
.style("stroke", 'black');
svg.append("polyline")
.attr('class', 'icon')
.attr("points", _iconEyes) // Assuming _iconBody is defined elsewhere
.attr('transform', 'translate(' + projection([d.Long, d.Lat]) + ')')
.style("fill", 'black')
}
function removeicon(event, d) {
svg.selectAll('.icon').remove();
}
function addText(event, d) {
svg.append("text")
.attr('class', 'mText')
.attr('x', projection([d.Long, d.Lat])[0] + 15)
.attr("y", projection([d.Long, d.Lat])[1] + 5)
.attr('fill', 'yellow')
.style('font-family', 'gill sans mt')
.style("font-size", "15px")
.style("fill-opacity", "0.8")
.style("text-anchor", 'right')
.text(d.Name);
svg.append("text")
.attr('class', 'mText')
.attr('x', 30)
.attr("y", 400)
.attr('fill', 'yellow')
.style('font-family', 'gill sans mt')
.style("font-size", "12px")
.style("fill-opacity", "0.8")
.text(d.Description);
// Ensure text wrapping if necessary
svg.selectAll("text.mText").each(function(d, i) {
wrap_text(d3.select(this), 100);
});
}
function removeText() {
svg.selectAll('text.mText').remove();
}
return svg.node();
}
_indexTextIn = FileAttachment("20240723_INDEX TEXT IN@1.txt").text()
_indexTextOut = FileAttachment("20240723_INDEX TEXT OUT@1.txt").text()
ic01 = FileAttachment("IC 01@3.txt").tsv({array:true})
ic03 = FileAttachment("IC 03@3.txt").tsv({array:true})
ic05 = FileAttachment("IC 05@1.txt").tsv({array:true})
ic02 = FileAttachment("IC 02@1.txt").tsv({array:true})
ic04 = FileAttachment("IC 04@1.txt").tsv({array:true})
ic06 = FileAttachment("IC 06@2.txt").tsv({array:true})
ic07 = FileAttachment("IC 07@1.txt").tsv({array:true})
z01 = FileAttachment("Z 01.txt").tsv({array:true})
z02 = FileAttachment("Z 02.txt").tsv({array:true})
z03 = FileAttachment("Z 03.txt").tsv({array:true})
z04 = FileAttachment("Z 04.txt").tsv({array:true})
z05 = FileAttachment("Z 05.txt").tsv({array:true})
z06 = FileAttachment("Z 06.txt").tsv({array:true})
z07 = FileAttachment("Z 07.txt").tsv({array:true})
_iconOpens = FileAttachment("20240723_ICON opens@1.txt").tsv({array:true})
hauntedspotsLink1 = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSIM1lbHyD9FaJQHUXkJr5m9vMc6fsIcGY_ylKFXiba8RwZ8QJVx_UWYUlHMLlj7Q/pub?output=csv'
hauntedspots = d3.csv(hauntedspotsLink1,d3.autoType)
_parkscemetery = FileAttachment("20240717_ParksCemetery@1.geojson").json()
_subwaystops = FileAttachment("20240717_SubwayStops@1.geojson").json()
_droneWingsVisible = FileAttachment("20240718_DRONE WINGS VISIBLE.txt").tsv({array:true})
_droneBodyHidden = FileAttachment("20240718_DRONE BODY HIDDEN.txt").tsv({array:true})
_droneBodyVisible = FileAttachment("20240718_DRONE BODY VISIBLE@3.txt").tsv({array:true})
_boundingBoxBlack = FileAttachment("20240718_BOUNDING BOX BLACK.txt").tsv({array:true})
_ghostMovtLine = FileAttachment("20240718_GHOST MOVT LINE.txt").tsv({array:true})
_droneMovtLine = FileAttachment("20240718_DRONE MOVT LINE.txt").tsv({array:true})
_hauntedspots = FileAttachment("20240717_HauntedSpots.geojson").json()
_subwaylines = FileAttachment("20240717_SubwayLines.geojson").json()
_boundingbox = FileAttachment("20240717_BoundingBox.geojson").json()
eyes = FileAttachment("eyes.txt").tsv({array:true})
bbox_new = FileAttachment("bbox_new.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"
_titleTextInner = FileAttachment("20240718_TITLE TEXT - inner@3.txt").tsv({array:true})
_titleText2 = FileAttachment("20240718_TITLE TEXT@3.txt").tsv({array:true})
_iconBody = FileAttachment("20240723_ICON BODY@2.txt").tsv({array:true})
_iconEyes = FileAttachment("20240723_ICON EYES.txt").tsv({array:true})
_lineworkBase = FileAttachment("20240723_LINEWORK BASE.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.
