Built with blockbuilder.org
Working through the book Getting Started with D3
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| svg { width:100%; height: 100%; margin-left:20px; margin-top:50px;} | |
| .axis{ | |
| font-family: arial; | |
| font-size:0.6em; | |
| } | |
| path{ | |
| fill:none; | |
| stroke:black; | |
| stroke-width:2px; | |
| } | |
| .tick{ | |
| fill:none; | |
| stroke:black; | |
| } | |
| circle{ | |
| stroke:black; | |
| stroke-width:0.5px; | |
| } | |
| circle.times_square{ | |
| fill:DeepPink; | |
| } | |
| circle.grand_central{ | |
| fill:MediumSeaGreen; | |
| } | |
| path.times_square{ | |
| stroke:DeepPink; | |
| } | |
| path.grand_central{ | |
| stroke:MediumSeaGreen; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| d3.json("turnstile_traffic.json", draw); | |
| function draw(data) { | |
| "use strict"; | |
| var margin = 40, | |
| width = 700 - margin, | |
| height = 300 - margin; | |
| var count_extent = d3.extent( | |
| data.times_square.concat(data.grand_central), | |
| function(d) { return d.count} | |
| ); | |
| var count_scale = d3.scale.linear() | |
| .domain(count_extent) | |
| .range([height, margin]); | |
| var time_extent = d3.extent( | |
| data.times_square.concat(data.grand_central), | |
| function(d) { return d.time} | |
| ); | |
| var time_scale = d3.time.scale() | |
| .domain(time_extent) | |
| .range([margin, width]); | |
| var time_axis = d3.svg.axis() | |
| .scale(time_scale); | |
| var count_axis = d3.svg.axis() | |
| .scale(count_scale) | |
| .orient("left"); | |
| var line = d3.svg.line() | |
| .x(function(d){return time_scale(d.time)}) | |
| .y(function(d){return count_scale(d.count)}); | |
| d3.select("body") | |
| .append("svg") | |
| .attr("width", width+margin) | |
| .attr("height", height+margin) | |
| .attr("class", "chart"); | |
| d3.select("svg") | |
| .append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0,"+height+")") | |
| .call(time_axis); | |
| d3.select("svg") | |
| .append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate("+margin+",0)") | |
| .call(count_axis); | |
| d3.select("svg") | |
| .selectAll("circle.times_square") | |
| .data(data.times_square) | |
| .enter() | |
| .append("circle") | |
| .attr("class", "times_square"); | |
| d3.select("svg") | |
| .selectAll("circle.grand_central") | |
| .data(data.grand_central) | |
| .enter() | |
| .append("circle") | |
| .attr("class", "grand_central") | |
| d3.selectAll("circle") | |
| .attr("cy", function(d) {return count_scale(d.count);}) | |
| .attr("cx", function(d) {return time_scale(d.time);}) | |
| .attr("r", 3); | |
| d3.select("svg") | |
| .append("path") | |
| .attr("d", line(data.times_square)) | |
| .attr("class", "times_square"); | |
| d3.select("svg") | |
| .append("path") | |
| .attr("d", line(data.grand_central)) | |
| .attr("class", "grand_central"); | |
| d3.select(".y.axis") | |
| .append("text") | |
| .text("Mean Number of Turnstile Revolutions") | |
| .attr("transform", "rotate (90, "+ -margin + ", 0)") | |
| .attr("x", 20) | |
| .attr("y", 0); | |
| d3.select(".x.axis") | |
| .append("text") | |
| .text("Time") | |
| .attr("x", function(){return (width/1.6)-margin}) | |
| .attr("y", margin/1.5); | |
| } | |
| </script> | |
| </body> |
| { | |
| "times_square": [ | |
| { | |
| "count": 36.333333333333336, | |
| "time": 1328356800000 | |
| }, | |
| { | |
| "count": 87.36111111111111, | |
| "time": 1328371200000 | |
| }, | |
| { | |
| "count": 216.22222222222223, | |
| "time": 1328385600000 | |
| }, | |
| { | |
| "count": 418.80555555555554, | |
| "time": 1328400000000 | |
| }, | |
| { | |
| "count": 351.1111111111111, | |
| "time": 1328414400000 | |
| }, | |
| { | |
| "count": 213.94444444444446, | |
| "time": 1328428800000 | |
| }, | |
| { | |
| "count": 29.36111111111111, | |
| "time": 1328443200000 | |
| }, | |
| { | |
| "count": 69.44444444444444, | |
| "time": 1328457600000 | |
| }, | |
| { | |
| "count": 152.41666666666666, | |
| "time": 1328472000000 | |
| }, | |
| { | |
| "count": 291.80555555555554, | |
| "time": 1328486400000 | |
| }, | |
| { | |
| "count": 205.44444444444446, | |
| "time": 1328500800000 | |
| }, | |
| { | |
| "count": 98.38888888888889, | |
| "time": 1328515200000 | |
| }, | |
| { | |
| "count": 34.77777777777778, | |
| "time": 1328529600000 | |
| }, | |
| { | |
| "count": 245.33333333333334, | |
| "time": 1328544000000 | |
| }, | |
| { | |
| "count": 274.6111111111111, | |
| "time": 1328558400000 | |
| }, | |
| { | |
| "count": 758.4722222222222, | |
| "time": 1328572800000 | |
| }, | |
| { | |
| "count": 391.97222222222223, | |
| "time": 1328587200000 | |
| }, | |
| { | |
| "count": 88.66666666666667, | |
| "time": 1328601600000 | |
| }, | |
| { | |
| "count": 39.833333333333336, | |
| "time": 1328616000000 | |
| }, | |
| { | |
| "count": 20, | |
| "time": 1328618993000 | |
| }, | |
| { | |
| "count": 140, | |
| "time": 1328630400000 | |
| }, | |
| { | |
| "count": 328.94444444444446, | |
| "time": 1328644800000 | |
| }, | |
| { | |
| "count": 788.8611111111111, | |
| "time": 1328659200000 | |
| }, | |
| { | |
| "count": 441.77777777777777, | |
| "time": 1328673600000 | |
| }, | |
| { | |
| "count": 101.33333333333333, | |
| "time": 1328688000000 | |
| }, | |
| { | |
| "count": 37.388888888888886, | |
| "time": 1328702400000 | |
| }, | |
| { | |
| "count": 264.27777777777777, | |
| "time": 1328716800000 | |
| }, | |
| { | |
| "count": 293.75, | |
| "time": 1328731200000 | |
| }, | |
| { | |
| "count": 794.3333333333334, | |
| "time": 1328745600000 | |
| }, | |
| { | |
| "count": 434.3888888888889, | |
| "time": 1328760000000 | |
| }, | |
| { | |
| "count": 104.02777777777777, | |
| "time": 1328774400000 | |
| }, | |
| { | |
| "count": 36.69444444444444, | |
| "time": 1328788800000 | |
| }, | |
| { | |
| "count": 253.97222222222223, | |
| "time": 1328803200000 | |
| }, | |
| { | |
| "count": 329.5625, | |
| "time": 1328817600000 | |
| }, | |
| { | |
| "count": 70, | |
| "time": 1328832000000 | |
| }, | |
| { | |
| "count": 467.3333333333333, | |
| "time": 1328846400000 | |
| }, | |
| { | |
| "count": 120.86111111111111, | |
| "time": 1328860800000 | |
| }, | |
| { | |
| "count": 39.138888888888886, | |
| "time": 1328875200000 | |
| }, | |
| { | |
| "count": 249.66666666666666, | |
| "time": 1328889600000 | |
| }, | |
| { | |
| "count": 334.30555555555554, | |
| "time": 1328904000000 | |
| }, | |
| { | |
| "count": 815.8611111111111, | |
| "time": 1328918400000 | |
| }, | |
| { | |
| "count": 475.05555555555554, | |
| "time": 1328932800000 | |
| } | |
| ], | |
| "grand_central": [ | |
| { | |
| "count": 22.842105263157894, | |
| "time": 1328356800000 | |
| }, | |
| { | |
| "count": 143.57894736842104, | |
| "time": 1328371200000 | |
| }, | |
| { | |
| "count": 329.94736842105266, | |
| "time": 1328385600000 | |
| }, | |
| { | |
| "count": 411.57894736842104, | |
| "time": 1328400000000 | |
| }, | |
| { | |
| "count": 255.42105263157896, | |
| "time": 1328414400000 | |
| }, | |
| { | |
| "count": 89.57894736842105, | |
| "time": 1328428800000 | |
| }, | |
| { | |
| "count": 14.368421052631579, | |
| "time": 1328443200000 | |
| }, | |
| { | |
| "count": 99.84210526315789, | |
| "time": 1328457600000 | |
| }, | |
| { | |
| "count": 220.31578947368422, | |
| "time": 1328472000000 | |
| }, | |
| { | |
| "count": 301.7368421052632, | |
| "time": 1328486400000 | |
| }, | |
| { | |
| "count": 141.89473684210526, | |
| "time": 1328500800000 | |
| }, | |
| { | |
| "count": 75, | |
| "time": 1328515200000 | |
| }, | |
| { | |
| "count": 56.31578947368421, | |
| "time": 1328529600000 | |
| }, | |
| { | |
| "count": 606.6666666666666, | |
| "time": 1328538796000 | |
| }, | |
| { | |
| "count": 196.58333333333334, | |
| "time": 1328544000000 | |
| }, | |
| { | |
| "count": 405.2105263157895, | |
| "time": 1328558400000 | |
| }, | |
| { | |
| "count": 27.857142857142858, | |
| "time": 1328560024000 | |
| }, | |
| { | |
| "count": 683.7142857142857, | |
| "time": 1328572800000 | |
| }, | |
| { | |
| "count": 492.2105263157895, | |
| "time": 1328587200000 | |
| }, | |
| { | |
| "count": 73, | |
| "time": 1328601600000 | |
| }, | |
| { | |
| "count": 72.57894736842105, | |
| "time": 1328616000000 | |
| }, | |
| { | |
| "count": 767.6842105263158, | |
| "time": 1328630400000 | |
| }, | |
| { | |
| "count": 467.2105263157895, | |
| "time": 1328644800000 | |
| }, | |
| { | |
| "count": 1003.578947368421, | |
| "time": 1328659200000 | |
| }, | |
| { | |
| "count": 501.63157894736844, | |
| "time": 1328673600000 | |
| }, | |
| { | |
| "count": 73.42105263157895, | |
| "time": 1328688000000 | |
| }, | |
| { | |
| "count": 62.1578947368421, | |
| "time": 1328702400000 | |
| }, | |
| { | |
| "count": 531, | |
| "time": 1328716800000 | |
| }, | |
| { | |
| "count": 405.6842105263158, | |
| "time": 1328731200000 | |
| }, | |
| { | |
| "count": 1038.3157894736842, | |
| "time": 1328745600000 | |
| }, | |
| { | |
| "count": 511.3157894736842, | |
| "time": 1328760000000 | |
| }, | |
| { | |
| "count": 79.15789473684211, | |
| "time": 1328774400000 | |
| }, | |
| { | |
| "count": 63.05263157894737, | |
| "time": 1328788800000 | |
| }, | |
| { | |
| "count": 536.6842105263158, | |
| "time": 1328803200000 | |
| }, | |
| { | |
| "count": 458.2105263157895, | |
| "time": 1328817600000 | |
| }, | |
| { | |
| "count": 1025.2105263157894, | |
| "time": 1328832000000 | |
| }, | |
| { | |
| "count": 561.8421052631579, | |
| "time": 1328846400000 | |
| }, | |
| { | |
| "count": 101.89473684210526, | |
| "time": 1328860800000 | |
| }, | |
| { | |
| "count": 58.78947368421053, | |
| "time": 1328875200000 | |
| }, | |
| { | |
| "count": 481.3157894736842, | |
| "time": 1328889600000 | |
| }, | |
| { | |
| "count": 479.89473684210526, | |
| "time": 1328904000000 | |
| }, | |
| { | |
| "count": 1072.421052631579, | |
| "time": 1328918400000 | |
| }, | |
| { | |
| "count": 508.8421052631579, | |
| "time": 1328932800000 | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment