Skip to content

Instantly share code, notes, and snippets.

Created September 3, 2020 17:57
What would you like to do?
<!DOCTYPE html>
<meta charset="utf-8">
<script src=""></script>
<link href="" rel="stylesheet">
<div id="chart"></div>
var drawGraph = function(error,data){
if (error) throw error;
//fonts and colors
var fontFamily = "Assistant";
var svgBackgroundColor = "#3d405b";
var color = ["#739dff","#2fe0cb","#C879FF","#f4a261","#e76f51","#a3f7b5","#d264b6","#e9c46a"];
var circleBackground = "#3d405b";
var circleOpacity = 0.9;
var arcOpacity = 0.7
//size of the container div"#chart")
.style("width", "400px")
.style("height", "400px");
const margin = {top: 500, right: 135, bottom: 250, left: 135},
width = 2000-margin.right - margin.left,
height = 2000 - - margin.bottom;
//get node names
var nodes =, function(d,i){return d.do_name;}).keys();
//x axis
var x = d3.scalePoint()
.range([0, width])
//the max count of rides - used to scale the arc thickness
var maxCount = d3.max( => {return d.count}));
//scale thickness of arc lines
var lineScale = d3.scaleLinear()
var svg ="#chart")
.classed('svg-container', true)
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 2000 2000")
.classed('svg-content-responsive', true)
.style('background-color', svgBackgroundColor)
.attr("transform", "translate(" + margin.left + "," + + ")");
//arcs between the nodes
.attr('d', function (d) {
start = x(d.pu_name) // x position of start node
end = x(d.do_name) // x position of end node
var arc = ['M', start, (height/2)-100,'A',(start - end)/2,(start - end)/2, 0, 0,0, end, (height/2)-100].join(' ');
return arc;
.style("fill", "none")
.attr("stroke", function(d){return color[nodes.indexOf(d.pu_name)];})
.attr("stroke-width", function(d){return lineScale(d.count);})
.attr("opacity", arcOpacity);
var labels = svg.append("g");
var node = labels
.attr("cx", function(d){return(x(d))})
.attr("cy", (height/2)-120)
.attr("r", 80)
.attr("fill", circleBackground)
.attr("stroke", function(d){return color[nodes.indexOf(d)];})
.attr("stroke-width", 10)
.attr("opacity", circleOpacity);
//add text labels
.attr("x", function(d){return(x(d))})
.attr("y", (height/2)-110)
.text(function(d){ var s = d.replace(' Airport','');return(s);})
.attr("fill", function(d){return color[nodes.indexOf(d)]})
.attr("stroke", function(d){return color[nodes.indexOf(d)]})
.style("text-anchor", "middle")
.style("font-weight", "bold")
.style("font-family", fontFamily)
.style("font-size", "1.65em");
.defer(d3.json, "taxi_data.json")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment