Skip to content

Instantly share code, notes, and snippets.

@martinnormark
Forked from mbostock/.block
Last active April 28, 2016 13:03
Show Gist options
  • Save martinnormark/169e466878c62e18b0f8dcfbd2f62d5d to your computer and use it in GitHub Desktop.
Save martinnormark/169e466878c62e18b0f8dcfbd2f62d5d to your computer and use it in GitHub Desktop.
Line Chart
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #ddd;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: #5DFFC9;
stroke-width: 1.5px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatDate = d3.time.format("%d-%b-%y");
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); })
.interpolate("step-after");
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 + ")");
d3.tsv("testdata.tsv", type, function(error, data) {
if (error) throw error;
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.close; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
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("Price ($)");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
function type(d) {
d.date = formatDate.parse(d.date);
d.close = +d.close;
return d;
}
</script>
date close
24-Apr-07 93.24
25-Apr-07 95.35
26-Apr-07 98.84
27-Apr-07 99.92
30-Apr-07 99.80
1-May-07 99.47
2-May-07 100.39
3-May-07 100.40
4-May-07 100.81
7-May-07 103.92
8-May-07 105.06
9-May-07 106.88
10-May-07 107.34
11-May-07 108.74
14-May-07 109.36
15-May-07 107.52
16-May-07 107.34
17-May-07 109.44
18-May-07 110.02
21-May-07 111.98
22-May-07 113.54
23-May-07 112.89
24-May-07 110.69
25-May-07 113.62
29-May-07 114.35
30-May-07 118.77
31-May-07 121.19
1-Jun-07 118.40
4-Jun-07 121.33
5-Jun-07 122.67
6-Jun-07 123.64
7-Jun-07 124.07
8-Jun-07 124.49
11-Jun-07 120.19
12-Jun-07 120.38
13-Jun-07 117.50
14-Jun-07 118.75
15-Jun-07 120.50
18-Jun-07 125.09
19-Jun-07 123.66
20-Jun-07 121.55
21-Jun-07 123.90
22-Jun-07 123.00
25-Jun-07 122.34
26-Jun-07 119.65
27-Jun-07 121.89
28-Jun-07 120.56
29-Jun-07 122.04
2-Jul-07 121.26
3-Jul-07 127.17
5-Jul-07 132.75
6-Jul-07 132.30
9-Jul-07 130.33
10-Jul-07 132.35
11-Jul-07 132.39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment