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], box);//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 path6 = 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")//for polylines from rhino
//static lines from qgis
//staticLines(path3, subways.features,"none",1,.5,"rgb(180,180,180)")
staticLines(path3, parks.features,"rgb(200,225,200)",'.25','.1',"rgb(0,255,0)")
staticLines(path4, blocks.features,"none",1,.5,"rgb(8,8,8)",'.25','.1',"rgb(0,100,0)")
staticLines(path5, boroughs.features,"none",1,1,"rgb(8,8,8)")
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
//lines from rhino
function fillColor(d){
var color = 'rgb(255,0,0)'
if(d.ID == 1){color = 'rgb(50,0,0)'}
if(d.ID == 2){color = 'rgb(100,0,0)'}
if(d.ID == 3){color = 'rgb(150,0,0)'}
if(d.ID == 4){color = 'rgb(200,0,0)'}
return color
}
c.enter().append('circle')
.data(combinedData) //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.lon,d.lat])[0]})
.attr("cy",function(d) {return projection([d.lon,d.lat])[1]})
//.attr('r', 4)
.attr('r', function(d) {return d.bikes.num_bikes_available/10})
.attr('fill', fillColor)
.style('fill-opacity','1')
.style("stroke", "black")
.style("stroke-width", "1")
.on("mouseover", addText)
.on("mouseout", removeText)
function addText(event,d){
/* svg.text({
pos: [30, 20],
text: "Bikes Available",
fontSize: 15,
fill: "#38896F"
}); */
svg//draw text
.append("text") //appends path to data
.attr('class','mText')
.attr('x',30)
.attr("y",30)
.attr('fill', 'black')
.style('font-family','helvetica')
.style("font-size", "12px")
.text('Bikes Available: ' + d.bikes.num_bikes_available)
svg//draw text
.append("text") //appends path to data
.attr('class','mText')
.attr('x',30)
.attr("y",50)
.attr('fill', 'black')
.style('font-family','helvetica')
.style("font-size", "12px")
.text('Docks Available: ' + d.bikes.num_docks_available)
svg//draw text
var wrap = svg.selectAll("text.mText")
.each(function(d, i) { wrap_text(d3.select(this), 100) });
}
function removeText(){
svg.selectAll('text.mText').remove()
}
return svg.node();
}
box = FileAttachment("box_bicycle.geojson").json()
boroughs = FileAttachment("boroughs.geojson").json()
parks = FileAttachment("Park.geojson").json()
blocks = FileAttachment("blocks.geojson").json()
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
bikes_stationLink = 'https://gbfs.lyft.com/gbfs/2.3/bkn/en/station_status.json'
bikes = d3.json(bikes_stationLink, d3.autoType)
station_infoLink = 'https://gbfs.lyft.com/gbfs/2.3/bkn/en/station_information.json'
stations = d3.json(station_infoLink, d3.autoType)
combinedData = {
var newData = []
for (let i = 0; i < bikes.data.stations.length; i++) {
//loop through stationinfolink
var bikesID = bikes.data.stations[i].station_id
for (let n = 0; n < stations.data.stations.length; n++) {
var stationsID = stations.data.stations[n].station_id
if(bikesID == stationsID){
newData.push({bikes:bikes.data.stations[i],lat:stations.data.stations[n].lat,lon:stations.data.stations[n].lon,name:stations.data.stations[n].name })
}
}
}
return newData
}
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.
