//type = [food,bar,store,coffee]
spotsLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vR3CZr6kGX_rJPp1kxD15JkuGcMvAgLpKfd_XyMay6aAhbEIxv14_Uy4i7ckgGqhyNUnAwCpuEQ3r3s/pub?output=csv'
spots = d3.csv(spotsLink,d3.autoType)
walks = FileAttachment("walks@1.geojson").json()
curbs = FileAttachment("curbs.geojson").json()
walks1 = FileAttachment("weekend_walk.geojson").json()
zips = FileAttachment("boundaries.geojson").json()
nycParks = FileAttachment("parks_nyc_reduced@2.geojson").json()
subway_lines = FileAttachment("subway_lines@2.geojson").json()
subSts = FileAttachment("subway_sts@1.geojson").json()
bbox = FileAttachment("site_boundaries.geojson").json()
d3 = require("d3@6")
box = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRlLW6JcSye2uCpq29RZVWNXSCgTKcrPtQZ7XCqGOJuwzf0ZVUB3rhz3x1L2TVgBdRlVo8IZHjylk_Y/pub?output=csv'
studioSite = d3.csv(box,d3.autoType)
poiLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSF_0FKncruiGvvFmjQ6VrqOb6yDx3k56TGC8DTURcoFKf9vXN0WmhQkJeHdzStfOSfKYmymcAeqrAm/pub?output=csv'
pois = d3.csv(poiLink,d3.autoType)
zoomed_walk = FileAttachment("zoomed_walk.geojson").json()
bldgs = FileAttachment("bldgs.geojson").json()
single_walk = FileAttachment("single_walk.geojson").json()
chart = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width, height], zoomed_walk);
var path = d3.geoPath().projection(projection);
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.append("g").attr("id", "paths");
/*
var p = svg.selectAll("polyline")
.data(dog_icon) //get data to define path
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr('points', function(d){return d})
.style("fill", "black")
.style('stroke-opacity','0')
.style("stroke-width", '0')
.style("stroke", "rgb(0,0,0)")
//.attr('transform',iconLocation)
*/
/*
function iconLocation(){
var xVal = projection([stops[progress].long,stops[progress].lat])[0]
var yVal = projection([stops[progress].long,stops[progress].lat])[1]
//console.log(xVal)
return "translate("+xVal+" "+yVal+")"
}
*/
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(bldgs.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", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('stroke-opacity','.2')
.style("stroke-width", '.5')
.style("stroke", "rgb(0,0,0)")
g.selectAll("path5") //d3 geopath
//svg
//.selectAll('path')
.data(curbs.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','curbs')
.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('stroke-opacity','.5')
.style("stroke-width", '.5')
.style("stroke", "rgb(0,0,0)")
g.selectAll("path3") //d3 geopath
//svg
//.selectAll('path')
.data(zips.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", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "white")
.style('fill-opacity','.5')
.style("stroke-width", '1.2')
.style("stroke", "rgb(0,0,0)")
g.selectAll("path") //d3 geopath
.data(nycParks.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", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "green")
.style('fill-opacity','.25')
.style("stroke-width", ".1")
.style("stroke", "rgb(0,255,0)")
var cir = svg.selectAll("circle") //d3 geopath
.data(spots) //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.long,d.lat])[0]})
.attr("cy",function(d) {return projection([d.long,d.lat])[1]})
.attr('r', spotSize)
.attr('fill', 'black')
.style('fill-opacity','1')
.style("stroke-width", "1")
.on('mouseover', spotText)
.on('mouseleave', spotErase)
function spotSize(d,i){
var r = 3
if(d.type=='bldg'){r=2}
return r
}
function spotText(event,d){
d3.select(this).style("fill", 'cyan');
svg
.append('text')
.attr('class','spotText')
.attr('x','370')
.attr('y','385')
.attr("font-family", "Helvetica")
.attr('font-size','.75em')
.attr('font-weight','bold')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','end')
//.attr('background-color', 'rgba(255, 0, 0)')
.text(d.name)
svg
.append('text')
.attr('class','spotText')
.attr('x','370')
.attr('y','400')
.attr("font-family", "Helvetica")
.attr('font-size','.75em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','end')
//.attr('background-color', 'rgba(255, 0, 0)')
.text(d.description)
var wrap = svg.selectAll("text.spotText")
.each(function(d, i) { wrap_text(d3.select(this), 100) });
}
function spotErase(event,d){
d3.selectAll('circle.spots').style('fill','black')
d3.selectAll('text.spotText').remove()
}
svg.append("circle") //d3 geopath
.attr('class','home')
.attr('cx',function(d) {return projection([-73.99431354,40.69009372])[0]})
.attr("cy",function(d) {return projection([-73.99431354,40.69009372])[1]})
.attr('r', '3')
.attr('fill', 'cyan')
.style('fill-opacity','1')
.style("stroke-width", ".5")
.style('stroke','black')
.style('transform','translate(100 100)')
.on('mouseover', homeText)
.on('mouseleave', homeErase)
function homeText(event,d){
d3.select(this).style("fill", 'black');
svg
.append('text')
.attr('class','homeText')
.attr('x','370')
.attr('y','385')
.attr("font-family", "Helvetica")
.attr('font-size','.75em')
.attr('font-weight','bold')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','end')
//.attr('background-color', 'rgba(255, 0, 0)')
.text('home sweet home')
var wrap = svg.selectAll("text.homeText")
.each(function(d, i) { wrap_text(d3.select(this), 100) });
}
function homeErase(event,d){
d3.selectAll('circle.home').style('fill','cyan')
d3.selectAll('text.homeText').remove()
}
//display site name
var t = svg.selectAll('text')
//use word wrap function to limit line width
var wrap = svg.selectAll("text.siteDescription")
.each(function(d, i) { wrap_text(d3.select(this), 200) });
var wrap = svg.selectAll("text.poisd")
.each(function(d, i) { wrap_text(d3.select(this), 160) });
function poiErase(event,d){
d3.selectAll('text.pois').remove()
d3.selectAll('line.pois').remove()
}
g.selectAll("path2") //d3 geopath
//svg
//.selectAll('path')
.data(subway_lines.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", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style('fill-opacity','0')
.style("stroke-width", ".15")
.style("stroke", "rgb(0,0,0)")
g.selectAll("circle") //d3 geopath
//svg
//.selectAll('path')
.data(subSts.features) //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.5)
.attr('fill','black')
.style('fill-opacity','.9')
//var t = svg.selectAll('text')
t.enter().append('text')
.data(subSts.features)
.enter()
.append('text')
.attr('class','subStops')
.attr('x',function(d) {return path.centroid(d)[0]})
.attr('y',function(d) {return path.centroid(d)[1]-5})
.attr("font-family", "Helvetica")
.attr('font-size','.55em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','middle')
.text(function(d){return d.properties.name})
g.selectAll("path4") //d3 geopath
.data(single_walk.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','walks')
.attr("d", path4) //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-dasharray", "4 2")
.style("stroke", "rgb(0,0,0)")
.on('mouseover', walkText)
.on('mouseleave', walkErase)
function walkText(event,d){
d3.select(this).style("stroke-width", '3');
d3.select(this).style("stroke-dasharray", '4 0');
svg
.append('text')
.attr('class','walkText')
.attr('x','370')
.attr('y','385')
.attr("font-family", "Helvetica")
.attr('font-size','.75em')
.attr('fill','rgb(0,0,0)')
.attr('text-anchor','end')
//.attr('background-color', 'rgba(255, 0, 0)')
.text(d.properties.Text)
var wrap = svg.selectAll("text.walkText")
.each(function(d, i) { wrap_text(d3.select(this), 100) });
}
function walkErase(event,d){
d3.selectAll('path.walks').style('stroke-width','1')
d3.selectAll('path.walks').style('stroke-dasharray','4 2')
d3.selectAll('text.walkText').remove()
}
return svg.node();
}
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
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.
