| <!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