Skip to content

Instantly share code, notes, and snippets.

@lvngd
Created September 3, 2020 17:57
Show Gist options
  • Save lvngd/fc30d70754c785c65782f43b8f7791f1 to your computer and use it in GitHub Desktop.
Save lvngd/fc30d70754c785c65782f43b8f7791f1 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="http://d3js.org/d3.v4.js"></script>
<link href="https://fonts.googleapis.com/css?family=Assistant&display=swap" rel="stylesheet">
</head>
<body>
<div id="chart"></div>
</body>
<script>
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
d3.select("#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.top - margin.bottom;
//get node names
var nodes = d3.map(data, function(d,i){return d.do_name;}).keys();
//x axis
var x = d3.scalePoint()
.range([0, width])
.domain(nodes);
//the max count of rides - used to scale the arc thickness
var maxCount = d3.max(data.map((d) => {return d.count}));
//scale thickness of arc lines
var lineScale = d3.scaleLinear()
.domain([0,maxCount])
.range([2,700]);
var svg = d3.select("#chart")
.append('div')
.classed('svg-container', true)
.append('svg')
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 2000 2000")
.classed('svg-content-responsive', true)
.style('background-color', svgBackgroundColor)
.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//arcs between the nodes
svg
.selectAll('links')
.data(data)
.enter()
.append('path')
.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);
//circles
var labels = svg.append("g");
var node = labels
.selectAll("nodes")
.data(nodes)
.enter()
.append("circle")
.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
svg
.selectAll("labels")
.data(nodes)
.enter()
.append("text")
.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");
}
d3.queue()
.defer(d3.json, "taxi_data.json")
.await(drawGraph)
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment