kvnphllps/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Uranium Ores & Concentrates </title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
</head>
<body>
<hr>
	<h1>Uranium Ores & Concentrates: United States production in metric tons by year (2000-2010).</h1>
<hr>
	<svg width="1100" height="210">
		<circle cx="100" cy="100" r="100" fill="gold" />
		<circle cx="100" cy="100" r="50" fill="pink" />
		<circle cx="310" cy="100" r="100" fill="pink" />
		<circle cx="310" cy="100" r="50" fill="gold" />
		<circle cx="520" cy="100" r="100" fill="gold" />
		<circle cx="520" cy="100" r="50" fill="pink" />
		<circle cx="730" cy="100" r="100" fill="pink" />
		<circle cx="730" cy="100" r="50" fill="gold" />
		<circle cx="940" cy="100" r="100" fill="gold" />
		<circle cx="940" cy="100" r="50" fill="pink" />
	</svg>
	<hr>
	<script type="text/javascript">

		// Define our working SVG area of the page
		var currSVG = d3.select("body")
						.append("svg")
						.attr("width",1100)
						.attr("height",400)
						.attr("background", "pink");

			//Load in contents of CSV file
		d3.csv("uranium_production_metric_tons.csv", function(data) {

				//Now CSV contents have been transformed into
				//an array of JSON objects.

				//Log 'data' to the console, for verification.
				// console.log(data);

			var rects = currSVG.selectAll("rect")
					.data(data) // data gets bound
					.enter() // data enters the stage
					.append("rect") //what we are drawing with

				rects.attr("fill","gold")
					.attr("x",0) // each bar starts at same x position
					.attr("y", function(d, i){ //"d" here is a single data point, while "i" is the index
					   		return i * 20;
					   		}) // y position set to index time 10 pixel units.
					.attr("width", function(d){
					   		return d.USA/2; // Divide by 2 to make bars fit on screen ... responsive design, ha!
					   		})
					.attr("height",10)
					   .append("title")
					   .text(function(d) {
						return d.USA + " metric tons of uranium ore & concentrate production in " + d.Year;
					   });
		});
	</script>
</body>
</html>


## uranium_production_metric_tons.csv

          
            Year
            Australia
            Brazil
            Canada
            China
            CzechRepublic
            France
            Germany
            Hungary
            India
            Iran
            Kazakhstan
            Malawi
            Namibia
            Niger
            Pakistan
            Romania
            RussianFederation
            SouthAfrica
            Ukraine
            USA
            Uzbekistan

            
              2010
              5918
              174
              9775
              1350
              254
              9
              8
              6
              400
              7.3
              17803
              681
              4503
              4198
              45
              80
              3562
              582
              837
              1630
              2874

            
              2009
              7934
              338
              10174
              1200
              258
              8
              0
              1
              290
              8.14
              14020
              90
              4626
              3241
              50
              80
              3565
              563
              815
              1594
              2657

            
              2008
              8433
              390
              9000
              770
              275
              5
              0
              1
              250
              6.26
              8512
              0
              4365
              2993
              45
              80
              3521
              566
              830
              1492
              2283

            
              2007
              8602
              357
              9476
              710
              307
              2
              41
              1
              250
              5
              6633
              0
              2832
              3153
              40
              80
              3413
              540
              800
              1747
              2270

            
              2006
              7593
              231
              9862
              750
              375
              3
              65
              2
              230
              6
              5281
              0
              3076
              3434
              40
              90
              3190
              534
              810
              1805
              2260

            
              2005
              9512
              129
              11628
              750
              409
              4
              94
              3
              230
              0
              4346
              0
              3146
              3093
              40
              90
              3285
              673
              830
              1171
              2300

            
              2004
              8982
              352
              11597
              730
              412
              6
              77
              2
              230
              0
              3719
              
              3038
              3273
              38
              90
              3290
              747
              855
              943
              2087

            
              2003
              7573
              271
              10455
              730
              452
              9
              150
              4
              230
              0
              3327
              
              2037
              3143
              40
              90
              3073
              763
              800
              769
              1603

            
              2002
              6854
              339
              11607
              730
              465
              18
              221
              10
              230
              0
              2826
              
              2333
              3076
              38
              90
              2850
              828
              800
              902
              1859

            
              2001
              7720
              66
              12522
              700
              456
              184
              27
              10
              230
              -
              2114
              
              2239
              2919
              46
              85
              3090
              878
              750
              1015
              1945

            
              2000
              7579
              11
              10683
              700
              507
              296
              28
              10
              207
              -
              1870
              
              2715
              2914
              23
              86
              2760
              798
              1005
              1522
              2028
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Uranium Ores & Concentrates </title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	</head>
	<body>
	<hr>
	<h1>Uranium Ores & Concentrates: United States production in metric tons by year (2000-2010).</h1>
	<hr>
	<svg width="1100" height="210">
	<circle cx="100" cy="100" r="100" fill="gold" />
	<circle cx="100" cy="100" r="50" fill="pink" />
	<circle cx="310" cy="100" r="100" fill="pink" />
	<circle cx="310" cy="100" r="50" fill="gold" />
	<circle cx="520" cy="100" r="100" fill="gold" />
	<circle cx="520" cy="100" r="50" fill="pink" />
	<circle cx="730" cy="100" r="100" fill="pink" />
	<circle cx="730" cy="100" r="50" fill="gold" />
	<circle cx="940" cy="100" r="100" fill="gold" />
	<circle cx="940" cy="100" r="50" fill="pink" />
	</svg>
	<hr>
	<script type="text/javascript">

	// Define our working SVG area of the page
	var currSVG = d3.select("body")
	.append("svg")
	.attr("width",1100)
	.attr("height",400)
	.attr("background", "pink");

	//Load in contents of CSV file
	d3.csv("uranium_production_metric_tons.csv", function(data) {

	//Now CSV contents have been transformed into
	//an array of JSON objects.

	//Log 'data' to the console, for verification.
	// console.log(data);

	var rects = currSVG.selectAll("rect")
	.data(data) // data gets bound
	.enter() // data enters the stage
	.append("rect") //what we are drawing with

	rects.attr("fill","gold")
	.attr("x",0) // each bar starts at same x position
	.attr("y", function(d, i){ //"d" here is a single data point, while "i" is the index
	return i * 20;
	}) // y position set to index time 10 pixel units.
	.attr("width", function(d){
	return d.USA/2; // Divide by 2 to make bars fit on screen ... responsive design, ha!
	})
	.attr("height",10)
	.append("title")
	.text(function(d) {
	return d.USA + " metric tons of uranium ore & concentrate production in " + d.Year;
	});
	});
	</script>
	</body>
	</html>
Year	Australia	Brazil	Canada	China	CzechRepublic	France	Germany	Hungary	India	Iran	Kazakhstan	Malawi	Namibia	Niger	Pakistan	Romania	RussianFederation	SouthAfrica	Ukraine	USA	Uzbekistan
2010	5918	174	9775	1350	254	9	8	6	400	7.3	17803	681	4503	4198	45	80	3562	582	837	1630	2874
2009	7934	338	10174	1200	258	8	0	1	290	8.14	14020	90	4626	3241	50	80	3565	563	815	1594	2657
2008	8433	390	9000	770	275	5	0	1	250	6.26	8512	0	4365	2993	45	80	3521	566	830	1492	2283
2007	8602	357	9476	710	307	2	41	1	250	5	6633	0	2832	3153	40	80	3413	540	800	1747	2270
2006	7593	231	9862	750	375	3	65	2	230	6	5281	0	3076	3434	40	90	3190	534	810	1805	2260
2005	9512	129	11628	750	409	4	94	3	230	0	4346	0	3146	3093	40	90	3285	673	830	1171	2300
2004	8982	352	11597	730	412	6	77	2	230	0	3719		3038	3273	38	90	3290	747	855	943	2087
2003	7573	271	10455	730	452	9	150	4	230	0	3327		2037	3143	40	90	3073	763	800	769	1603
2002	6854	339	11607	730	465	18	221	10	230	0	2826		2333	3076	38	90	2850	828	800	902	1859
2001	7720	66	12522	700	456	184	27	10	230	-	2114		2239	2919	46	85	3090	878	750	1015	1945
2000	7579	11	10683	700	507	296	28	10	207	-	1870		2715	2914	23	86	2760	798	1005	1522	2028