Skip to content

Instantly share code, notes, and snippets.

@jaimeps

jaimeps/0_README.md

Last active July 6, 2016 01:20
Show Gist options
  • Save jaimeps/b952056bf5ce15471c1ba5fa2de52e8b to your computer and use it in GitHub Desktop.
Save jaimeps/b952056bf5ce15471c1ba5fa2de52e8b to your computer and use it in GitHub Desktop.
Download ZIP
Project 2
Display the source blob
Display the rendered blob
Raw
1_EDA_natural_disasters.ipynb
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
data_v4.csv
year disaster_type occurrence Total_deaths Affected Injured Homeless Total_affected Total_damage
1950 Flood 10 3808 10132000 10132000 100000
1950 Storm 7 873 642117 642117 101000
1951 Extreme temperature 2 69 100000
1951 Flood 7 5666 318534 173500 492034 1329000
1951 Storm 11 2861 80000 200 80200 56250
1952 Flood 4 199
1952 Storm 9 2277 1000000 1252 1001252 52000
1953 Extreme temperature 3 669
1953 Flood 12 7125 2187110 4000 2191110 300000
1953 Storm 11 1814 1000000 1000000 77000
1954 Flood 9 34436 50000
1954 Storm 10 2969 297049 297049 831000
1955 Extreme temperature 1 107
1955 Flood 3 584
1955 Storm 19 3895 375000 375000 877000
1956 Flood 9 3613 77000 77000
1956 Storm 14 3114 1000000 1000000
1956 Wildfire 1 11
1957 Flood 11 2471 268240 268240
1957 Storm 9 1139 250000 111 250111 150000
1958 Extreme temperature 2 651 520000
1958 Flood 3 400 5000 5000
1958 Storm 13 2620 20000 20000
1959 Flood 13 2003396 13000 13000
1959 Storm 16 9695 1501600 1501600 672200
1960 Drought 1
1960 Flood 7 10577 167000 167000
1960 Storm 20 9164 644000 377 1000 645377 454041
1961 Drought 1
1961 Extreme temperature 1 400
1961 Flood 8 3863 1302384 2000 1304384
1961 Storm 14 12852 8000 1171 9171 480400
1962 Extreme temperature 1 50
1962 Flood 8 1180 80000
1962 Storm 13 1860 40000 40000 1219000
1963 Drought 1 13400 13400
1963 Extreme temperature 2 162
1963 Flood 8 1031 80400 10 80410
1963 Storm 21 29965 6000000 2200 6002200 879090
1964 Drought 7 50 2596000 2596000
1964 Flood 22 1123 2223037 53900 2276937 893200
1964 Storm 22 10655 2750955 2224 143000 2896179 399150
1965 Drought 7 1502000 101966000 101966000 127118
1965 Extreme temperature 1 100
1965 Flood 19 1401 4410813 15245 88214 4514272 522100
1965 Storm 19 59932 10601200 601939 5000200 16203339 1669400
1965 Wildfire 1 1000
1966 Drought 9 8000 360000 360000
1966 Extreme temperature 2 262
1966 Flood 23 1923 3297524 2384 1616563 4916471 2206582
1966 Storm 28 2327 2280764 1582 423500 2705846 306122
1967 Drought 5 600 2878483 2878483 600200
1967 Flood 26 2446 2252561 1841 210800 2465202 324926
1967 Storm 25 2255 590574 1023 3500 595097 451200
1967 Wildfire 2 62 3000 100 3100 68500
1968 Drought 7 1114217 1114217 64000
1968 Extreme temperature 2 153
1968 Flood 20 7306 23834192 100200 894584 24828976 417181
1968 Storm 25 1669 358601 1053 79576 439230 61488
1968 Wildfire 3 12 1000 800 1800 1000
1969 Drought 10 8951604 20000 8971604 215000
1969 Flood 14 1544 1799713 3890 17384 1820987 551420
1969 Storm 25 3252 666266 16135 26943 709344 1568359
1969 Wildfire 2
1970 Drought 2 10087600 10087600 2100
1970 Flood 31 3246 27729482 1603 462018 28193103 1307770
1970 Storm 24 304495 5412245 5032 77080 5494357 1064974
1970 Wildfire 3 100000
1971 Drought 7 999000 999000 3900
1971 Extreme temperature 1 400 100000
1971 Flood 15 2404 1157000 2000 15000 1174000 556300
1971 Storm 22 10811 5043050 347 2049300 7092697 208389
1971 Wildfire 2
1972 Drought 7 204815000 204815000 187000
1972 Extreme temperature 2 110
1972 Flood 15 2548 3604061 965 710502 4315528 434493
1972 Storm 26 1427 7666475 750 37000 7704225 2602920
1972 Wildfire 3
1973 Drought 2 100000 3000000 3000000 76000
1973 Extreme temperature 3 283
1973 Flood 20 1835 5118240 811 94250 5213301 1766493
1973 Storm 22 4344 3589834 15372 55200 3660406 539200
1973 Wildfire 3 5000 5000
1974 Drought 4 19000 737000 737000
1974 Flood 19 29431 41100823 2093000 43193823 906972
1974 Storm 28 11861 991495 907 6441 998843 3123017
1974 Wildfire 3
1975 Drought 1
1975 Extreme temperature 3 140 600 600 600000
1975 Flood 17 848 32049205 93 7080150 39129448 1136243
1975 Storm 28 1041 874773 255 4278 879306 1528122
1975 Wildfire 2
1976 Drought 6 3120000 3120000
1976 Flood 17 960 9765207 20 220000 9985227 607553
1976 Storm 36 1763 4604443 1818 111384 4717645 2889394
1976 Wildfire 1
1977 Drought 16 8408400 8408400 3300000
1977 Extreme temperature 1 2800000
1977 Flood 48 2568 3196546 7000 400260 3603806 737599
1977 Storm 32 15298 9304842 11740 5474450 14791032 1209809
1977 Wildfire 2 3 24760
1978 Drought 9 63 6547885 6547885 2326700
1978 Extreme temperature 1 150
1978 Flood 47 5897 42346770 1488 138200 42486458 1111123
1978 Storm 42 3676 3025762 7508 112829 3146099 1512698
1978 Wildfire 3 2 4000 200 3000 7200
1979 Drought 11 18 25992000 25992000 200000
1979 Extreme temperature 4 470 80000
1979 Flood 34 1038 30435010 670 146732 30582412 188283
1979 Storm 31 2623 3615079 7353 432631 4055063 3521869
1979 Wildfire 4 30000 30000 15090
1980 Drought 14 9640100 9640100 1500000
1980 Extreme temperature 3 1389 2000000
1980 Flood 39 10466 45016276 27186 156000 45199462 1145100
1980 Storm 42 1379 16835140 1105 2065379 18901624 1889885
1980 Wildfire 4 5000 40 5040 25975
1981 Drought 13 103000 7410000 7410000 7460000
1981 Extreme temperature 2 300
1981 Flood 43 5283 20514750 33612 213185 20761547 2822915
1981 Storm 50 3790 3475071 12919 59858 3547848 1726604
1981 Wildfire 4 8 28588 20000 48588
1982 Drought 13 280 104237300 104237300 1000
1982 Extreme temperature 3 400 200 200
1982 Flood 48 4648 36917037 25292 372410 37314739 3941660
1982 Storm 52 2782 7765772 1996 681983 8449751 4500783
1982 Wildfire 3 2 18 9000 9018
1983 Drought 32 450520 79384109 79384109 1113954
1983 Extreme temperature 2 205 2700 2700
1983 Flood 49 2082 20311591 442 644600 20956633 7433216
1983 Storm 59 3656 2802724 3892 686386 3493002 5444777
1983 Wildfire 12 106 1000 20 11000 12020 631650
1984 Drought 8 230 3252000 3252000 1000000
1984 Extreme temperature 1 290
1984 Flood 47 2930 51127829 233 450570 51578632 2749500
1984 Storm 57 5468 7080995 4545 1443020 8528560 5161457
1984 Wildfire 7 17 200 200 2000
1985 Drought 3 500000 500000 651000
1985 Extreme temperature 8 456 5745 1340 7085 144000
1985 Flood 58 4376 17013965 87 684447 17698499 3756728
1985 Storm 51 17165 5254098 5920 780356 6040374 5838203
1985 Wildfire 13 51 2600 230 2830 128169
1986 Drought 4 84 851000 851000 500000
1986 Extreme temperature 2 50 30000 30000 1750000
1986 Flood 50 1782 11131525 694 1443200 12575419 3801950
1986 Storm 56 1939 14293647 9666 397633 14700946 5056742
1986 Wildfire 6 20 4000 53 4053
1987 Drought 15 1317 317012367 317012367
1987 Extreme temperature 6 1220 17 17
1987 Flood 68 6766 49771500 1488 282500 50055488 5434695
1987 Storm 58 2900 4721296 4190 1157401 5882887 6569945
1987 Wildfire 8 191 208222 223 750 209195 210000
1988 Drought 17 1600 54199500 54199500 1801287
1988 Extreme temperature 6 644 200 200 600
1988 Flood 76 8504 105424711 5235 2505125 107935071 7753849
1988 Storm 60 3335 18816045 9464 2208421 21033930 2426376
1989 Drought 7 237 17060000 17060000 1600000
1989 Extreme temperature 5 381
1989 Flood 46 4716 103446717 11312 867158 104325187 3896100
1989 Storm 73 4256 49761948 18276 1046171 50826395 10353299
1989 Wildfire 3 1 25000 25000 4283200
1990 Drought 12 16804342 16804342 6601739
1990 Extreme temperature 13 979 1000000 1000000 89250
1990 Flood 60 2251 46296043 8313 349875 46654231 4440448
1990 Storm 137 4623 15911268 2613 1355217 17269098 26597935
1990 Wildfire 4 1695000
1991 Drought 18 2000 30152000 30152000 3159000
1991 Extreme temperature 8 835 450 450 772000
1991 Flood 77 5852 222233148 32427 5533814 227799389 12517638
1991 Storm 66 146297 22117245 151142 1035480 23303867 17536723
1991 Wildfire 8 90 8 300 308 2593200
1992 Drought 12 28531500 28531500 2991800
1992 Extreme temperature 7 388 16000 16000 3028000
1992 Flood 59 5315 15350164 252120 3995510 19597794 7862663
1992 Storm 76 1342 18082165 21261 383391 18486817 37598250
1992 Wildfire 8 122 1650 50540 52190 421200
1993 Drought 9 3531507 3531507 2000
1993 Extreme temperature 4 106 3000200 560 3000760
1993 Flood 84 6150 148875018 1570 374335 149250923 32867943
1993 Storm 108 2965 14375651 11536 671584 15058771 14383468
1993 Wildfire 2 3 130 130 1000000
1994 Drought 13 95015000 95015000 13995200
1994 Extreme temperature 9 341 1108000 184 1108184 475000
1994 Flood 88 6771 122546263 22785 7214123 129783171 20502806
1994 Storm 81 4239 35089985 11109 1940047 37041141 5413592
1994 Wildfire 13 84 3066200 183 1030 3067413 152000
1995 Drought 6 10871994 10871994 112800
1995 Extreme temperature 13 1730 535000 278 535278 834300
1995 Flood 94 7956 190647666 71074 2722507 193441247 27555794
1995 Storm 81 3763 12698104 7679 1619837 14325620 25006834
1995 Wildfire 7 29 8785 54 3000 11839 134500
1996 Drought 6 3342000 3342000 1742400
1996 Extreme temperature 5 300 200 200
1996 Flood 92 8047 177417900 252827 5006286 182677013 28497000
1996 Storm 77 4581 27635575 42671 100860 27779106 10757643
1996 Wildfire 5 45 5500 111 600 6211 1721300
1997 Drought 18 732 8573300 8573300 1515100
1997 Extreme temperature 13 604 712180 712180 33000
1997 Flood 95 7685 43543761 29090 1079851 44652702 17883933
1997 Storm 79 6150 12760313 17532 1905545 14683390 7534570
1997 Wildfire 16 266 53150 79 53229 8309200
1998 Drought 20 20 14054335 14054335 513200
1998 Extreme temperature 12 3269 36000 386 36386 4275000
1998 Flood 94 10653 275535620 123961 18003104 293662685 43929151
1998 Storm 88 24935 19829076 21193 11171165 31021434 30658681
1998 Wildfire 18 150 165132 124 1348 166604 2616208
1999 Drought 23 361 99037545 99037545 9347000
1999 Extreme temperature 8 771 725000 246 725246 1000000
1999 Flood 122 34807 145207074 29767 3849227 149086068 15612227
1999 Storm 106 12270 23791700 12447 1297706 25101853 43336598
1999 Wildfire 22 70 7800 5 11025 18830 490636
2000 Drought 27 80 81225415 81225415 3655165
2000 Extreme temperature 31 941 25977 1709 27686 370159
2000 Flood 158 6025 73110359 1509 793068 73904936 25803502
2000 Storm 101 1297 14686646 4350 445461 15136457 12949580
2000 Wildfire 30 47 36600 58 2377 39035 2558913
2001 Drought 22 99 32081154 32081154 36400
2001 Extreme temperature 23 1787 210850 2311 213161 200110
2001 Flood 157 5014 34219047 4768 327831 34551646 4752612
2001 Storm 107 1914 31392503 92028 506905 31991436 14546012
2001 Wildfire 14 33 5729 10 5739 90000
2002 Drought 25 588 377556935 377556935 7871475
2002 Extreme temperature 15 3369 100200 3786 103986
2002 Flood 172 4236 167634876 38895 96952 167770723 26825511
2002 Storm 123 1535 111111880 3997 46820 111162697 14749852
2002 Wildfire 22 6 20322 715 5087 26124 362100
2003 Drought 14 9 67732075 67732075 691000
2003 Extreme temperature 25 74698 1839888 200 1840088 12520000
2003 Flood 158 3884 167547976 153150 1760451 169461577 20865648
2003 Storm 86 1049 10589723 9889 493057 11092669 21367890
2003 Wildfire 15 47 182700 298 1335 184333 6095000
2004 Drought 11 80 17971500 17971500 2991275
2004 Extreme temperature 16 255 339467 1800413 2139880
2004 Flood 129 6984 116518021 15877 457117 116991015 10383038
2004 Storm 123 6597 20423065 18838 940895 21382798 84067635
2004 Wildfire 8 14 18200 105 2214 20519 3000
2005 Drought 22 161 29550990 29550990 462120
2005 Extreme temperature 29 1088 1000 1246 2246 400000
2005 Flood 193 5754 74324539 1921 700349 75026809 17939670
2005 Storm 131 5252 48706859 6907 412268 49126034 184793461
2005 Wildfire 13 45 5000 157 1750 6907 3847000
2006 Drought 9 134 23857000 23857000 3135573
2006 Extreme temperature 24 4826 50000 11754 61754 1000000
2006 Flood 226 5843 25668207 2199 4638942 30309348 7805942
2006 Storm 76 4329 66474501 14248 620483 67109232 17702835
2006 Wildfire 9 13 1436 218 408 2062 839000
2007 Drought 11 5278144 5278144 706000
2007 Extreme temperature 25 1086 984924 3164 988088
2007 Flood 218 8607 177920195 6650 970247 178897092 24586067
2007 Storm 105 6035 23836033 57003 106209 23999245 29558736
2007 Wildfire 18 148 1778393 182 6442 1785017 4597454
2008 Drought 16 8 34068000 34068000 234000
2008 Extreme temperature 9 1641 79170502 682 79171184 21940000
2008 Flood 165 4007 42361991 973 2547797 44910761 19619144
2008 Storm 111 140985 15354941 23460 273373 15651774 60728103
2008 Wildfire 5 86 55000 68 3600 58668 2532000
2009 Drought 18 86295500 86295500 3628700
2009 Extreme temperature 24 1370 829106 27061 856167 1162000
2009 Flood 151 3627 59620060 2003 112870 59734933 8003878
2009 Storm 87 3287 50326452 10454 245872 50582778 26134655
2009 Wildfire 9 190 10169 529 876 11574 1515000
2010 Drought 16 20000 49372978 49372978 3884700
2010 Extreme temperature 29 57188 72750 11 72761 400000
2010 Flood 184 8454 188636195 10383 670720 189317298 49137575
2010 Storm 95 1564 8150715 2692 777608 8931015 28124083
2010 Wildfire 7 166 25200 1021 4270 30491 2070000
2011 Drought 17 30400194 30400194 8142000
2011 Extreme temperature 16 435 4114033 22472 233000 4369505 781123
2011 Flood 156 6163 135236092 2345 1209286 136447723 70757047
2011 Storm 84 3103 38266824 12306 297752 38576882 50872148
2011 Wildfire 8 10 520 5 14182 14707 3137000
2012 Drought 19 23551085 23551085 25480000
2012 Extreme temperature 51 1834 605568 5657 611225 152801
2012 Flood 135 3530 63730563 8889 172538 63911990 25609173
2012 Storm 90 3105 19564571 6771 694147 20265489 85732579
2012 Wildfire 6 21 3684 422 1290 5396 1000000
2013 Drought 9 7955904 7955904 1087000
2013 Extreme temperature 14 1821 129444 55325 5247 190016 1000000
2013 Flood 149 9836 31822222 6667 246991 32075880 54782566
2013 Storm 105 8603 48756442 36808 54882 48848132 52388364
2013 Wildfire 10 35 1551 17 7263 8831 1072400
2014 Drought 18 69838427 69838427 11005000
2014 Extreme temperature 18 1173 1209198 18500 1227698 2518000
2014 Flood 135 3532 39806306 4933 1257973 41069212 36240242
2014 Storm 102 1427 25708052 8049 76621 25792722 40914072
2014 Wildfire 5 17 10929 500 258 11687 409000
2015 Drought 25 35 43581652 43581652 6778747
2015 Extreme temperature 10 7423 1245620 66 1245686
2015 Flood 148 3200 25917251 2433 224061 26143745 24320100
2015 Storm 90 996 10363512 6589 222178 10592279 24911767
2015 Wildfire 12 66 485717 1076 7920 494713 3636820
Raw
index.html
<!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;
}
.legend {
font-weight: bold;
text-anchor: middle;
font: 16px futura;
}
.title {
color: black;
text-align: center;
font: 16px futura;
}
.area.above {
fill: #bad6e8;
}
.area.below {
fill: #e2cacd;
}
.line {
fill: none;
stroke: #000;
stroke-width: 2px;
}
</style>
<div id="area1"></div>
<div id="area2"></div>
<div id="area3"></div>
<div id="area4"></div>
<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: 20, right: 20, bottom: 40, left: 60},
width = 600 - margin.left - margin.right,
height = 200 - 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(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.date); })
.y(function(d) { return y(d.price); });
var test = ["#95c3ee", "#227dd2", "#aaaaaa" , "#c2b593", '#595959']
// CHART 1 //////////////////////////////////////////////////////////////
// Adds the svg canvas
var chart1 = d3.select("#area1")
.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_v4.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.year);
d.price = +d.occurrence;
});
// 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.price; })]);
// Add y label
chart1.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -50)
.attr("dy", ".71em")
.attr("x", -height/2)
.style("text-anchor", "middle")
.text("No. of occurrences");
// Nest the entries by symbol
var dataNest = d3.nest()
.key(function(d) {return d.disaster_type;})
.entries(data);
var color = d3.scale.ordinal()
.range(test);
legendSpace = width/dataNest.length; // spacing for the legend
// Loop through each symbol / key
dataNest.forEach(function(d,i) {
chart1.append("path")
.attr("class", "line")
.style("stroke", function() { // Add the colours dynamically
return d.color = color(d.key); })
.attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign ID
.attr("d", priceline(d.values));
});
// Add the X Axis
chart1.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
chart1.append("g")
.attr("class", "y axis")
.call(yAxis);
chart1.append("text")
.attr('class', 'title')
.text('Number of natural disasters')
.attr("x", 160);
});
// CHART 2 //////////////////////////////////////////////////////////////
// Adds the svg canvas
var chart2 = d3.select("#area2")
.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_v4.csv", function(error, data2) {
data2.forEach(function(d2) {
d2.date = parseDate(d2.year);
d2.price = +d2.Total_affected / 1000000;
});
// Scale the range of the data
x.domain(d3.extent(data2, function(d2) { return d2.date; }));
y.domain([0, d3.max(data2, function(d2) { return d2.price; })]);
// Add y label
chart2.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -50)
.attr("dy", ".71em")
.attr("x", -height/2)
.style("text-anchor", "middle")
.text("No. of people affected (m.)");
// Nest the entries by symbol
var dataNest2 = d3.nest()
.key(function(d2) {return d2.disaster_type;})
.entries(data2);
var color2 = d3.scale.ordinal().range(test);
legendSpace2 = width/dataNest2.length; // spacing for the legend
// Loop through each symbol / key
dataNest2.forEach(function(d2,i) {
chart2.append("path")
.attr("class", "line")
.style("stroke", function() { // Add the colours dynamically
return d2.color2 = color2(d2.key); })
.attr("id", 'tag2'+d2.key.replace(/\s+/g, '')) // assign ID
.attr("d", priceline(d2.values));
});
// Add the X Axis
chart2.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
chart2.append("g")
.attr("class", "y axis")
.call(yAxis);
chart2.append("text")
.attr('class', 'title')
.text('Affected population')
.attr("x", 180);
});
// Adds the svg canvas
var chart3 = d3.select("#area3")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom + 40)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// CHART 3 /////////////////////////////////////////////////////////////////
// Get the data
d3.csv("data_v4.csv", function(error, data2) {
data2.forEach(function(d2) {
d2.date = parseDate(d2.year);
d2.price = +d2.Total_damage / 1000000;
});
// Scale the range of the data
x.domain(d3.extent(data2, function(d2) { return d2.date; }));
y.domain([0, d3.max(data2, function(d2) { return d2.price; })]);
// Add y label
chart3.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -50)
.attr("dy", ".71em")
.attr("x", -height/2)
.style("text-anchor", "middle")
.text("Damage ($m.)");
// Nest the entries by symbol
var dataNest2 = d3.nest()
.key(function(d2) {return d2.disaster_type;})
.entries(data2);
var color2 = d3.scale.ordinal().range(test);
legendSpace2 = width/dataNest2.length; // spacing for the legend
// Loop through each symbol / key
dataNest2.forEach(function(d2,i) {
chart3.append("path")
.attr("class", "line")
.style("stroke", function() { // Add the colours dynamically
return d2.color2 = color2(d2.key); })
.attr("id", 'tag3'+d2.key.replace(/\s+/g, '')) // assign ID
.attr("d", priceline(d2.values));
// Add the Legend
chart3.append("text")
.attr("x", (legendSpace2/2)+i*(legendSpace2+20) - 70) // space legend
.attr("y", height + (margin.bottom/2)+ 35)
.attr("class", "legend") // style the legend
.style("fill", function() { // Add the colours dynamically
return d2.color2 = color2(d2.key); })
.on("click", function(){
// Determine if current line is visible
var active2 = d2.active2 ? false : true,
newOpacity2 = active2 ? 0 : 1;
// Hide or show the elements based on the ID
d3.select("#tag2"+d2.key.replace(/\s+/g, ''))
.transition().duration(100)
.style("opacity", newOpacity2);
d3.select("#tag"+d2.key.replace(/\s+/g, ''))
.transition().duration(100)
.style("opacity", newOpacity2);
d3.select("#tag3"+d2.key.replace(/\s+/g, ''))
.transition().duration(100)
.style("opacity", newOpacity2);
// Update whether or not the elements are active
d2.active2 = active2;
})
.text(d2.key);
});
// Add the X Axis
chart3.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
chart3.append("g")
.attr("class", "y axis")
.call(yAxis);
chart3.append("text")
.attr('class', 'title')
.text('Damage')
.attr("x", 200);
chart3.append("text")
.attr("y",170)
.attr("x", 0)
.text('Source: CRED')
.style("font-size","10px");
});
var line = d3.svg.area()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d["Value"]); });
var area = d3.svg.area()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y1(function(d) { return y(d["Value"]); });
var chart4 = d3.select("#area4").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom + 20)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("temperature4.txt", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.date = parseDate(d.Year);
d["Value"]= +d["Value"];
d["Value2"] = +d["Value2"];
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(data, function(d) { return Math.min(d["Value"], d["Value2"]); }),
d3.max(data, function(d) { return Math.max(d["Value"], d["Value2"])+1.5; })
]);
chart4.datum(data);
chart4.append("clipPath")
.attr("id", "clip-below")
.append("path")
.attr("d", area.y0(height));
chart4.append("clipPath")
.attr("id", "clip-above")
.append("path")
.attr("d", area.y0(0));
chart4.append("path")
.attr("class", "area above")
.attr("clip-path", "url(#clip-above)")
.attr("d", area.y0(function(d) { return y(d["Value2"]); }));
chart4.append("path")
.attr("class", "area below")
.attr("clip-path", "url(#clip-below)")
.attr("d", area);
chart4.append("path")
.attr("class", "line")
.attr("d", line);
chart4.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
chart4.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -50)
.attr("dy", ".71em")
.attr("x", -height/2)
.style("text-anchor", "middle")
.text("Temperature* (ºC)");
chart4.append("text")
.attr("y",33)
.attr("x", 50)
.text("Paris Agreement 2030 limit");
chart4.append("text")
.attr("y",60)
.attr("x", 50)
.text("Paris Agreement 2030 target");
chart4.append("text")
.attr('class', 'title')
.text('Global average temperature')
.attr("x", 150);
chart4.append("text")
.attr("y",170)
.attr("x", 0)
.text("Source: NOAA")
.style("font-size","10px");
chart4.append("text")
.attr("y",180)
.attr("x", 0)
.text("*Deviation from 20th century average")
.style("font-size","10px");
chart4.append("svg:line")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", 22)
.attr("y2", 22)
// .attr("stroke-dasharray")
.style("stroke", "#89383a");
chart4.append("svg:line")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", 48)
.attr("y2", 48)
.style("stroke", "#316ab4")
});
</script>
</body>
Raw
temperature4.txt
Year Value Value2
1950 -0.1636 0
1951 -0.0141 0
1952 0.0242 0
1953 0.0949 0
1954 -0.1162 0
1955 -0.1348 0
1956 -0.1992 0
1957 0.0487 0
1958 0.11 0
1959 0.0605 0
1960 0.0209 0
1961 0.0775 0
1962 0.0892 0
1963 0.1064 0
1964 -0.1499 0
1965 -0.0787 0
1966 -0.0231 0
1967 -0.0139 0
1968 -0.0308 0
1969 0.0927 0
1970 0.0369 0
1971 -0.0785 0
1972 0.0265 0
1973 0.1623 0
1974 -0.0742 0
1975 0.0006 0
1976 -0.0822 0
1977 0.1952 0
1978 0.1105 0
1979 0.2262 0
1980 0.2632 0
1981 0.3002 0
1982 0.1817 0
1983 0.3407 0
1984 0.1487 0
1985 0.135 0
1986 0.2294 0
1987 0.3699 0
1988 0.3743 0
1989 0.2953 0
1990 0.4309 0
1991 0.4041 0
1992 0.2557 0
1993 0.2831 0
1994 0.3375 0
1995 0.4566 0
1996 0.3202 0
1997 0.5158 0
1998 0.632 0
1999 0.4417 0
2000 0.424 0
2001 0.5447 0
2002 0.5988 0
2003 0.6106 0
2004 0.5763 0
2005 0.6571 0
2006 0.613 0
2007 0.6094 0
2008 0.5398 0
2009 0.6339 0
2010 0.7015 0
2011 0.5761 0
2012 0.621 0
2013 0.6657 0
2014 0.739 0
2015 0.8977 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment