Skip to content

Instantly share code, notes, and snippets.

@christophergandrud

christophergandrud/WorldBankData_noNA.csv

Last active August 29, 2015 14:12
Show Gist options
  • Save christophergandrud/9651e1e6e5f97b9af970 to your computer and use it in GitHub Desktop.
Save christophergandrud/9651e1e6e5f97b9af970 to your computer and use it in GitHub Desktop.
Download ZIP
Work in progress example of a D3 line chart
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
/* set the CSS */
body {
font: 15px Arial;
}
path {
stroke: steelblue;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="line_chart_basic.js"></script>
</body>
</html>
Raw
line_chart_basic.js
// Set the dimensions of the canvas / graph
var margin = {
top: 30,
right: 20,
bottom: 30,
left: 100
},
width = 700 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// Parse the year / time
var parseDate = d3.time.format("%b %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(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var priceline = d3.svg.line()
.x(function(d) {
return x(d.year);
})
.y(function(d) {
return y(d.credit);
});
// 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("WorldBankData_noNA.csv", function(error, data) {
data.forEach(function(d) {
d.year = parseDate(d.year);
d.credit = +d.credit;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) {
return d.year;
}));
y.domain([0, d3.max(data, function(d) {
return d.credit;
})]);
// Nest the entries by country
var dataNest = d3.nest()
.key(function(d) {
return d.country;
})
.entries(data);
// Loop through each country / key
dataNest.forEach(function(d) {
var position = d.values[d.values.length - 1].credit;
var lineText = svg.append("g");
lineText
.append("path")
.attr("class", "line")
.attr("d", priceline(d.values))
.style("stroke-opacity", 0.2)
.style("stroke-width", 1);
lineText
.on("mouseover", mouseover)
.on("mouseout", mouseout);
// Add text when line is moused over
lineText
.append("text")
.attr("class", "country-label")
.attr("x", 5)
.attr("y", y(position))
.style("font-weight", 900)
.style("fill", "#d95f0e")
.style("opacity", 0.0)
.text(d.key);
function mouseover() {
d3.select(this).select("path")
.style("stroke-opacity", 1)
.style("stroke-width", 10);
d3.select(this).select("text")
.style("opacity", 1.0);
}
function mouseout() {
d3.select(this).select("path")
.transition().duration(750)
.style("stroke-opacity", 0.2)
.style("stroke-width", 1);
d3.select(this).select("text")
.transition().duration(750)
.style("opacity", 0.0);
}
});
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add Y Axis label
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "-4em")
.style("text-anchor", "end")
.text("Domestic Credit Provided by the Financial Sector");
});
Raw
WorldBankData_noNA.csv
country iso2c year credit
Austria AT Jan 2007 100
Austria AT Jan 2008 102.9
Austria AT Jan 2009 109.8
Austria AT Jan 2010 108.6
Austria AT Jan 2011 107.1
Austria AT Jan 2012 106.1
Austria AT Jan 2013 103.8
Belgium BE Jan 2007 100
Belgium BE Jan 2008 101.5
Belgium BE Jan 2009 106.5
Belgium BE Jan 2010 104.4
Belgium BE Jan 2011 104.7
Belgium BE Jan 2012 104
Belgium BE Jan 2013 102.4
Bulgaria BG Jan 2007 100
Bulgaria BG Jan 2008 116.3
Bulgaria BG Jan 2009 125.6
Bulgaria BG Jan 2010 129.5
Bulgaria BG Jan 2011 127.5
Bulgaria BG Jan 2012 128.1
Bulgaria BG Jan 2013 132.4
Switzerland CH Jan 2007 100
Switzerland CH Jan 2008 98.6
Switzerland CH Jan 2009 104.8
Switzerland CH Jan 2010 103.2
Switzerland CH Jan 2011 104.5
Switzerland CH Jan 2012 108.7
Switzerland CH Jan 2013 103.2
Cyprus CY Jan 2007 100
Cyprus CY Jan 2008 125
Cyprus CY Jan 2009 135.1
Cyprus CY Jan 2010 140.8
Cyprus CY Jan 2011 146.3
Cyprus CY Jan 2012 154.9
Cyprus CY Jan 2013 149.8
Czech Republic CZ Jan 2007 100
Czech Republic CZ Jan 2008 108.7
Czech Republic CZ Jan 2009 117.8
Czech Republic CZ Jan 2010 122.5
Czech Republic CZ Jan 2011 131.4
Czech Republic CZ Jan 2012 132.7
Czech Republic CZ Jan 2013 136.6
Germany DE Jan 2007 100
Germany DE Jan 2008 101.5
Germany DE Jan 2009 106.6
Germany DE Jan 2010 105.2
Germany DE Jan 2011 99.4
Germany DE Jan 2012 98.5
Germany DE Jan 2013 94.1
Denmark DK Jan 2007 100
Denmark DK Jan 2008 102.1
Denmark DK Jan 2009 107.9
Denmark DK Jan 2010 105.1
Denmark DK Jan 2011 100.4
Denmark DK Jan 2012 100.7
Denmark DK Jan 2013 99.8
Estonia EE Jan 2007 100
Estonia EE Jan 2008 105.9
Estonia EE Jan 2009 115.4
Estonia EE Jan 2010 107.6
Estonia EE Jan 2011 93.3
Estonia EE Jan 2012 85.2
Estonia EE Jan 2013 80.1
Spain ES Jan 2007 100
Spain ES Jan 2008 108.5
Spain ES Jan 2009 115.5
Spain ES Jan 2010 118.1
Spain ES Jan 2011 118.6
Spain ES Jan 2012 114.3
Spain ES Jan 2013 106.5
Finland FI Jan 2007 100
Finland FI Jan 2008 102.7
Finland FI Jan 2009 113.8
Finland FI Jan 2010 118
Finland FI Jan 2011 119.1
Finland FI Jan 2012 124
Finland FI Jan 2013 127.8
France FR Jan 2007 100
France FR Jan 2008 101.8
France FR Jan 2009 105.8
France FR Jan 2010 108.7
France FR Jan 2011 109.3
France FR Jan 2012 112
France FR Jan 2013 110.5
United Kingdom GB Jan 2007 100
United Kingdom GB Jan 2008 113.2
United Kingdom GB Jan 2009 121.1
United Kingdom GB Jan 2010 117.5
United Kingdom GB Jan 2011 112
United Kingdom GB Jan 2012 109.9
United Kingdom GB Jan 2013 103.4
Greece GR Jan 2007 100
Greece GR Jan 2008 102.4
Greece GR Jan 2009 103.6
Greece GR Jan 2010 134.2
Greece GR Jan 2011 141.2
Greece GR Jan 2012 124.1
Greece GR Jan 2013 123.3
Croatia HR Jan 2007 100
Croatia HR Jan 2008 104.4
Croatia HR Jan 2009 109.4
Croatia HR Jan 2010 128.2
Croatia HR Jan 2011 135.8
Croatia HR Jan 2012 135.9
Croatia HR Jan 2013 133
Hungary HU Jan 2007 100
Hungary HU Jan 2008 107.3
Hungary HU Jan 2009 107.2
Hungary HU Jan 2010 109.1
Hungary HU Jan 2011 102.4
Hungary HU Jan 2012 90.9
Hungary HU Jan 2013 87.1
Ireland IE Jan 2007 100
Ireland IE Jan 2008 106.1
Ireland IE Jan 2009 113.6
Ireland IE Jan 2010 117.2
Ireland IE Jan 2011 109.7
Ireland IE Jan 2012 101.7
Ireland IE Jan 2013 98.9
Iceland IS Jan 2007 100
Iceland IS Jan 2008 59.5
Iceland IS Jan 2009 57.7
Iceland IS Jan 2010 52.8
Iceland IS Jan 2011 47.4
Iceland IS Jan 2012 46.1
Iceland IS Jan 2013 43.8
Italy IT Jan 2007 100
Italy IT Jan 2008 102.9
Italy IT Jan 2009 110.5
Italy IT Jan 2010 121.8
Italy IT Jan 2011 122.5
Italy IT Jan 2012 130.6
Italy IT Jan 2013 130.8
Japan JP Jan 2007 100
Japan JP Jan 2008 101
Japan JP Jan 2009 110.6
Japan JP Jan 2010 109.8
Japan JP Jan 2011 113
Japan JP Jan 2012 116.3
Japan JP Jan 2013 122.5
Lithuania LT Jan 2007 100
Lithuania LT Jan 2008 107.3
Lithuania LT Jan 2009 116.9
Lithuania LT Jan 2010 107.2
Lithuania LT Jan 2011 95.7
Lithuania LT Jan 2012 87.3
Lithuania LT Jan 2013 85.7
Luxembourg LU Jan 2007 100
Luxembourg LU Jan 2008 101.2
Luxembourg LU Jan 2009 103.1
Luxembourg LU Jan 2010 99.7
Luxembourg LU Jan 2011 90.8
Luxembourg LU Jan 2012 89.1
Luxembourg LU Jan 2013 86
Latvia LV Jan 2007 100
Latvia LV Jan 2008 99.9
Latvia LV Jan 2009 105.4
Latvia LV Jan 2010 100.1
Latvia LV Jan 2011 87.9
Latvia LV Jan 2012 70.3
Latvia LV Jan 2013 65.4
Malta MT Jan 2007 100
Malta MT Jan 2008 105.9
Malta MT Jan 2009 115.7
Malta MT Jan 2010 114.5
Malta MT Jan 2011 111.8
Malta MT Jan 2012 111.5
Malta MT Jan 2013 107.8
Netherlands NL Jan 2007 100
Netherlands NL Jan 2008 98.7
Netherlands NL Jan 2009 111.6
Netherlands NL Jan 2010 106.6
Netherlands NL Jan 2011 106.6
Netherlands NL Jan 2012 108.7
Netherlands NL Jan 2013 104
Poland PL Jan 2007 100
Poland PL Jan 2008 130.4
Poland PL Jan 2009 132.1
Poland PL Jan 2010 136.4
Poland PL Jan 2011 141.6
Poland PL Jan 2012 137.3
Poland PL Jan 2013 143.3
Portugal PT Jan 2007 100
Portugal PT Jan 2008 106.9
Portugal PT Jan 2009 117.2
Portugal PT Jan 2010 125.6
Portugal PT Jan 2011 123.9
Portugal PT Jan 2012 121.1
Portugal PT Jan 2013 114.7
Romania RO Jan 2007 100
Romania RO Jan 2008 133.4
Romania RO Jan 2009 148.6
Romania RO Jan 2010 154.9
Romania RO Jan 2011 155.7
Romania RO Jan 2012 156.2
Romania RO Jan 2013 149.6
Sweden SE Jan 2007 100
Sweden SE Jan 2008 103
Sweden SE Jan 2009 110.1
Sweden SE Jan 2010 108.9
Sweden SE Jan 2011 110.2
Sweden SE Jan 2012 113.1
Sweden SE Jan 2013 111.6
Slovenia SI Jan 2007 100
Slovenia SI Jan 2008 106.4
Slovenia SI Jan 2009 113.3
Slovenia SI Jan 2010 118.4
Slovenia SI Jan 2011 113.8
Slovenia SI Jan 2012 114.4
Slovenia SI Jan 2013 102.9
Slovak Republic SK Jan 2007 100
Slovak Republic SK Jan 2008 105.2
United States US Jan 2007 100
United States US Jan 2008 92
United States US Jan 2009 98.2
United States US Jan 2010 96.4
United States US Jan 2011 96.4
United States US Jan 2012 98.6
United States US Jan 2013 102
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment