Skip to content

Instantly share code, notes, and snippets.

@MNoichl

MNoichl/.block

Created Apr 3, 2018
Embed
What would you like to do?
Journalsample over time
license: mit
date close
1951 1.0
1956 4.0
1957 6.0
1958 12.0
1959 4.0
1960 7.0
1961 10.0
1962 14.0
1963 13.0
1964 19.0
1965 13.0
1966 18.0
1967 27.0
1968 23.0
1969 25.0
1970 34.0
1971 31.0
1972 20.0
1973 14.0
1974 31.0
1975 53.0
1976 46.0
1977 65.0
1978 53.0
1979 63.0
1980 78.0
1981 68.0
1982 93.0
1983 78.0
1984 84.0
1985 77.0
1986 78.0
1987 65.0
1988 65.0
1989 80.0
1990 81.0
1991 86.0
1992 80.0
1993 85.0
1994 94.0
1995 96.0
1996 89.0
1997 95.0
1998 113.0
1999 111.0
2000 140.0
2001 151.0
2002 132.0
2003 160.0
2004 126.0
2005 148.0
2006 132.0
2007 170.0
2008 138.0
2009 137.0
2010 115.0
2011 116.0
2012 107.0
2013 89.0
2014 65.0
2015 52.0
2016 36.0
2017 20.0
<!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>
<!-- 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 = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%Y").parse;
// 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(9);
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 + ")");
// Get the data
d3.csv("data.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.
svg.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);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.