danielhavir · February 11, 2017 16:40
diff --git a/co2_data.csv b/co2_data.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
  <style>
    body {
      font-family: "Ubuntu", 'sans-serif';
    }

    #title {
      margin: 0px;
      margin-left: 100px;
      padding: 1px 0px;
    }

    circle {
      fill: '#99C0DB';
    }
  </style>
    <script type="text/javascript">
      function draw(data) {
          "use strict";
          var margin = 25,
              width = 960 - margin,
              height = 450 - margin;

          var title = d3.select("body")
            .append("h2")
              .attr('id', 'title')
              .text('CO2 Emissions over the years 1962 - 2012')
            

          var svg = d3.select("body")
            .append("svg")
              .attr("width", width + margin)
              .attr("height", height + margin)
            .append('g')
                .attr('class','chart');
          
          var myChart = new dimple.chart(svg, data);
          var x = myChart.addCategoryAxis("x", "year"); 
          x.title = "Year";
          var y = myChart.addMeasureAxis("y", "co2");
          y.title = "CO2 Emissions (tonnes per person)";
          myChart.addSeries("country", dimple.plot.line);
          myChart.addSeries("country", dimple.plot.scatter);
          var myLegend = myChart.addLegend(480, 10, 400, "right");
          myChart.draw();

          myChart.legends = [];

          svg.selectAll("title_text")
          .data(["Click legend to","show/hide countries:"])
          .enter()
          .append("text")
            .attr("x", 380)
            .attr("y", function (d, i) { return 17 + i * 14; })
            .style("font-family", "Ubuntu")
            .style("font-size", "10px")
            .style("color", "Black")
            .text(function (d) { return d; });

          var filterValues = dimple.getUniqueValues(data, "country");
          myLegend.shapes.selectAll("rect")
            .on("click", function (e) {
              var hide = false;
              var newFilters = [];
              filterValues.forEach(function (f) {
                if (f === e.aggField.slice(-1)[0]) {
                  hide = true;
                } else {
                  newFilters.push(f);
                }
              });
              if (hide) {
                d3.select(this).style("opacity", 0.2);
              } else {
                newFilters.push(e.aggField.slice(-1)[0]);
                d3.select(this).style("opacity", 0.8);
              }
              filterValues = newFilters;
              myChart.data = dimple.filterData(data, "country", filterValues);
              myChart.draw(800);
          });
        };
      </script>
  </head>
 <body>
  <script type="text/javascript">
  d3.csv("co2_data.csv", draw);
  </script>
 </body>
 </html>
country	year	co2
China	1962	0.651705172948
India	1962	0.307620146391
Japan	1962	3.1103547047
Russia	1962	7.91397623629
United Kingdom	1962	11.1388081316
United States	1962	15.5606900155
China	1963	0.637538142643
India	1963	0.323658671475
Japan	1963	3.41488661345
Russia	1963	8.39127709153
United Kingdom	1963	11.2558325146
United States	1963	16.0280736699
China	1964	0.627551170693
India	1964	0.309921667511
Japan	1964	3.7326946822
Russia	1964	8.83406151723
United Kingdom	1964	11.2635122105
United States	1964	16.5184662067
China	1965	0.670049506978
India	1965	0.334320854733
Japan	1965	3.97445701148
Russia	1965	9.28962107852
United Kingdom	1965	11.4547284317
United States	1965	16.999607412
China	1966	0.718445903197
India	1966	0.338680958235
Japan	1966	4.26114222369
Russia	1966	9.73923836529
United Kingdom	1966	11.3143070553
United States	1966	17.6614342327
China	1967	0.57938607411
India	1967	0.332354028487
Japan	1967	4.91248572583
Russia	1967	10.1230206465
United Kingdom	1967	10.7810749408
United States	1967	18.1396638857
China	1968	0.609206710107
India	1968	0.353660132207
Japan	1968	5.56995058162
Russia	1968	10.354098024
United Kingdom	1968	10.9922629403
United States	1968	18.6267327197
China	1969	0.728484529127
India	1969	0.352153808401
Japan	1969	6.39034163288
Russia	1969	10.7306571515
United Kingdom	1969	11.3413705515
United States	1969	19.3877151212
China	1970	0.947122148307
India	1970	0.352291988413
Japan	1970	7.41250801218
Russia	1970	11.2296800309
United Kingdom	1970	11.7350961149
United States	1970	20.6647146514
China	1971	1.04796786131
India	1971	0.363275029247
Japan	1971	7.58441898814
Russia	1971	11.8549751477
United Kingdom	1971	11.8382108732
United States	1971	20.6115922304
China	1972	1.08590186715
India	1972	0.375651318199
Japan	1972	8.00316191373
Russia	1972	12.4049836236
United Kingdom	1972	11.5863756039
United States	1972	21.4045978288
China	1973	1.10264038337
India	1973	0.377949339413
Japan	1973	8.47138968961
Russia	1973	12.8554268262
United Kingdom	1973	11.7681385644
United States	1973	22.167963404
China	1974	1.10077728643
India	1974	0.381779392294
Japan	1974	8.36348782433
Russia	1974	13.2673623267
United Kingdom	1974	10.9941857577
United States	1974	21.1781759719
China	1975	1.25186018132
India	1975	0.405368928572
Japan	1975	7.85135513722
Russia	1975	13.8638078679
United Kingdom	1975	10.7334646294
United States	1975	20.1084478941
China	1976	1.28508386472
India	1976	0.414073363369
Japan	1976	8.11472953594
Russia	1976	14.3100144796
United Kingdom	1976	10.6420112134
United States	1976	20.856631366
China	1977	1.38684742821
India	1977	0.483922042159
Japan	1977	8.27026471035
Russia	1977	14.7047728891
United Kingdom	1977	10.7423208932
United States	1977	21.2377774824
China	1978	1.52679609406
India	1978	0.476116230487
Japan	1978	7.92409803288
Russia	1978	15.1124734642
United Kingdom	1978	10.7474729446
United States	1978	21.6853899995
China	1979	1.54066792701
India	1979	0.485350271253
Japan	1979	8.30926816687
Russia	1979	15.1373384981
United Kingdom	1979	11.4542776792
United States	1979	21.5263900374
China	1980	1.49217129385
India	1980	0.497886422145
Japan	1980	8.17398568161
Russia	1980	15.6271140928
United Kingdom	1980	10.2878689738
United States	1980	20.5405920329
China	1981	1.45622210905
India	1981	0.523086995481
Japan	1981	7.9566042438
Russia	1981	15.2260031424
United Kingdom	1981	9.95727192174
United States	1981	19.5288583785
China	1982	1.56358243627
India	1982	0.543384535342
Japan	1982	7.64684601445
Russia	1982	15.4058807461
United Kingdom	1982	9.73479351953
United States	1982	18.3564637636
China	1983	1.62607858899
India	1983	0.576349783499
Japan	1983	7.45446730591
Russia	1983	15.5168634149
United Kingdom	1983	9.67893190117
United States	1983	18.3270011389
China	1984	1.74427805979
India	1984	0.582768945377
Japan	1984	7.8782956335
Russia	1984	15.5449822126
United Kingdom	1984	9.37840835022
United States	1984	18.7187054019
China	1985	1.86107642533
India	1985	0.625144750202
Japan	1985	7.62821480151
Russia	1985	16.6443475674
United Kingdom	1985	9.9050830358
United States	1985	18.6050830817
China	1986	1.92661235017
India	1986	0.655586911884
Japan	1986	7.59203034071
Russia	1986	16.5682984975
United Kingdom	1986	10.0440829452
United States	1986	18.442898233
China	1987	2.02353477779
India	1987	0.684934900037
Japan	1987	7.48320843054
Russia	1987	17.1415098542
United Kingdom	1987	10.0754151682
United States	1987	19.0467892031
China	1988	2.13384010219
India	1988	0.723699696701
Japan	1988	8.14422775355
Russia	1988	17.4935188011
United Kingdom	1988	10.0244547002
United States	1988	19.6802854397
China	1989	2.13447387644
India	1989	0.774663982456
Japan	1989	8.41690926392
Russia	1989	17.028401412
United Kingdom	1989	10.1943151948
United States	1989	19.7348269841
China	1990	2.14855970243
India	1990	0.790255780032
Japan	1990	8.95479807105
Russia	1990	15.8954995334
United Kingdom	1990	9.97997464767
United States	1990	18.8194574332
China	1991	2.22631324737
India	1991	0.827196149579
Japan	1991	8.9682011106
Russia	1991	15.2766848638
United Kingdom	1991	10.1847965585
United States	1991	18.8667949439
China	1992	2.29379463838
India	1992	0.860997141238
Japan	1992	9.12073932476
Russia	1992	14.3690945865
United Kingdom	1992	10.0478931714
United States	1992	19.0561643201
China	1993	2.4215214329
India	1993	0.87718252013
Japan	1993	8.96427127637
Russia	1993	13.1844168199
United Kingdom	1993	9.68295416617
United States	1993	19.2839234311
China	1994	2.54507356087
India	1994	0.913860302216
Japan	1994	9.45964730194
Russia	1994	11.5701013013
United Kingdom	1994	9.5989247964
United States	1994	19.4371799692
China	1995	2.73477755519
India	1995	0.953837430859
Japan	1995	9.50975425016
Russia	1995	11.1794945618
United Kingdom	1995	9.58007002981
United States	1995	19.3587714933
China	1996	2.8241392412
India	1996	1.01992741765
Japan	1996	9.65830337072
Russia	1996	10.9914568329
United Kingdom	1996	9.82361424958
United States	1996	19.6202337092
China	1997	2.80259728612
India	1997	1.04326270397
Japan	1997	9.60514483475
Russia	1997	10.5245284245
United Kingdom	1997	9.35415802915
United States	1997	19.8755940754
China	1998	2.66132002434
India	1998	1.05237575036
Japan	1998	9.24759069207
Russia	1998	10.3324114942
United Kingdom	1998	9.32226139187
United States	1998	19.7676521396
China	1999	2.63423156894
India	1999	1.10424744631
Japan	1999	9.54287859539
Russia	1999	10.4469337357
United Kingdom	1999	9.12713658354
United States	1999	19.8037524975
China	2000	2.68286615786
India	2000	1.12587291452
Japan	2000	9.69993093108
Russia	2000	10.6159491192
United Kingdom	2000	9.23347464671
United States	2000	20.223416888
China	2001	2.72888288474
India	2001	1.12354170444
Japan	2001	9.54899042027
Russia	2001	10.6585438297
United Kingdom	2001	9.31521281403
United States	2001	19.6147717576
China	2002	2.87254783076
India	2002	1.12674413555
Japan	2002	9.65217060674
Russia	2002	10.703180537
United Kingdom	2002	8.96344107302
United States	2002	19.5877863567
China	2003	3.49835887751
India	2003	1.15906825777
Japan	2003	9.80564259832
Russia	2003	11.0769013777
United Kingdom	2003	9.06966287766
United States	2003	19.5033538029
China	2004	4.06572346859
India	2004	1.20072357504
Japan	2004	9.97265381875
Russia	2004	11.106997812
United Kingdom	2004	9.02227753383
United States	2004	19.6904618538
China	2005	4.42759216646
India	2005	1.23767217481
Japan	2005	9.7953911378
Russia	2005	11.2312652051
United Kingdom	2005	9.00186797186
United States	2005	19.627579645
China	2006	4.87902838565
India	2006	1.30006733207
Japan	2006	9.7354344747
Russia	2006	11.6330962789
United Kingdom	2006	8.95290098343
United States	2006	19.1514501035
China	2007	5.13906937639
India	2007	1.37248461798
Japan	2007	9.88829673125
Russia	2007	11.636494185
United Kingdom	2007	8.68459542262
United States	2007	19.2803978154
China	2008	5.29619359909
India	2008	1.52084942073
Japan	2008	9.53660568581
Russia	2008	11.9827176137
United Kingdom	2008	8.52646681764
United States	2008	18.5459916954
China	2009	5.76182547331
India	2009	1.6411495814
Japan	2009	8.69644545682
Russia	2009	11.0036333206
United Kingdom	2009	7.70553925401
United States	2009	17.2622243104
China	2010	6.17753037308
India	2010	1.64022278757
Japan	2010	9.25119918518
Russia	2010	12.1757158816
United Kingdom	2010	7.95446870239
United States	2010	17.5027178489
China	2011	6.74808802624
India	2011	1.675540213
Japan	2011	9.2797628854
Russia	2011	12.6516726041
United Kingdom	2011	7.32499631003
United States	2011	16.9831610136
China	2012	7.11264149945
India	2012	1.78103187156
Japan	2012	9.92599774318
Russia	2012	12.6375218172
United Kingdom	2012	7.50253308966
United States	2012	16.2181997961
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
	<style>
	body {
	font-family: "Ubuntu", 'sans-serif';
	}

	#title {
	margin: 0px;
	margin-left: 100px;
	padding: 1px 0px;
	}

	circle {
	fill: '#99C0DB';
	}
	</style>
	<script type="text/javascript">
	function draw(data) {
	"use strict";
	var margin = 25,
	width = 960 - margin,
	height = 450 - margin;

	var title = d3.select("body")
	.append("h2")
	.attr('id', 'title')
	.text('CO2 Emissions over the years 1962 - 2012')


	var svg = d3.select("body")
	.append("svg")
	.attr("width", width + margin)
	.attr("height", height + margin)
	.append('g')
	.attr('class','chart');

	var myChart = new dimple.chart(svg, data);
	var x = myChart.addCategoryAxis("x", "year");
	x.title = "Year";
	var y = myChart.addMeasureAxis("y", "co2");
	y.title = "CO2 Emissions (tonnes per person)";
	myChart.addSeries("country", dimple.plot.line);
	myChart.addSeries("country", dimple.plot.scatter);
	var myLegend = myChart.addLegend(480, 10, 400, "right");
	myChart.draw();

	myChart.legends = [];

	svg.selectAll("title_text")
	.data(["Click legend to","show/hide countries:"])
	.enter()
	.append("text")
	.attr("x", 380)
	.attr("y", function (d, i) { return 17 + i * 14; })
	.style("font-family", "Ubuntu")
	.style("font-size", "10px")
	.style("color", "Black")
	.text(function (d) { return d; });

	var filterValues = dimple.getUniqueValues(data, "country");
	myLegend.shapes.selectAll("rect")
	.on("click", function (e) {
	var hide = false;
	var newFilters = [];
	filterValues.forEach(function (f) {
	if (f === e.aggField.slice(-1)[0]) {
	hide = true;
	} else {
	newFilters.push(f);
	}
	});
	if (hide) {
	d3.select(this).style("opacity", 0.2);
	} else {
	newFilters.push(e.aggField.slice(-1)[0]);
	d3.select(this).style("opacity", 0.8);
	}
	filterValues = newFilters;
	myChart.data = dimple.filterData(data, "country", filterValues);
	myChart.draw(800);
	});
	};
	</script>
	</head>
	<body>
	<script type="text/javascript">
	d3.csv("co2_data.csv", draw);
	</script>
	</body>
	</html>