Published
Edited
Apr 15, 2021
1 fork
3 stars
md`# NYC Taxi Rides - D3 Arc Diagram`
{
const svgBackgroundColor = "#3d405b",
svg = d3.create("svg")
.attr("viewBox", [0,0,2000,2000])
.style("background-color", svgBackgroundColor),
fontFamily = "Assistant",
circleBackground = "#3d405b",
circleOpacity = 0.9,
arcOpacity = 0.7,
fontColor = '#a5abaf'
const linkNums = linkNumsArray[0],
labelText = labelTextArray[0];
const links = [];
const parseddata = data.map(function(d){
let dataObject =
{
pu_name: d.pu_name,
bronx: d.Bronx,
brooklyn: d.Brooklyn,
statenIsland: d['Staten Island'],
newark: d['Newark Airport'],
queens: d.Queens,
jfk: d['JFK Airport'],
laguardia: d['LaGuardia Airport'],
manhattan: d.Manhattan
};
for(let prop in dataObject){
if(prop != 'pu_name'){
let link = {'source': linkNums[dataObject['pu_name']],'target': linkNums[prop], 'count': dataObject[prop]};
links.push(link);
}
}
return dataObject;
});
const nodes = data.map(function(d,i){return linkNums[d.pu_name];});
const x = d3.scalePoint()
.range([0, width])
.domain(nodes),
lineScale = d3.scaleLinear() //scale for arc thickness
.domain([0,maxCount])
.range([10,700]);
//arcs
svg
.selectAll('links')
.data(links)
.join('path')
.attr('d', function (d) {
const start = x(d.source) // x-position of start node
const end = x(d.target) // x-position of end node
return ['M', start, 500, //starting coordinate
'A',
(start - end)/2, //rx - x-axis radius
',',
(start - end)/2, //ry - y-axis radius
0, //x-axis rotation
0, //large-arc-flag
',',
0, //sweep flag
end, //ending x
',',
500 //ending y
]
.join(' ');
})
.style("fill", "none")
.attr("stroke", d => color[d.source])
.attr("stroke-width", d => lineScale(d.count))
.attr("opacity", arcOpacity)
.attr("transform", "translate(235,500)");
const locations = svg
.selectAll("nodes")
.data(nodes);
//circles
locations
.join("circle")
.attr("cx", d => x(d))
.attr("cy", 500)
.attr("r", 80)
.attr("fill", circleBackground)
.attr("stroke", d => color[d])
.attr("stroke-width", 10)
.attr("opacity", circleOpacity)
.attr("transform", "translate(235,500)");
//circle text
locations
.join("text")
.attr("x", d => x(d))
.attr("y", 510)
.text(d =>labelText[d])
.attr("fill", d => color[d])
.attr("stroke", d => color[d])
.style("text-anchor", "middle")
.style("font-weight", "bold")
.style("font-family", fontFamily)
.style("font-size", "1.65em")
.attr("transform", "translate(235,500)")
yield svg.node();
}
labelTextArray = [{0: 'Bronx', 1: 'Brooklyn', 2: 'Manhattan', 3: 'Queens', 4: 'Staten Island', 5: 'JFK', 6: 'LaGuardia', 7: 'Newark'}]
linkNumsArray = [{'bronx': 0, 'Bronx': 0, 'brooklyn': 1, 'Brooklyn': 1, 'manhattan': 2, 'Manhattan': 2, 'queens': 3, 'Queens': 3, 'statenIsland': 4, 'Staten Island': 4, 'jfk': 5, 'JFK Airport': 5, 'laguardia': 6, 'LaGuardia Airport': 6, 'newark': 7, 'Newark Airpot': 7, 'Newark Airport': 7}]
color = ["#739dff","#2fe0cb","#C879FF","#f4a261","#e76f51","#a3f7b5","#d264b6","#e9c46a"]
height = 2000 - 950
width = 1530
maxCount = 7040954
d3 = require("d3@6")
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.
