Skip to content

Instantly share code, notes, and snippets.

@lorenzopub

lorenzopub/.block

Created October 20, 2016 08:43
Show Gist options
  • Save lorenzopub/9d6087d95aa73c713c7e35bf66f8a21f to your computer and use it in GitHub Desktop.
Save lorenzopub/9d6087d95aa73c713c7e35bf66f8a21f to your computer and use it in GitHub Desktop.
Download ZIP
Multi-Series Line Chart
Raw
.block
license: mit
Raw
chart.js
var margin = {top: 15, right: 70, bottom: 50, left: 29},
width = 675 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom,
formatPercent = d3.format(".0%"),
labelBuffer = 7;
var color = d3.scale.ordinal().range(["#66BFED","#338CBA","#005987","#7F8C8D","#95A5A6","#34495E","#677C91","#C0392B"]);
var xScale = d3.scale.linear()
.range([0, width]);
var yScale = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.tickSize(5)
.ticks(10)
.orient("left")
.tickFormat(formatPercent)
.tickSize(-width - margin.left - margin.right);
var line = d3.svg.line()
.x(function(d) { return xScale(d.months); })
.y(function(d) { return yScale(d.val); });
var svg = d3.select(".chart").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.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.months = +d.months;
d.val = +d.val;
});
xScale.domain(d3.extent(data.map(function(d) { return d.months })));
yScale.domain(d3.extent(data.map(function(d) { return 1.2*(d.val) })));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("dy", "2.75em")
.attr("dx", width/1.5)
.style("text-anchor", "end")
.text("Months since start of recession");;
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
valuesByRecession = d3.nest()
.key(function(d) { return d.years})
.entries(data);
color.domain(d3.keys(valuesByRecession) );
var recessions = svg.append("g").selectAll("recessionLine")
.data(valuesByRecession)
.enter()
.append("g")
.attr("class", "recessionLine");
recessions.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) {return color(d.key); });
recessions.append("text")
.text(function(d) { return d.key; })
.attr("x", function(d) { return xScale(d.values[d.values.length - 1].months) + labelBuffer })
.attr("y", function(d) { return yScale(d.values[d.values.length - 1].val) + 3 })
recessions.append("circle")
.attr("cx", function(d) { return xScale(d.values[d.values.length - 1].months); })
.attr("cy", function(d) { return yScale(d.values[d.values.length - 1].val); })
.attr("r", 3)
.style("fill", function(d) { return color(d.key); });
svg.selectAll("g")
.classed("g-baseline", function(d) { return d == 0 });
});
d3.select(self.frameElement).style("height", "585px");
Raw
data.csv
years months val
1960-1961 0 0
1960-1961 1 -0.006184777
1960-1961 2 -0.008483544
1960-1961 3 -0.009268043
1960-1961 4 -0.009870101
1960-1961 5 -0.010654601
1960-1961 6 -0.012187112
1960-1961 7 -0.015507553
1960-1961 8 -0.019484784
1960-1961 9 -0.020597679
1960-1961 10 -0.02291469
1960-1961 11 -0.020980807
1960-1961 12 -0.021637598
1960-1961 13 -0.018736773
1960-1961 14 -0.01523389
1960-1961 15 -0.01257024
1960-1961 16 -0.009377509
1960-1961 17 -0.007735532
1960-1961 18 -0.005290812
1960-1961 19 -0.001258848
1960-1961 20 0.001076407
1960-1961 21 0.00144129
1960-1961 22 0.006841568
1960-1961 23 0.0084653
1960-1961 24 0.014412902
1960-1961 25 0.014869007
1960-1961 26 0.015179158
1960-1961 27 0.017040064
1960-1961 28 0.018718529
1960-1961 29 0.02125447
1960-1961 30 0.022422097
1960-1961 31 0.02269576
1960-1961 32 0.022184923
1960-1961 33 0.023790411
1960-1961 34 0.025870247
1960-1961 35 0.027548712
1960-1961 36 0.03225571
1960-1961 37 0.032912501
1960-1961 38 0.033678756
1960-1961 39 0.036159965
1960-1961 40 0.03827629
1960-1961 41 0.041323068
1960-1961 42 0.045099613
1960-1961 43 0.044570532
1960-1961 44 0.046486171
1960-1961 45 0.048803182
1960-1961 46 0.053619645
1960-1961 47 0.05630154
1960-1961 48 0.0567394
1960-1961 49 0.059786178
1960-1961 50 0.06219441
1960-1961 51 0.065697293
1960-1961 52 0.069455594
1960-1961 53 0.074636941
1960-1961 54 0.072648325
1960-1961 55 0.080365613
1960-1961 56 0.084087426
1960-1961 57 0.087042983
1960-1961 58 0.09100197
1960-1961 59 0.094705539
1960-1961 60 0.099376049
1960-1961 61 0.103626943
1960-1961 62 0.107239291
1960-1961 63 0.112219952
1960-1961 64 0.11705466
1960-1961 65 0.121834635
1960-1961 66 0.125994308
1960-1961 67 0.131084434
1960-1961 68 0.136995548
1960-1961 69 0.140772094
1960-1961 70 0.145661534
1960-1961 71 0.152886229
1960-1961 72 0.157337809
1960-1961 73 0.162354959
1960-1961 74 0.169634387
1969 0 0
1969 1 -0.000898372
1969 2 0.000898372
1969 3 0.002975856
1969 4 0.001516002
1969 5 -0.001642336
1969 6 -0.002961819
1969 7 -0.00262493
1969 8 -0.004309377
1969 9 -0.004098821
1969 10 -0.010120719
1969 11 -0.011664795
1969 12 -0.006316676
1969 13 -0.00524986
1969 14 -0.006092083
1969 15 -0.005348119
1969 16 -0.002849523
1969 17 9.82594E-05
1969 18 0.000182482
1969 19 0.001052779
1969 20 0.001824818
1969 21 0.005291971
1969 22 0.005642897
1969 23 0.008506457
1969 24 0.012184166
1969 25 0.016914655
1969 26 0.019820326
1969 27 0.023933184
1969 28 0.026993262
1969 29 0.031260528
1969 30 0.035373386
1969 31 0.034643459
1969 32 0.040679394
1969 33 0.042434026
1969 34 0.04818922
1969 35 0.052316115
1969 36 0.056569343
1969 37 0.06149635
1969 38 0.067055025
1969 39 0.070816957
1969 40 0.073203257
1969 41 0.075884335
1969 42 0.079267266
1969 43 0.079604155
1969 44 0.083183605
1969 45 0.084727681
1969 46 0.08935991
1973 0 0
1973 1 0.001578704
1973 2 0.002464319
1973 3 0.004389568
1973 4 0.004928637
1973 5 0.006032447
1973 6 0.008150221
1973 7 0.008856145
1973 8 0.0092797
1973 9 0.00907434
1973 10 0.00897166
1973 11 0.00920269
1973 12 0.004479413
1973 13 -0.003272923
1973 14 -0.007893521
1973 15 -0.012745148
1973 16 -0.016210597
1973 17 -0.018623575
1973 18 -0.016544306
1973 19 -0.017866311
1973 20 -0.014670397
1973 21 -0.00971609
1973 22 -0.008753465
1973 23 -0.004838792
1973 24 -0.002977718
1973 25 0.001360509
1973 26 0.007623986
1973 27 0.011615669
1973 28 0.014593387
1973 29 0.017712291
1973 30 0.017956156
1973 31 0.01879043
1973 32 0.020985214
1973 33 0.023000308
1973 34 0.025413287
1973 35 0.025580142
1973 36 0.029841359
1973 37 0.032549543
1973 38 0.035681281
1973 39 0.039480439
1973 40 0.044652942
1973 41 0.04899117
1973 42 0.053611767
1973 43 0.058732929
1973 44 0.063199507
1973 45 0.066254236
1973 46 0.072132662
1973 47 0.075495431
1973 48 0.080359893
1973 49 0.083376117
1973 50 0.08577626
1973 51 0.090307013
1973 52 0.096891365
1973 53 0.10590153
1973 54 0.110342438
1973 55 0.116015505
1973 56 0.119275593
1973 57 0.122818051
1973 58 0.124576445
1973 59 0.128889003
1973 60 0.134497895
1973 61 0.138117363
1973 62 0.139875757
1973 63 0.143007496
1973 64 0.148475203
1973 65 0.147679433
1973 66 0.152466886
1973 67 0.156548414
1973 68 0.157908923
1973 69 0.158961392
1973 70 0.159320772
1973 71 0.161335866
1973 72 0.162542355
1973 73 0.16378735
1980 0 0
1980 1 0.000881038
1980 2 0.002114491
1980 3 0.000528623
1980 4 -0.004217969
1980 5 -0.00774212
1980 6 -0.010627519
1980 7 -0.007764146
1980 8 -0.00651968
1980 9 -0.003425035
1980 10 -0.000594701
1980 11 0.001552829
1980 12 0.002588049
1980 13 0.003336931
1980 14 0.004493293
1980 15 0.00529724
1980 16 0.00540737
1980 17 0.007576926
1981-1982 0 0
1981-1982 1 -0.000393005
1981-1982 2 -0.001342765
1981-1982 3 -0.002423528
1981-1982 4 -0.004705137
1981-1982 5 -0.007740006
1981-1982 6 -0.01129888
1981-1982 7 -0.011353464
1981-1982 8 -0.012772647
1981-1982 9 -0.015829349
1981-1982 10 -0.016320604
1981-1982 11 -0.018973385
1981-1982 12 -0.022706928
1981-1982 13 -0.024431781
1981-1982 14 -0.02640772
1981-1982 15 -0.029431672
1981-1982 16 -0.030774437
1981-1982 17 -0.030927272
1981-1982 18 -0.028481911
1981-1982 19 -0.02930067
1981-1982 20 -0.027422982
1981-1982 21 -0.024409947
1981-1982 22 -0.021385996
1981-1982 23 -0.017248532
1981-1982 24 -0.012685313
1981-1982 25 -0.016047685
1981-1982 26 -0.003875461
1981-1982 27 -0.000917011
1981-1982 28 0.002936617
1981-1982 29 0.006822995
1981-1982 30 0.011691884
1981-1982 31 0.016942862
1981-1982 32 0.019944979
1981-1982 33 0.023907775
1981-1982 34 0.027270147
1981-1982 35 0.031407611
1981-1982 36 0.034824567
1981-1982 37 0.037466431
1981-1982 38 0.040850636
1981-1982 39 0.043972839
1981-1982 40 0.0477828
1981-1982 41 0.049180149
1981-1982 42 0.052084016
1981-1982 43 0.053437698
1981-1982 44 0.057214908
1981-1982 45 0.059354599
1981-1982 46 0.0623458
1981-1982 47 0.063939652
1981-1982 48 0.066013842
1981-1982 49 0.068120783
1981-1982 50 0.070336892
1981-1982 51 0.072389249
1981-1982 52 0.074670859
1981-1982 53 0.076493963
1981-1982 54 0.077858562
1981-1982 55 0.079026659
1981-1982 56 0.080052837
1981-1982 57 0.082094277
1981-1982 58 0.08348071
1981-1982 59 0.082454532
1981-1982 60 0.085926071
1981-1982 61 0.087170586
1981-1982 62 0.090958713
1981-1982 63 0.092989236
1981-1982 64 0.095019759
1981-1982 65 0.097257702
1981-1982 66 0.09913539
1981-1982 67 0.101668086
1981-1982 68 0.104386367
1981-1982 69 0.108076243
1981-1982 70 0.110543438
1981-1982 71 0.112421126
1981-1982 72 0.116209253
1981-1982 73 0.118076025
1981-1982 74 0.120565053
1990-1991 0 0
1990-1991 1 -0.002003041
1990-1991 2 -0.002804257
1990-1991 3 -0.00425191
1990-1991 4 -0.005617619
1990-1991 5 -0.006127484
1990-1991 6 -0.007229157
1990-1991 7 -0.009996995
1990-1991 8 -0.011435543
1990-1991 9 -0.013347537
1990-1991 10 -0.014503838
1990-1991 11 -0.013611574
1990-1991 12 -0.013939344
1990-1991 13 -0.013884716
1990-1991 14 -0.013593364
1990-1991 15 -0.013447689
1990-1991 16 -0.013966658
1990-1991 17 -0.01373904
1990-1991 18 -0.013247385
1990-1991 19 -0.013839192
1990-1991 20 -0.013338432
1990-1991 21 -0.01189078
1990-1991 22 -0.010734479
1990-1991 23 -0.010124462
1990-1991 24 -0.009496235
1990-1991 25 -0.008221573
1990-1991 26 -0.007893802
1990-1991 27 -0.006264055
1990-1991 28 -0.004998498
1990-1991 29 -0.003086504
1990-1991 30 -0.000254932
1990-1991 31 0.001948413
1990-1991 32 0.001502281
1990-1991 33 0.004306538
1990-1991 34 0.006737501
1990-1991 35 0.008385458
1990-1991 36 0.011107773
1990-1991 37 0.012555425
1990-1991 38 0.014731456
1990-1991 39 0.017335409
1990-1991 40 0.019720849
1990-1991 41 0.022561525
1990-1991 42 0.025038012
1990-1991 43 0.026858959
1990-1991 44 0.031092659
1990-1991 45 0.03427021
1990-1991 46 0.037311191
1990-1991 47 0.040188286
1990-1991 48 0.04362077
1990-1991 49 0.046151885
1990-1991 50 0.049347646
1990-1991 51 0.051305163
1990-1991 52 0.055120046
1990-1991 53 0.057623847
1990-1991 54 0.060582885
1990-1991 55 0.06244025
1990-1991 56 0.064461501
1990-1991 57 0.065936467
1990-1991 58 0.065790791
1990-1991 59 0.067930403
1990-1991 60 0.068849981
1990-1991 61 0.07111706
1990-1991 62 0.0733113
1990-1991 63 0.074731638
1990-1991 64 0.076079138
1990-1991 65 0.077280963
1990-1991 66 0.077117078
1990-1991 67 0.081050322
1990-1991 68 0.08347218
1990-1991 69 0.084965356
1990-1991 70 0.087878871
1990-1991 71 0.090510138
1990-1991 72 0.092831845
1990-1991 73 0.094406963
1990-1991 74 0.096455528
2001 0 0
2001 1 -0.002116904
2001 2 -0.002403176
2001 3 -0.003374993
2001 4 -0.004241342
2001 5 -0.00543163
2001 6 -0.007254729
2001 7 -0.009695573
2001 8 -0.011910412
2001 9 -0.013198635
2001 10 -0.014268387
2001 11 -0.015270338
2001 12 -0.015413474
2001 13 -0.016016152
2001 14 -0.016076419
2001 15 -0.015647012
2001 16 -0.016287357
2001 17 -0.016400359
2001 18 -0.016852367
2001 19 -0.015910683
2001 20 -0.015835349
2001 21 -0.017025636
2001 22 -0.01631749
2001 23 -0.017470111
2001 24 -0.019052139
2001 25 -0.019391145
2001 26 -0.019474013
2001 27 -0.019398679
2001 28 -0.019225409
2001 29 -0.019534281
2001 30 -0.018765867
2001 31 -0.017289308
2001 32 -0.017168772
2001 33 -0.016234622
2001 34 -0.015021734
2001 35 -0.014690261
2001 36 -0.01218915
2001 37 -0.010313317
2001 38 -0.008000542
2001 39 -0.007443066
2001 40 -0.007201995
2001 41 -0.006207577
2001 42 -0.004987155
2001 43 -0.002380576
2001 44 -0.0018909
2001 45 -0.000919083
2001 46 9.04016E-05
2001 47 0.0018909
2001 48 0.002900385
2001 49 0.005635034
2001 50 0.00695339
2001 51 0.00879909
2001 52 0.011609073
2001 53 0.013085633
2001 54 0.013590375
2001 55 0.014223187
2001 56 0.016761965
2001 57 0.017959786
2001 58 0.020046557
2001 59 0.022419599
2001 60 0.02452897
2001 61 0.025900061
2001 62 0.026073331
2001 63 0.026653408
2001 64 0.028212836
2001 65 0.029598994
2001 66 0.030781748
2001 67 0.030796815
2001 68 0.032378843
2001 69 0.033667066
2001 70 0.035460031
2001 71 0.036122976
2001 72 0.037539268
2001 73 0.038126879
2001 74 0.039211698
2008-2009 0 0
2008-2009 1 0.000108421
2008-2009 2 -0.000513191
2008-2009 3 -0.001091435
2008-2009 4 -0.002638236
2008-2009 5 -0.003953741
2008-2009 6 -0.005196964
2008-2009 7 -0.006714854
2008-2009 8 -0.008586917
2008-2009 9 -0.011853993
2008-2009 10 -0.015280087
2008-2009 11 -0.020809541
2008-2009 12 -0.025847488
2008-2009 13 -0.031615468
2008-2009 14 -0.036682327
2008-2009 15 -0.042652692
2008-2009 16 -0.047596675
2008-2009 17 -0.050155403
2008-2009 18 -0.0535309
2008-2009 19 -0.055894471
2008-2009 20 -0.057455728
2008-2009 21 -0.059096494
2008-2009 22 -0.060527647
2008-2009 23 -0.060571016
2008-2009 24 -0.062616552
2008-2009 25 -0.062486447
2008-2009 26 -0.06284785
2008-2009 27 -0.061720275
2008-2009 28 -0.059906035
2008-2009 29 -0.056176364
2008-2009 30 -0.057058186
2008-2009 31 -0.057499096
2008-2009 32 -0.057802674
2008-2009 33 -0.058214673
2008-2009 34 -0.056472714
2008-2009 35 -0.055482472
2008-2009 36 -0.054969281
2008-2009 37 -0.054463318
2008-2009 38 -0.053249006
2008-2009 39 -0.051716661
2008-2009 40 -0.04938923
2008-2009 41 -0.04865197
2008-2009 42 -0.047083484
2008-2009 43 -0.046317311
2008-2009 44 -0.04543549
2008-2009 45 -0.043838092
2008-2009 46 -0.04251536
2008-2009 47 -0.04132996
2008-2009 48 -0.039913263
2008-2009 49 -0.037311167
2008-2009 50 -0.035677629
2008-2009 51 -0.033921214
2008-2009 52 -0.033227322
2008-2009 53 -0.032432237
2008-2009 54 -0.031796169
2008-2009 55 -0.030639682
2008-2009 56 -0.029555475
2008-2009 57 -0.02839176
2008-2009 58 -0.02676545
2008-2009 59 -0.025298157
2008-2009 60 -0.023751355
2008-2009 61 -0.02232743
2008-2009 62 -0.020303578
2008-2009 63 -0.019284424
2008-2009 64 -0.01781713
2008-2009 65 -0.01637875
2008-2009 66 -0.014925913
2008-2009 67 -0.013848934
2008-2009 68 -0.012388869
2008-2009 69 -0.011203469
2008-2009 70 -0.009490423
2008-2009 71 -0.007509939
2008-2009 72 -0.006902783
2008-2009 73 -0.005970365
2008-2009 74 -0.004705457
Raw
index.html
<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,600italic,700italic,200,300,400,600,700,900">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
body, h1, h2, h3, p {
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1em;
color: #333;
font-weight: 400;
}
#content {
margin: 5px;
padding: 20px;
width: 685px;
text-align: left;
border: 1px solid #ccc;
}
h1 {
line-height: 1em;
font-size: 1.65em;
font-weight: 900;
color: #000;
}
p {
margin: 5px 0px 0px 0px;
}
.domain {
stroke-width: 1px;
}
path.line {
fill: none;
stroke-width: 2px;
}
.axis path, .axis line {
fill: none;
stroke: #ccc;
shape-rendering: crispEdges;
}
.axis line {
stroke: #eee;
stroke-width: 1;
shape-rendering: crispEdges;
}
.g-baseline line {
stroke: #333;
stroke-width: 1;
shape-rendering: crispEdges;
}
.x.axis text, .y.axis text {
color: #333;
font-size: 0.9em;
}
.recessionLine text {
font-size: 0.9em;
}
</style>
</head>
<body>
<div id="content">
<h1>Change in Nonfarm Employment Since Start of Recession</h1>
<p>Percent</p>
<div class="chart"></div>
<p>Source: U.S. Bureau of Labor Statistics.</p>
</div>
<script src="chart.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment