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],cityLinesWeb, boxlines, );
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
//static lines from qgis
staticLines(path3, boxBlack.features,"rgb(17,18,20)",'1','1',"none")
polyline(background,'none','1','1','Black')
staticLines(path4, parksWeb2.features,"rgb(111,193,67)",'.25','.1',"rgb(0,255,0)")
staticLines(path4, cityLinesWeb.features,"none",'1','0.8',"rgb(241,165,77)")
staticLines(path3, subwayLineWeb.features,"none",'1','4',"yellow")
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(droneOutline,'none','1','1.9','orange')
polyline(drone3outline,'none','1','1.9','orange')
polyline(drone2outline,'none','1','1.9','orange')
polyline(lines,'rgb(240,31,36)','1.2','1.2','rgb(240,31,36)')
polyline(thepartymaker,'orange','4','0.5','none')
polyline(drone,'none','4','0.5','orange')
polyline(boxlines,'none','4','0.8','orange')
polyline(partyInsides,'black','1','0.5','none')
polyline(siteLiness,'none','1','0.8','rgb(241,165,77)')
polyline(boxouter,'none','1','15','Orange')
polyline(treeIns,'none','4','0.5','orange')
polyline(treeOut,'none','1','0.7','orange')
polyline(humansOut,'none','1','0.3','orange')
polyline(huamansPlayingIns,'none','4','0.7','orange')
//static points from qgis
staticCircles(subwayWeb.features,'5','rgb(235,220,40)','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)
}
//draw icons at spreadsheet location
p.enter().append("polyline")
.data(green) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", locationPointer) //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(17,18,20)')
.style("stroke-width", '1')
.style("stroke", 'green')
.on("mouseover", addText)
.on("mouseout", removeText)
//drawing images
p.enter().append("polyline")
.data(droneOutline) //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", 'orange')
.style('stroke-dasharray','5 5')
.on("mouseover", addparty)
.on("mouseout", removeparty)
function addparty(event,d){
p.enter().append("polyline")
.data(pink2party) //get data to define path
.enter()
.append('polyline')
.attr('class','party')
.attr("points", function(d) {return d})
.style("fill", 'rgb(210,100,161)')
.style("stroke-width", '0.01')
.style("stroke", 'none')
p.enter().append("polyline")
.data(pink3party) //get data to define path
.enter()
.append('polyline')
.attr('class','party')
.attr("points", function(d) {return d})
.style("fill", 'rgb(203,13,119)')
.style("stroke-width", '0.01')
.style("stroke", 'none')
p.enter().append("polyline")
.data(pinkParty) //get data to define path
.enter()
.append('polyline')
.attr('class','party')
.attr("points", function(d) {return d})
.style("fill", 'rgb(203,13,119)')
.style("stroke-width", '0.01')
.style("stroke", 'none')
p.enter().append("polyline")
.data(yellowparty) //get data to define path
.enter()
.append('polyline')
.attr('class','party')
.attr("points", function(d) {return d})
.style("fill", 'rgb(234,179,50)')
.style("stroke-width", '0.01')
.style("stroke", 'none')
p.enter().append("polyline")
.data(greenparty) //get data to define path
.enter()
.append('polyline')
.attr('class','party')
.attr("points", function(d) {return d})
.style("fill", 'rgb(100,147,83)')
.style("stroke-width", '0.01')
.style("stroke", 'none')
p.enter().append("polyline")
.data(partyExplode) //get data to define path
.enter()
.append('polyline')
.attr('class','party')
.attr("points", function(d) {return d})
.style("fill", 'none')
.style("stroke-width", '.5')
.style("stroke", 'black')
p.enter().append("polyline")
.data(whiteparty) //get data to define path
.enter()
.append('polyline')
.attr('class','party')
.attr("points", function(d) {return d})
.style("fill", 'white')
.style("stroke-width", '.5')
.style("stroke", 'white')
p.enter().append("polyline")
.data(celebrateout) //get data to define path
.enter()
.append('polyline')
.attr('class','party')
.attr("points", function(d) {return d})
.style("fill", 'rgb(220,134,49)')
.style("stroke-width", '1.6')
.style("stroke", 'black')
p.enter().append("polyline")
.data(celebrateins) //get data to define path
.enter()
.append('polyline')
.attr('class','party')
.attr("points", function(d) {return d})
.style("fill", 'black')
.style("stroke-width", '0.')
.style("stroke", 'none')
svg//draw text
.append("text") //appends path to data
.attr('class','mText')
.attr('x',50)
.attr("y",600)
.attr('fill', 'black')
.style('font-family','helvetica')
.style("font-size", "11px")
.text('this is a detail')
}
function removeparty(event,d){
svg.selectAll('polyline.party').remove()
svg.selectAll('text.mText').remove()
}
//drawing CONFETTI
p.enter().append("polyline")
.data(drone2outline) //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", 'orange')
.style('stroke-dasharray','5')
.on("mouseover", addconfetti)
.on("mouseout", removeconfetti)
function addconfetti(event,d){
p.enter().append("polyline")
.data(greenconfetti) //get data to define path
.enter()
.append('polyline')
.attr('class','party')
.attr("points", function(d) {return d})
.style("fill", 'rgb(100,147,83)')
.style("stroke-width", '0')
.style("stroke", 'none')
p.enter().append("polyline")
.data(purpleconfetti) //get data to define path
.enter()
.append('polyline')
.attr('class','party')
.attr("points", function(d) {return d})
.style("fill", 'rgb(203,13,119)')
.style("stroke-width", '0.01')
.style("stroke", 'none')
p.enter().append("polyline")
.data(yellowconfetti) //get data to define path
.enter()
.append('polyline')
.attr('class','party')
.attr("points", function(d) {return d})
.style("fill", 'rgb(234,179,50)')
.style("stroke-width", '0.01')
.style("stroke", 'none')
}
function removeconfetti(event,d){
svg.selectAll('polyline.party').remove()
}
//drawing Full
p.enter().append("polyline")
.data(drone3outline) //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", 'orange')
.style('stroke-dasharray','5')
.on("mouseover", addfull)
.on("mouseout", removefull)
function addfull(event,d){
p.enter().append("polyline")
.data(greenfull) //get data to define path
.enter()
.append('polyline')
.attr('class','party')
.attr("points", function(d) {return d})
.style("fill", 'rgb(100,147,83)')
.style("stroke-width", '0')
.style("stroke", 'none')
p.enter().append("polyline")
.data(pinkfull) //get data to define path
.enter()
.append('polyline')
.attr('class','party')
.attr("points", function(d) {return d})
.style("fill", 'rgb(203,13,119)')
.style("stroke-width", '0.01')
.style("stroke", 'none')
p.enter().append("polyline")
.data(yellowfull) //get data to define path
.enter()
.append('polyline')
.attr('class','party')
.attr("points", function(d) {return d})
.style("fill", 'rgb(234,179,50)')
.style("stroke-width", '0.01')
.style("stroke", 'none')
p.enter().append("polyline")
.data(orangefull) //get data to define path
.enter()
.append('polyline')
.attr('class','party')
.attr("points", function(d) {return d})
.style("fill", 'orange')
.style("stroke-width", '0.01')
.style("stroke", 'none')
}
function removefull(event,d){
svg.selectAll('polyline.party').remove()
}
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)
}
function addText(event,d){
svg
svg//draw text
.append("text") //appends path to data
.attr('class','spots')
.attr('x',projection([d.Long,d.Lat])[0])
.attr("y",projection([d.Long,d.Lat])[1])
.attr('fill', 'white')
.style('font-family','Futura')
.style("font-size", "24px")
.text(d.Name)
svg
svg//draw text
.append("text") //appends path to data
.attr('class','spots')
.attr('x',50)
.attr("y",300)
.attr('fill', 'Orange')
.style('font-family','Futura Hv Bt')
.style("font-size", "16px")
.text(d.Description)
var wrap = svg.selectAll("text.spots")
.each(function(d, i) { wrap_text(d3.select(this), 100) });
}
function removeText(){
svg.selectAll('text.spots').remove()
}
return svg.node();
}
wireframe.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
locationPointer = FileAttachment("location pointer@4.txt").tsv({array:true})
locationSymbol1 = FileAttachment("location symbol@1.txt").tsv({array:true})
drone3outline = FileAttachment("drone3outline.txt").tsv({array:true})
boxouter = FileAttachment("boxouter@1.txt").tsv({array:true})
humansOut = FileAttachment("Humans out.txt").tsv({array:true})
treeIns = FileAttachment("Tree ins.txt").tsv({array:true})
treeOut = FileAttachment("Tree out.txt").tsv({array:true})
yellowfull = FileAttachment("yellowfull.txt").tsv({array:true})
greenfull = FileAttachment("greenfull.txt").tsv({array:true})
orangefull = FileAttachment("Orangefull.txt").tsv({array:true})
pinkfull = FileAttachment("Pinkfull.txt").tsv({array:true})
huamansPlayingIns = FileAttachment("huamans playing ins.txt").tsv({array:true})
purpleconfetti = FileAttachment("Purpleconfetti@1.txt").tsv({array:true})
yellowconfetti = FileAttachment("Yellowconfetti@1.txt").tsv({array:true})
greenconfetti = FileAttachment("greenconfetti@1.txt").tsv({array:true})
drone2outline = FileAttachment("drone 2outline.txt").tsv({array:true})
celebrateins = FileAttachment("celebrateins@1.txt").tsv({array:true})
drone1outlines = FileAttachment("drone1outlines.txt").tsv({array:true})
celebrateout = FileAttachment("celebrateout@1.txt").tsv({array:true})
celebrate = FileAttachment("CELEBRATE.txt").tsv({array:true})
greenparty = FileAttachment("greenparty.txt").tsv({array:true})
pink3party = FileAttachment("PINK3PARTY.txt").tsv({array:true})
pink2party = FileAttachment("pink2party.txt").tsv({array:true})
yellowparty = FileAttachment("yellowparty@1.txt").tsv({array:true})
partyExplode = FileAttachment("party explode@1.txt").tsv({array:true})
ouliness = FileAttachment("Ouliness.txt").tsv({array:true})
siteLiness = FileAttachment("Site lines 2.txt").tsv({array:true})
background = FileAttachment("background.txt").tsv({array:true})
partyInsides = FileAttachment("pARTY INSIDES.txt").tsv({array:true})
Parkslink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTYIXRWwi3QlLtL7ofqmgYf6pJnIVkDGsRG8oE4mrAvWWXMaQHcAUhflKu2WLE2gNUX_oQ5BLW0gPBX/pub?output=csv'
green = d3.csv(Parkslink,d3.autoType)
droneLiness = FileAttachment("Drone liness.txt").text()
drone = FileAttachment("Drone liness@3.txt").tsv({array:true})
whiteparty = FileAttachment("WHITEPARTY.txt").tsv({array:true})
lines = FileAttachment("Lines@2.txt").tsv({array:true})
boxlines = FileAttachment("boxlines.txt").text()
thepartymaker = FileAttachment("THE PARTY MAKER@2.txt").tsv({array:true})
boxBlack = FileAttachment("box black.geojson").json()
parksWeb2 = FileAttachment("Parks Web@2.geojson").json()
subwayLineWeb = FileAttachment("Subway line Web.geojson").json()
subwayWeb = FileAttachment("Subway Web.geojson").json()
graphic_test = FileAttachment("graphic_test.txt").tsv({array:true})
cityLinesWeb = FileAttachment("City Lines Web@2.geojson").json()
parksWeb = FileAttachment("Parks Web@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)
droneOutline = FileAttachment("drone outline@1.txt").tsv({array:true})
pinkParty = FileAttachment("Pink party.txt").tsv({array:true})
bbox1 = FileAttachment("bbox@1.txt").text()
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
untitled = FileAttachment("tvd.geojson").json()
untitled1 = FileAttachment("123.geojson").json()
tvd1 = FileAttachment("tvd@1.geojson").json()
parks1 = FileAttachment("parks.qmd")
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.
