NYS Traffic Volume Map Over Covid-19
zips = FileAttachment("NYC_Counties.geojson").json()
NYSTA_Route = FileAttachment("NYSTA_Route.geojson").json()
d3 = require("d3@6")
Traffic_2018 = FileAttachment("Traffic_Volume_2018@1.geojson").json()
Traffic_2019 = FileAttachment("Traffic_Volume_2019@1.geojson").json()
Traffic_2020 = FileAttachment("Traffic_Volume_2020@3.geojson").json()
Stations = FileAttachment("NYS_Amtrak_Stations.geojson").json()
//Traffic 2018 Chart
chart1 = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [-60, 0, width, height]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], zips);
var path = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
g.selectAll("path") //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','1')
.style("stroke-width", ".25")
.style("stroke", "rgb(0,0,0)")
//Insert NYSTA Lines
var g = svg.append("g").attr("id", "paths");
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(NYSTA_Route.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','0')
.style("stroke-width", ".75")
.style("stroke", "rgb(255,0,0)")
//Insert Traffic 2018
var c = svg.selectAll('circle') //d3 geopath
//svg
.data(Traffic_2018.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',5)
//.attr('r',d => Traffic_2019.get(d.properties.Weekday_3))
.attr('fill','green')
.style('fill-opacity','1')
.on("mouseover",addfill)
.on("mouseout",removefill3)
function addfill(event,d) {
d3.select(this).style('fill','black')
d3.select(this).style('fill-opacity','1')
d3.select(this).attr('r',10)
}
function removefill3(event,d) {
d3.select(this).style('fill','green')
d3.select(this).style('fill-opacity','1')
d3.select(this).attr('r',5)
}
//create tooltip
const tooltip = svg.append("g");
//listen for mouse events and add text/bounding boxes
svg
.selectAll("circle")
.on("touchmove mousemove", function(event, d) {
const centroid = path.centroid(d);
tooltip.call(
callout,
`${d.properties.RCSTA}
${d.properties.TDV_ROUTE}
${d.properties.Year_Total}`
);
tooltip.attr("transform", "translate(" + centroid + ")");
})
.on("mouseleave",function(event, d){tooltip.call(callout, null)});
return svg.node();
}
//Traffic 2019 Chart
chart2 = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [-60, 0, width, height]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], zips);
var path = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
g.selectAll("path") //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','1')
.style("stroke-width", ".25")
.style("stroke", "rgb(0,0,0)")
//Insert NYSTA Lines
var g = svg.append("g").attr("id", "paths");
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(NYSTA_Route.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','0')
.style("stroke-width", ".75")
.style("stroke", "rgb(255,0,0)")
//Insert Traffic 2019
var c = svg.selectAll('circle') //d3 geopath
//svg
.data(Traffic_2019.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',5)
//.attr('r',d => Traffic_2019.get(d.properties.Weekday_3))
.attr('fill','red')
.style('fill-opacity','1')
.on("mouseover",addfill)
.on("mouseout",removefill2)
function addfill(event,d) {
d3.select(this).style('fill','black')
d3.select(this).style('fill-opacity','1')
d3.select(this).attr('r',10)
}
function removefill2(event,d) {
d3.select(this).style('fill','red')
d3.select(this).style('fill-opacity','1')
d3.select(this).attr('r',5)
}
//create tooltip
const tooltip = svg.append("g");
//listen for mouse events and add text/bounding boxes
svg
.selectAll("circle")
.on("touchmove mousemove", function(event, d) {
const centroid = path.centroid(d);
tooltip.call(
callout,
`${d.properties.RCSTA}
${d.properties.TDV_ROUTE}
${d.properties.Year_Total}`
);
tooltip.attr("transform", "translate(" + centroid + ")");
})
.on("mouseleave",function(event, d){tooltip.call(callout, null)});
return svg.node();
}
//Traffic 2020 Chart
chart3 = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [-60, 0, width, height]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], zips);
var path = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
g.selectAll("path") //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','1')
.style("stroke-width", ".25")
.style("stroke", "rgb(0,0,0)")
//Insert NYSTA Lines
var g = svg.append("g").attr("id", "paths");
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(NYSTA_Route.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','0')
.style("stroke-width", ".75")
.style("stroke", "rgb(255,0,0)")
//Insert Traffic 20
var c = svg.selectAll('circle') //d3 geopath
//svg
.data(Traffic_2020.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',5)
.style('fill','blue')
.style('fill-opacity','1')
.on("mouseover",addfill)
.on("mouseout",removefill1)
function addfill(event,d) {
d3.select(this).style('fill','black')
d3.select(this).style('fill-opacity','1')
d3.select(this).attr('r',10)
}
function removefill1(event,d) {
d3.select(this).style('fill','blue')
d3.select(this).style('fill-opacity','1')
d3.select(this).attr('r',5)
}
//create tooltip
const tooltip = svg.append("g");
//listen for mouse events and add text/bounding boxes
svg
.selectAll("circle")
.on("touchmove mousemove", function(event, d) {
const centroid = path.centroid(d);
tooltip.call(
callout,
`${d.properties.RCSTA}
${d.properties.TDV_ROUTE}
${d.properties.Year_Total}`
);
tooltip.attr("transform", "translate(" + centroid + ")");
})
.on("mouseleave",function(event, d){tooltip.call(callout, null)});
return svg.node();
}
callout = (g, value) => {
if (!value) return g.style("display", "none");
g
.style("display", null)
.style("pointer-events", "none")
.style("font", "10px sans-serif");
const path = g.selectAll("path")
.data([null])
.join("path")
.attr("fill", "white")
.attr("stroke", "black");
const text = g.selectAll("text")
.data([null])
.join("text")
.call(text => text
.selectAll("tspan")
.data((value + "").split(/\n/))
.join("tspan")
.attr("x", 0)
.attr("y", (d, i) => `${i * 1.1}em`)
.style("font-weight", (_, i) => i ? null : "bold")
.text(d => d));
const {x, y, width: w, height: h} = text.node().getBBox();
text.attr("transform", `translate(${-w / 2},${15 - y})`);
path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);
}
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.
