Skip to content

Instantly share code, notes, and snippets.

@curran

curran/README.md

Last active January 20, 2016 01:14
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 curran/b1014a71757ce72444e1 to your computer and use it in GitHub Desktop.
Save curran/b1014a71757ce72444e1 to your computer and use it in GitHub Desktop.
Download ZIP
Multi-Line Chart of Largest Countries
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Example</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-legend/1.1.0/d3-legend.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
body {
margin: 0px;
}
.chart-line {
fill: none;
stroke-width: 5px;
}
.axis text {
font-family: 'Open Sans', sans-serif;
font-size: 12pt;
}
.axis .label {
font-size: 18pt;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.color-legend text {
font-family: 'Open Sans', sans-serif;
font-size: 12pt;
}
</style>
</head>
<body>
<script>
var outerWidth = 960;
var outerHeight = 500;
var margin = { left: 86, top: 5, right: 5, bottom: 56 };
var xColumn = "year";
var yColumn = "population";
var colorColumn = "country";
var lineColumn = colorColumn;
var xAxisLabelText = "Time";
var xAxisLabelOffset = 48;
var yAxisLabelText = "Population";
var yAxisLabelOffset = 60;
var innerWidth = outerWidth - margin.left - margin.right;
var innerHeight = outerHeight - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xAxisG = g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + innerHeight + ")")
var xAxisLabel = xAxisG.append("text")
.style("text-anchor", "middle")
.attr("transform", "translate(" + (innerWidth / 2) + "," + xAxisLabelOffset + ")")
.attr("class", "label")
.text(xAxisLabelText);
var yAxisG = g.append("g")
.attr("class", "y axis");
var yAxisLabel = yAxisG.append("text")
.style("text-anchor", "middle")
.attr("transform", "translate(-" + yAxisLabelOffset + "," + (innerHeight / 2) + ") rotate(-90)")
.attr("class", "label")
.text(yAxisLabelText);
var colorLegendG = g.append("g")
.attr("class", "color-legend")
.attr("transform", "translate(16, 2)");
var xScale = d3.time.scale().range([0, innerWidth]);
var yScale = d3.scale.linear().range([innerHeight, 0]);
var colorScale = d3.scale.category10();
// Use a modified SI formatter that uses "B" for Billion.
var siFormat = d3.format("s");
var customTickFormat = function (d){
return siFormat(d).replace("G", "B");
};
var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
.ticks(10)
.outerTickSize(0);
var yAxis = d3.svg.axis().scale(yScale).orient("left")
.ticks(13)
.tickFormat(customTickFormat)
.outerTickSize(0);
var line = d3.svg.line()
.x(function(d) { return xScale(d[xColumn]); })
.y(function(d) { return yScale(d[yColumn]); });
var colorLegend = d3.legend.color()
.scale(colorScale)
.shapePadding(3)
.shapeWidth(15)
.shapeHeight(15)
.labelOffset(4);
function render(data){
xScale.domain(d3.extent(data, function (d){ return d[xColumn]; }));
yScale.domain([0, d3.max(data, function (d){ return d[yColumn]; })]);
xAxisG.call(xAxis);
yAxisG.call(yAxis);
var nested = d3.nest()
.key(function (d){ return d[lineColumn]; })
.entries(data);
colorScale.domain(nested.map(function (d){ return d.key; }));
var paths = g.selectAll(".chart-line").data(nested);
paths.enter().append("path").attr("class", "chart-line");
paths.exit().remove();
paths
.attr("d", function (d){ return line(d.values); })
.attr("stroke", function (d){ return colorScale(d.key); });
colorLegendG.call(colorLegend);
}
function type(d){
d.year = new Date(d.year);
d.population = +d.population;
return d;
}
d3.csv("populationByCountryByYear.csv", type, render);
</script>
</body>
</html>
Raw
populationByCountryByYear.csv
country year population
China 1950 544112923
China 1951 558820362
China 1952 570764965
China 1953 580886559
China 1954 589955812
China 1955 598574241
China 1956 607167524
China 1957 615992182
China 1958 625155626
China 1959 634649557
China 1960 644450173
China 1961 654625069
China 1962 665426760
China 1963 677332765
China 1964 690932043
China 1965 706590947
China 1966 724490033
China 1967 744365635
China 1968 765570668
China 1969 787191243
China 1970 808510713
China 1971 829367784
China 1972 849787991
China 1973 869474823
China 1974 888132761
China 1975 905580445
China 1976 921688199
China 1977 936554514
China 1978 950537317
China 1979 964155176
China 1980 977837433
China 1981 991553829
China 1982 1005328574
China 1983 1019698475
China 1984 1035328572
China 1985 1052622409.9999999
China 1986 1071834975.0000001
China 1987 1092646739
China 1988 1114162025
China 1989 1135128009
China 1990 1154605773
China 1991 1172327831
China 1992 1188450231
China 1993 1202982955
China 1994 1216067023
China 1995 1227841281
China 1996 1238234851
China 1997 1247259143
China 1998 1255262566
China 1999 1262713651
China 2000 1269974572
China 2001 1277188787
China 2002 1284349938
China 2003 1291485488
China 2004 1298573031
China 2005 1305600630
China 2006 1312600877
China 2007 1319625197
China 2008 1326690636
China 2009 1333807063
China 2010 1340968737
China 2011 1348174478
China 2012 1355386952
China 2013 1362514260
China 2014 1369435670
China 2015 1376048943
India 1950 376325205
India 1951 382231042
India 1952 388515758
India 1953 395137696
India 1954 402065915
India 1955 409280196
India 1956 416771502
India 1957 424541513
India 1958 432601236
India 1959 440968677
India 1960 449661874
India 1961 458691457
India 1962 468054145
India 1963 477729958
India 1964 487690114
India 1965 497920270
India 1966 508402908
India 1967 519162069
India 1968 530274729.00000006
India 1969 541844848
India 1970 553943226
India 1971 566605402
India 1972 579800632
India 1973 593451889
India 1974 607446519
India 1975 621703641
India 1976 636182810
India 1977 650907559
India 1978 665936435
India 1979 681358553
India 1980 697229745
India 1981 713561406
India 1982 730303461
India 1983 747374856
India 1984 764664278
India 1985 782085127
India 1986 799607235
India 1987 817232241
India 1988 834944397
India 1989 852736160
India 1990 870601776
India 1991 888513869
India 1992 906461358
India 1993 924475633
India 1994 942604211
India 1995 960874982
India 1996 979290432
India 1997 997817250
India 1998 1016402907
India 1999 1034976626
India 2000 1053481071.9999999
India 2001 1071888190
India 2002 1090189358
India 2003 1108369577
India 2004 1126419321
India 2005 1144326293
India 2006 1162088305
India 2007 1179685631
India 2008 1197070109
India 2009 1214182182
India 2010 1230984504
India 2011 1247446011
India 2012 1263589639
India 2013 1279498874
India 2014 1295291543
India 2015 1311050527
USA 1950 157813040
USA 1951 159880756
USA 1952 162280405
USA 1953 164941716
USA 1954 167800046
USA 1955 170796378
USA 1956 173877321
USA 1957 176995108
USA 1958 180107612
USA 1959 183178348
USA 1960 186176524
USA 1961 189077076
USA 1962 191860710
USA 1963 194513911
USA 1964 197028908
USA 1965 199403532
USA 1966 201629471
USA 1967 203713082
USA 1968 205687611
USA 1969 207599308
USA 1970 209485807
USA 1971 211357912
USA 1972 213219515
USA 1973 215092900
USA 1974 217001865
USA 1975 218963561
USA 1976 220993166
USA 1977 223090871
USA 1978 225239456
USA 1979 227411604
USA 1980 229588208
USA 1981 231765783
USA 1982 233953874
USA 1983 236161961
USA 1984 238404223
USA 1985 240691557
USA 1986 243032017
USA 1987 245425409
USA 1988 247865202
USA 1989 250340795
USA 1990 252847810
USA 1991 255367160
USA 1992 257908206
USA 1993 260527420
USA 1994 263301322.99999997
USA 1995 266275528
USA 1996 269483224
USA 1997 272882865
USA 1998 276354096
USA 1999 279730801
USA 2000 282895741
USA 2001 285796198
USA 2002 288470847
USA 2003 291005482
USA 2004 293530886
USA 2005 296139635
USA 2006 298860519
USA 2007 301655953
USA 2008 304473143
USA 2009 307231961
USA 2010 309876170
USA 2011 312390368
USA 2012 314799465
USA 2013 317135919
USA 2014 319448634
USA 2015 321773631
Brazil 1950 53974726
Brazil 1951 55605541
Brazil 1952 57304772
Brazil 1953 59053267
Brazil 1954 60838782
Brazil 1955 62655984
Brazil 1956 64506874
Brazil 1957 66400361.99999999
Brazil 1958 68351012
Brazil 1959 70376952
Brazil 1960 72493585
Brazil 1961 74706888
Brazil 1962 77007549
Brazil 1963 79368453
Brazil 1964 81751802
Brazil 1965 84130061
Brazil 1966 86494987
Brazil 1967 88853679
Brazil 1968 91213009
Brazil 1969 93585746
Brazil 1970 95982453
Brazil 1971 98402200
Brazil 1972 100844391
Brazil 1973 103320787
Brazil 1974 105846274
Brazil 1975 108431284
Brazil 1976 111076063
Brazil 1977 113776467
Brazil 1978 116532153
Brazil 1979 119341444
Brazil 1980 122199721
Brazil 1981 125107382
Brazil 1982 128054757
Brazil 1983 131014337
Brazil 1984 133950551
Brazil 1985 136836428
Brazil 1986 139664639
Brazil 1987 142437479
Brazil 1988 145150468
Brazil 1989 147801816
Brazil 1990 150393143
Brazil 1991 152916852
Brazil 1992 155379009
Brazil 1993 157812220
Brazil 1994 160260508
Brazil 1995 162755054
Brazil 1996 165303155
Brazil 1997 167893835
Brazil 1998 170516482
Brazil 1999 173153066
Brazil 2000 175786441
Brazil 2001 178419396
Brazil 2002 181045592
Brazil 2003 183627339
Brazil 2004 186116363
Brazil 2005 188479240
Brazil 2006 190698241
Brazil 2007 192784521
Brazil 2008 194769696
Brazil 2009 196701298
Brazil 2010 198614208
Brazil 2011 200517584
Brazil 2012 202401584
Brazil 2013 204259377
Brazil 2014 206077898
Brazil 2015 207847528
Indonesia 1950 69543319
Indonesia 1951 70869608
Indonesia 1952 72309902
Indonesia 1953 73866520
Indonesia 1954 75539738
Indonesia 1955 77327799
Indonesia 1956 79226787
Indonesia 1957 81230749
Indonesia 1958 83332054
Indonesia 1959 85521981
Indonesia 1960 87792512
Indonesia 1961 90138235
Indonesia 1962 92558006
Indonesia 1963 95055669
Indonesia 1964 97638027
Indonesia 1965 100308896
Indonesia 1966 103067352
Indonesia 1967 105907403
Indonesia 1968 108821565
Indonesia 1969 111800090
Indonesia 1970 114834781
Indonesia 1971 117921994
Indonesia 1972 121059511
Indonesia 1973 124242299
Indonesia 1974 127465232
Indonesia 1975 130724118
Indonesia 1976 134010695
Indonesia 1977 137322122
Indonesia 1978 140665859
Indonesia 1979 144053516
Indonesia 1980 147490366
Indonesia 1981 150978841
Indonesia 1982 154506266
Indonesia 1983 158044343
Indonesia 1984 161555584
Indonesia 1985 165012195
Indonesia 1986 168402027
Indonesia 1987 171728916
Indonesia 1988 175000919
Indonesia 1989 178233231
Indonesia 1990 181436821
Indonesia 1991 184614740
Indonesia 1992 187762097
Indonesia 1993 190873248
Indonesia 1994 193939912
Indonesia 1995 196957845
Indonesia 1996 199926615
Indonesia 1997 202853850
Indonesia 1998 205753493
Indonesia 1999 208644079
Indonesia 2000 211540428
Indonesia 2001 214448301
Indonesia 2002 217369087
Indonesia 2003 220307809
Indonesia 2004 223268606
Indonesia 2005 226254703
Indonesia 2006 229263980
Indonesia 2007 232296830
Indonesia 2008 235360765
Indonesia 2009 238465165
Indonesia 2010 241613126
Indonesia 2011 244808254
Indonesia 2012 248037853
Indonesia 2013 251268276
Indonesia 2014 254454778
Indonesia 2015 257563815
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment