xxxxxxxxxx
<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>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js