Skip to content

Instantly share code, notes, and snippets.

@aditeyapandey

aditeyapandey/data7.csv

Last active October 6, 2016 02:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aditeyapandey/eb050f8d019feec3db64409d1eab24e7 to your computer and use it in GitHub Desktop.
Save aditeyapandey/eb050f8d019feec3db64409d1eab24e7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
data7.csv
date close
2/10/10 15.39616973
2/24/10 15.67107591
2/27/10 20.9898365
3/6/10 16.81560488
3/9/10 17.10999281
3/16/10 14.62145676
3/21/10 17.09401709
3/27/10 16.9024784
4/3/10 16.62023249
4/9/10 16.61589587
4/14/10 16.90568905
4/20/10 14.42511667
4/27/10 15.75517611
5/8/10 14.69205454
5/14/10 15.38198599
5/22/10 15.8045977
5/25/10 19.39364183
5/31/10 16.98043559
6/4/10 15.74040441
6/9/10 14.99642942
6/16/10 13.62769147
6/20/10 13.57516413
6/25/10 15.24230001
7/2/10 18.30207484
7/23/10 18.67452963
7/23/10 24.11021814
7/25/10 21.00210021
7/28/10 23.42786683
7/28/10 22.90294875
7/30/10 22.73812936
8/5/10 15.10110059
8/7/10 21.59660625
8/10/10 21.0552806
8/17/10 13.96032329
8/27/10 15.83394864
9/9/10 15.69897832
9/13/10 17.0443725
9/16/10 24.34096594
9/19/10 21.85331082
9/26/10 16.45490523
10/3/10 15.30464915
10/9/10 18.16180517
10/15/10 17.022278
10/17/10 12.28331994
10/24/10 15.4412353
10/31/10 15.34183527
11/7/10 15.77563541
11/14/10 13.43775763
11/20/10 15.46091015
11/27/10 15.89175445
12/4/10 18.61052632
12/14/10 13.75417395
12/21/10 15.56557884
12/28/10 13.53037137
1/11/11 15.77009286
1/17/11 14.47776629
1/22/11 13.76811594
1/30/11 14.81232116
2/7/11 14.22300263
2/14/11 13.51460711
2/21/11 16.8315916
2/27/11 16.10017889
3/6/11 16.13168724
3/11/11 17.15497301
3/21/11 16.45648869
3/27/11 14.60280374
4/3/11 14.79168379
4/11/11 15.58242507
4/17/11 21.33436773
4/22/11 12.33990839
4/29/11 15.1022111
5/5/11 15.56587547
5/11/11 16.31161423
6/16/11 17.29645501
6/18/11 25.98425197
6/25/11 19.92167546
7/2/11 20.05411428
7/15/11 17.12790421
7/16/11 24.84047402
7/17/11 24.07485282
8/2/11 17.71451166
8/10/11 16.36782366
8/27/11 16.4286617
9/5/11 16.1373835
9/14/11 19.83122363
9/30/11 19.29285771
10/7/11 12.62787724
10/15/11 14.12429379
10/18/11 19.90413519
10/21/11 20.46920273
10/27/11 23.50900858
10/30/11 13.72912801
11/5/11 13.55904347
11/13/11 18.23625476
11/26/11 17.65053627
12/3/11 14.94084118
12/10/11 17.30326737
12/18/11 14.17417417
12/25/11 15.66557762
12/31/11 14.33336338
1/7/12 15.09054326
1/9/12 21.07264517
1/13/12 16.63600736
1/18/12 16.93312704
1/29/12 14.03837155
2/4/12 13.74795417
2/14/12 15.02111075
2/20/12 14.4846276
2/25/12 14.07989522
3/7/12 15.09301509
3/12/12 16.08718215
3/19/12 15.18041041
3/24/12 16.04814443
3/29/12 15.77124328
4/5/12 15.87928583
4/7/12 19.23298399
4/10/12 19.87512092
4/15/12 15.98233996
4/20/12 14.1087776
4/26/12 17.8906952
5/2/12 16.07255096
5/10/12 15.04599776
5/18/12 13.77726751
5/23/12 14.5606267
5/27/12 19.20210434
5/29/12 18.70224655
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
<body>
<h2>Part3 : How do the recorded MPG values compare with the EPA’s MPG sticker ? </h2>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 900 - margin.left - margin.right,
height = 420 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%m/%d/%y").parse,
formatDate = d3.time.format("%m/%d/%y"),
bisectDate = d3.bisector(function(d) { return d.date; }).left;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
// Adds the svg canvas
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var lineSvg = svg.append("g");
var focus = svg.append("g")
.style("display", "none");
// Get the data
d3.csv("data7.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
// Add the valueline path.
lineSvg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", width-10)
.attr("y", -10)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Time");
svg.append("text")
.attr("x", width/2)
.attr("y", height/1.5)
.attr("dy", ".71em")
.style("font-size","30px")
.style("text-anchor", "start")
.text("Time vs. MPG");
svg.append("circle")
.attr("cx", width-55)
.attr("cy", 10)
.attr("r",5)
.style("fill", "red");
svg.append("text")
.attr("x", width -45)
.attr("y", 8)
.attr("dy", ".71em")
.style("text-anchor", "start")
.text("EPA's MPG");
svg.append("circle")
.attr("cx", width-55)
.attr("cy", 25)
.attr("r",5)
.style("fill", "steelblue");
svg.append("text")
.attr("x", width -45)
.attr("y", 23)
.attr("dy", ".71em")
.style("text-anchor", "start")
.text("Actual MPG");
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("MPG");
// Adding constant MPG line
svg.append("line")
.style("stroke", "red")
.attr("x1", 0)
.attr("y1", y(22))
.attr("x2", width)
.attr("y2", y(22));
// append the x line
focus.append("line")
.attr("class", "x")
.style("stroke", "blue")
.style("stroke-dasharray", "3,3")
.style("opacity", 0.5)
.attr("y1", 0)
.attr("y2", height);
// append the y line
focus.append("line")
.attr("class", "y")
.style("stroke", "blue")
.style("stroke-dasharray", "3,3")
.style("opacity", 0.5)
.attr("x1", width)
.attr("x2", width);
// append the circle at the intersection
focus.append("circle")
.attr("class", "y")
.style("fill", "none")
.style("stroke", "blue")
.attr("r", 4);
// place the value at the intersection
focus.append("text")
.attr("class", "y1")
.style("stroke", "white")
.style("stroke-width", "3.5px")
.style("opacity", 0.8)
.attr("dx", 8)
.attr("dy", "-.3em");
focus.append("text")
.attr("class", "y2")
.attr("dx", 8)
.attr("dy", "-.3em");
// place the date at the intersection
focus.append("text")
.attr("class", "y3")
.style("stroke", "white")
.style("stroke-width", "3.5px")
.style("opacity", 0.8)
.attr("dx", 8)
.attr("dy", "1em");
focus.append("text")
.attr("class", "y4")
.attr("dx", 8)
.attr("dy", "1em");
// append the rectangle to capture mouse
svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all")
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
focus.select("circle.y")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.close) + ")");
focus.select("text.y1")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.close) + ")")
.text(d.close);
focus.select("text.y2")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.close) + ")")
.text(d.close);
focus.select("text.y3")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.close) + ")")
.text(formatDate(d.date));
focus.select("text.y4")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.close) + ")")
.text(formatDate(d.date));
focus.select(".x")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.close) + ")")
.attr("y2", height - y(d.close));
focus.select(".y")
.attr("transform",
"translate(" + width * -1 + "," +
y(d.close) + ")")
.attr("x2", width + width);
}
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment