Public
Edited
Jul 22, 2024
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],boundingBoxFinal);
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")
//static lines from qgis
staticLines(path3, backgroundbox.features,"rgb(255,246,233)",0.005,.5,"grey")
staticLines(path3, subways.features,"none",1,.5,"rgb(180,180,180)")
staticLines(path5, healthareasfinal.features,"rgb(232,223,219)",'0.3','.50',"rgb(100,100,100)")
//L2 - Greyish blue
staticLines(path5, lu1.features,"rgb(174,198,207)",'0.1','.50',"rgb(100,100,100)")
staticLines(path5, lu3.features,"rgb(240,208,195)",'0.1','.50',"rgb(100,100,100)")
staticLines(path5, lu5.features,"rgb(232,223,219)",'0.1','.50',"rgb(100,100,100)")
staticLines(path4, parks.features,"rgb(200,225,200)",'.1','.1',"rgb(255,0,0)")
staticLines(path5, parksss.features,"rgb(155,157,142)",'0.1','.50',"rgb(0,100,0)")
staticLines(path5, streetsFinal.features,"none",'0.5','0.7',"white")
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(bggg,'rgb(255,224,161)', '1', '0.1', 'none')
polyline(h11,'black', '1', '0.6','black')
polyline(h22,'rgb(174,198,207)', '1', '0.6','black')
polyline(h33,'black', '1', '0.6','black')
polyline(h44,'black', '1', '0.6','black')
polyline(inju,'none', '1', '1','black')
//polyline(outlineInjectionFinal,'none', '1', '0.5','black')
polyline(drone,'none', '1', '0.09','rgb(38,53,24)')
polyline(droneOutline,'none', '1', '1','rgb(38,53,24)')
polyline(iconoutline,'black', '1', '1','black')
polyline(addgraphics,'none', '1', '0.09','rgb(38,53,24)')
polyline(graphicoutline1,'none', '1', '1','rgb(38,53,24)')
polyline(insidetext,'white', '1', '1','rgb(255,246,233)')
polyline(recovertext,'rgb(122,39,39)', '1', '2','white')
polyline(step1,'white', '1', '2','rgb(122,39,39)')
polyline(step2,'white', '1', '2','rgb(122,39,39)')
polyline(step3,'white', '1', '2','rgb(122,39,39)')
polyline(step4,'white', '1', '2','rgb(122,39,39)')
polyline(step5,'white', '1', '2','rgb(122,39,39)')
polyline(finaltext,'rgb(38,53,24)', '1', '1','white')
polyline(arrowfinal,'none', '1', '2','rgb(122,39,39)')
polyline(management,'rgb(38,53,24)', '1', '0.5','white')
polyline(four,'rgb(122,39,39)', '1', '2','white')
polyline(interior,'rgb(122,39,39)', '1', '2','white')
polyline(letter,'white', '1', '0.5','white')
function polyline(data, sfill, sOpac, sW, stroke,classVar){
g.enter().append("polyline")
.data(data) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr('class',classVar)
.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(pharmaSyringeDropOffLocation.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", dustbin) //The d attribute defines a path to be drawn, only applies to appended elements
.attr('transform',function(d) {return 'translate('+path.centroid(d)[0]+','+path.centroid(d)[1]+')'})
.style("fill", 'white')
.style("stroke-width", '0.5')
.style("stroke", 'grey')
.on("mouseover", addText2)
.on("mouseout", removeText)
////////////////////////////////
p.enter().append("polyline")
.data(step1) //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('fill-opacity','0.5')
.style("stroke-width", '0')
.style("stroke", 'none')
//.style('stroke-dasharray','5 5')
.on("mouseover", addWireframe)
.on("mouseout", removeWireframe)
function addWireframe(event,d){
p.enter().append("polyline")
.data(draw1) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr('class','wireframe')
.attr("points", function (d) {return d}) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", 'none')
//.style('fill-opacity','0')
.style("stroke-width", '1')
.style("stroke", 'black')
//.style('stroke-dasharray','5 5')
}
function removeWireframe(event,d){
svg.selectAll('polyline.wireframe').remove()
svg.selectAll('text.mtext').remove()
}
///2nd illustration
p.enter().append("polyline")
.data(step2) //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('fill-opacity','0.5')
.style("stroke-width", '0')
.style("stroke", 'none')
//.style('stroke-dasharray','5 5')
.on("mouseover", addWire)
.on("mouseout", removeWire)
function addWire(event,d){
p.enter().append("polyline")
.data(draw2) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr('class','wireframe')
.attr("points", function (d) {return d}) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", 'none')
//.style('fill-opacity','0')
.style("stroke-width", '1')
.style("stroke", 'black')
//.style('stroke-dasharray','5 5')
}
function removeWire(event,d){
svg.selectAll('polyline.wireframe').remove()
svg.selectAll('text.mtext').remove()
}
/////3rd illlustration
p.enter().append("polyline")
.data(step3) //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('fill-opacity','0.5')
.style("stroke-width", '0')
.style("stroke", 'none')
//.style('stroke-dasharray','5 5')
.on("mouseover", addWire1)
.on("mouseout", removeWire1)
function addWire1(event,d){
p.enter().append("polyline")
.data(draw3) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr('class','wireframe')
.attr("points", function (d) {return d}) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", 'none')
//.style('fill-opacity','0')
.style("stroke-width", '1')
.style("stroke", 'black')
//.style('stroke-dasharray','5 5')
}
function removeWire1(event,d){
svg.selectAll('polyline.wireframe').remove()
svg.selectAll('text.mtext').remove()
}
////4th illustration
p.enter().append("polyline")
.data(step4) //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('fill-opacity','0.5')
.style("stroke-width", '0')
.style("stroke", 'none')
//.style('stroke-dasharray','5 5')
.on("mouseover", addWire2)
.on("mouseout", removeWire2)
function addWire2(event,d){
p.enter().append("polyline")
.data(draw4) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr('class','wireframe')
.attr("points", function (d) {return d}) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", 'none')
//.style('fill-opacity','0')
.style("stroke-width", '1')
.style("stroke", 'black')
//.style('stroke-dasharray','5 5')
}
function removeWire2(event,d){
svg.selectAll('polyline.wireframe').remove()
svg.selectAll('text.mtext').remove()
}
/////5th illustration
p.enter().append("polyline")
.data(step5) //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('fill-opacity','0.5')
.style("stroke-width", '0')
.style("stroke", 'none')
//.style('stroke-dasharray','5 5')
.on("mouseover", addWire3)
.on("mouseout", removeWire3)
function addWire3(event,d){
p.enter().append("polyline")
.data(draw5) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr('class','wireframe')
.attr("points", function (d) {return d}) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", 'none')
//.style('fill-opacity','0')
.style("stroke-width", '1')
.style("stroke", 'black')
//.style('stroke-dasharray','5 5')
}
function removeWire3(event,d){
svg.selectAll('polyline.wireframe').remove()
svg.selectAll('text.mtext').remove()
}
//tagline
p.enter().append("polyline")
.data(symbol) //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('fill-opacity','0')
.style("stroke-width", '0')
.style("stroke", 'none')
//.style('stroke-dasharray','5 5')
.on("mouseover", addWireframe5)
.on("mouseout", removeWireframe5)
function addWireframe5(event,d){
p.enter().append("polyline")
.data(tagline) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr('class','wireframe')
.attr("points", function (d) {return d}) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", 'white')
.style('fill-opacity','0.8')
.style("stroke-width", '2')
.style("stroke", 'black')
//.style('stroke-dasharray','5 5')
}
function removeWireframe5(event,d){
svg.selectAll('polyline.wireframe').remove()
svg.selectAll('text.mtext').remove()
}
/////rhinolines interactive
p.enter().append("polyline")
.data(finaltext) //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('fill-opacity','0')
.style("stroke-width", '0')
.style("stroke", 'none')
//.style('stroke-dasharray','5 5')
.on("mouseover", addWireframe7)
.on("mouseout", removeWireframe7)
function addWireframe7(event,d){
p.enter().append("polyline")
.data(rhinolines) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr('class','wireframe')
.attr("points", function (d) {return d}) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", 'none')
.style('fill-opacity','0.8')
.style("stroke-width", '0.5')
.style("stroke", 'rgb(0,51,102)')
//.style('stroke-dasharray','5 5')
}
function removeWireframe7(event,d){
svg.selectAll('polyline.wireframe').remove()
svg.selectAll('text.mtext').remove()
}
//static points from qgis
staticCircles(parkSyringeDisposaleKiosks.features,'6',"rgb(12,55,113)",'0.05',"2")
staticCircles(pharmaSyringeDropOffLocation.features,'6',"rgb(12,55,113)",'0.05',"2")
staticCircles(hospitalFinal.features,'6',"rgb(153,0,0)",'0.8',"2")
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)
}
p.enter().append("polyline")
.data(Hospital) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr('class','bunny')
.attr("points", iconHazard) //The d attribute defines a path to be drawn, only applies to appended elements
.attr("transform", function(d) {return 'translate('+projection([d.Long,d.Lat])[0]+','+projection([d.Long,d.Lat])[1]+')'})
.style("fill", 'rgb(153,0,0)')
.style("fill-opacity", '0.5')
.style("stroke-width", '1')
.style("stroke", 'white')
.on("mouseover", addText2)
.on("mouseout", removeText)
t
//display names from spreadsheet - use this format for points from SPREADSHEET
t.enter().append('text')
.data(Hospital) //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',140)
.attr("y",function(d,i){return 500 +(i*16)})
.attr('fill', 'black')
.style('font-family','helvetica')
.style("font-size", "9px")
.style("text-anchor", "end")
.text(function(d){return d.Name})
.on("mouseover",musText)
.on("mouseout",removeMusText)
function removeMusText(event,d){
svg.selectAll("line.museumLine").remove()
svg.selectAll('polyline.bunny').style('fill','red')
svg.selectAll('polyline.angles').style('fill','red')
}
function musText(event,d){
svg.selectAll('polyline.bunny').style('fill','yellow')
svg.selectAll('polyline.angles').style('fill','yellow')
//THESE ARE LINES FOR ANNOTATION
l.enter().append('line')
.data(Hospital) //get data to define path
.enter() //there are more data than elements, this selects them
.append("line") //appends path to data
.attr('class','museumLine')
.attr('x1',145)
.attr("y1",500)
.attr('x2',projection([d.Long,d.Lat])[0]-5)
.attr("y2",projection([d.Long,d.Lat])[1])
.attr('stroke', 'black')
.attr('stroke-width', '1.25')
.style('stroke-dasharray', '3 2')
//THESE ARE LINES FOR ANNOTATION
l.enter().append('line')
.data(Hospital) //get data to define path
.enter() //there are more data than elements, this selects them
.append("line") //appends path to data
.attr('class','museumLine')
.attr('x1',145)
.attr("y1",function(d,i){return 500 +(i*16)})
.attr('x2',function(d) {return projection([d.Long,d.Lat])[0]-5})
.attr("y2",function(d,i){return 500 +(i*16)})
.attr('stroke', 'black')
.attr('stroke-width', '.25')
.style('stroke-dasharray', '3 2')
l.enter().append('line')
.data(Hospital) //get data to define path
.enter() //there are more data than elements, this selects them
.append("line") //appends path to data
.attr('class','museumLine')
.attr('x1',function(d) {return projection([d.Long,d.Lat])[0]-5})
.attr("y1",function(d,i){return 500 +(i*16)})
.attr('x2',function(d) {return projection([d.Long,d.Lat])[0]-5})
.attr("y2",function(d) {return projection([d.Long,d.Lat])[1]+10})
.attr('stroke', 'black')
.attr('stroke-width', '.25')
.style('stroke-dasharray', '3 2')
}
//points from spreadsheet
c.enter().append('circle')
.data(Hospital) //get data to define path
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr('class','mtext')
.attr('cx',function(d) {return projection([d.Long,d.Lat])[0]})
.attr("cy",function(d) {return projection([d.Long,d.Lat])[1]})
.attr('r', 6)
.attr('fill','rgb(153,0,0)')
.style('fill-opacity','0.2')
.style("stroke-width", "none")
.style("stroke", "none")
.on("mouseover", addText1)
.on("mouseout", removeText)
function addText1(event,d){
d3.select(this).style('fill','rgb(212,31,43)')
var circleName = d.ID
console.log(d.ID)
if(circleName==32){
polyline2(frame1,'white','1','3','rgb(212,31,43)','flower')
}
function polyline2(data, sfill, sOpac, sW, stroke,classVar){
g.enter().append("polyline")
.data(data) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr('class',classVar)
.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)
}
}
function addText(event,d){
svg
.append("text") //appends path to data
.attr('class','mText')
.attr('x', projection([d.Long,d.Lat])[0]-100)
.attr("y", projection([d.Long,d.Lat])[1]-40)
.attr('fill', 'black')
.style('font-family','Georgia')
.style("font-size", "15px")
.style("font-style", "italic")
.text(d.Name)
svg
.append("text") //appends path to data
.attr('class','mText')
.attr('x', 50)
.attr("y", 700)
.attr('fill', 'black')
.style('font-family','Georgia')
.style("font-size", "15px")
.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
.append("text") //appends path to data
.attr('class','mText')
.attr('x',projection([d.Long,d.Lat])[0])
.attr("y",projection([d.Long,d.Lat])[1])
.attr('fill', 'black')
.style('font-family','Georgia')
.style("font-size", "15px")
.text('')
}
function removeText(){
svg.selectAll('text.mText').remove()
}
return svg.node();
}
rhinolines = FileAttachment("rhinolines.txt").tsv({array:true})
symbol = FileAttachment("symbol.txt").tsv({array:true})
tagline = FileAttachment("tagline@4.txt").tsv({array:true})
letter = FileAttachment("letter@2.txt").tsv({array:true})
bggg = FileAttachment("bggg.txt").tsv({array:true})
bgbg = FileAttachment("bgbg@2.txt").tsv({array:true})
h11 = FileAttachment("h11.txt").tsv({array:true})
h22 = FileAttachment("h22.txt").tsv({array:true})
h33 = FileAttachment("h33.txt").tsv({array:true})
h44 = FileAttachment("h44.txt").tsv({array:true})
inju = FileAttachment("inju@1.txt").tsv({array:true})
o1 = FileAttachment("o1.txt").tsv({array:true})
addgraphics = FileAttachment("addgraphics.txt").tsv({array:true})
four = FileAttachment("four.txt").tsv({array:true})
recovertext = FileAttachment("recovertext@1.txt").tsv({array:true})
draw5 = FileAttachment("draw5.txt").tsv({array:true})
draw4 = FileAttachment("draw4.txt").tsv({array:true})
draw3 = FileAttachment("draw3.txt").tsv({array:true})
draw2 = FileAttachment("draw2.txt").tsv({array:true})
draw1 = FileAttachment("draw1@1.txt").tsv({array:true})
arrowfinal = FileAttachment("arrowfinal.txt").tsv({array:true})
management = FileAttachment("management.txt").tsv({array:true})
text3 = FileAttachment("text@3.txt").tsv({array:true})
arrows1 = FileAttachment("arrows@1.txt").tsv({array:true})
text22 = FileAttachment("text2@2.txt").tsv({array:true})
finaltext = FileAttachment("finaltext.txt").tsv({array:true})
step4 = FileAttachment("step 4@1.txt").tsv({array:true})
step2 = FileAttachment("step 2@1.txt").tsv({array:true})
arrows = FileAttachment("arrows.txt").tsv({array:true})
step1 = FileAttachment("step 1@1.txt").tsv({array:true})
step3 = FileAttachment("step 3@1.txt").tsv({array:true})
step5 = FileAttachment("step 5@1.txt").tsv({array:true})
point3 = FileAttachment("point3.txt").tsv({array:true})
point1 = FileAttachment("point1.txt").tsv({array:true})
iso = FileAttachment("iso@1.txt").tsv({array:true})
point2 = FileAttachment("point2.txt").tsv({array:true})
droneDetails = FileAttachment("drone details@2.txt").tsv({array:true})
uff = FileAttachment("uff.txt").tsv({array:true})
yay = FileAttachment("yay@2.txt").text()
zone2 = FileAttachment("zone2.txt").text()
dustbin = FileAttachment("dustbin@2.txt").text()
Hospital = d3.csv(Hospitallink,d3.autoType)
Hospitallink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vT65OBsi_Ql52RFEPvW8RmhGIwrTCjavvfhNPseqkGZuL7edqKRM2PQWq4G5Je4bLP_F8CG81iiLJzH/pub?output=csv"
iconoutline = FileAttachment("iconoutline@1.txt").text()
zone1 = FileAttachment("zone1.txt").tsv({array:true})
iconHazard = FileAttachment("icon hazard@10.txt").tsv({array:true})
drone = FileAttachment("drone.txt").tsv({array:true})
outlineInjectionFinal = FileAttachment("outline injection final.txt").tsv({array:true})
backgroundbox = FileAttachment("backgroundbox.geojson").json()
bg = FileAttachment("bg.txt").tsv({array:true})
h1 = FileAttachment("h1.txt").tsv({array:true})
h2 = FileAttachment("h2.txt").tsv({array:true})
h3 = FileAttachment("h3.txt").tsv({array:true})
h4 = FileAttachment("h4.txt").tsv({array:true})
i1 = FileAttachment("i1.txt").tsv({array:true})
i2 = FileAttachment("i2.txt").tsv({array:true})
i3 = FileAttachment("i3.txt").tsv({array:true})
i4 = FileAttachment("i4.txt").tsv({array:true})
i5 = FileAttachment("i5.txt").tsv({array:true})
p11 = FileAttachment("p11.txt").tsv({array:true})
p10final = FileAttachment("p10final.txt").tsv({array:true})
p7final = FileAttachment("p7final.txt").tsv({array:true})
p8final = FileAttachment("p8final.txt").tsv({array:true})
p9final = FileAttachment("p9final.txt").tsv({array:true})
bake1 = FileAttachment("bake 1.txt").tsv({array:true})
p2final = FileAttachment("p2final.txt").tsv({array:true})
p3final = FileAttachment("p3final.txt").tsv({array:true})
p4final = FileAttachment("p4final.txt").tsv({array:true})
p5final = FileAttachment("p5final.txt").tsv({array:true})
p6final = FileAttachment("p6final.txt").tsv({array:true})
p1final = FileAttachment("P1final.txt").tsv({array:true})
icon = FileAttachment("icon.txt").tsv({array:true})
healthareasfinal = FileAttachment("healthareasfinal.geojson").json()
lu1 = FileAttachment("lu1.geojson").json()
lu2 = FileAttachment("lu2.geojson").json()
lu3 = FileAttachment("lu3.geojson").json()
lu5 = FileAttachment("lu5.geojson").json()
pharmaSyringeDropOffLocation = FileAttachment("pharma syringe drop off location.geojson").json()
parkSyringeDisposaleKiosks = FileAttachment("park syringe disposale kiosks.geojson").json()
hospitalFinal = FileAttachment("hospital final.geojson").json()
streetsFinal = FileAttachment("streets final.geojson").json()
boundingBoxFinal = FileAttachment("Bounding box final.geojson").json()
parksss = FileAttachment("parksss.geojson").json()
boundingBox1 = FileAttachment("bounding box@1.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)
text = FileAttachment("text2@1.txt").tsv({array:true})
outlineInjection = FileAttachment("outline injection.txt").tsv({array:true})
droneOutline = FileAttachment("drone outline.txt").tsv({array:true})
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
rec = FileAttachment("rec.txt").text()
graphicoutline1 = FileAttachment("graphicoutline@1.txt").tsv({array:true})
insidetext = FileAttachment("insidetext.txt").tsv({array:true})
interior = FileAttachment("interior.txt").tsv({array:true})
suig1 = FileAttachment("suig1.txt").tsv({array:true})
suig2 = FileAttachment("suig2.txt").tsv({array:true})
frame1 = FileAttachment("frame1.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.
