espetro · April 27, 2017 21:15 · espetro · Apr 27, 2017
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="UTF-8">
 		<style>
 			.bar {
 				fill: grey;
 			}

 			.bar:hover {
 				fill: steelblue;
 			}

 			.axis text {
 				font: 10px serif;
 			}

 			.axis path {
 				fill: none;
 				stroke: #000;
 				shape-rendering: crispEdges;
 			}

 		</style>
 	</head>
 	<body>
 		<svg></svg>
 		<script src="//d3js.org/d3.v3.min.js"></script>
 		<script>
 			
 		var margin = {top:30, left:60, bottom:30, right:60},
 			width = 960 - margin.left - margin.right,
 			height = 500 - margin.bottom - margin.top;

 		var x = d3.scale.ordinal().rangeRoundBands([0,width], .1),
 			y = d3.scale.linear().range([height, 0]);

 		var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(function(state) {
 			return state.substr(0,2).toUpperCase();
 		}),
 			yAxis = d3.svg.axis().scale(y).orient("left");

 		var chart = d3.select("svg")
 			.attr("class", "chart")
 			.attr("width", width + margin.left + margin.right)
 			.attr("height", height + margin.bottom + margin.top)
 		  .append("g")
 		  	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


 		d3.tsv("states.tsv", dataFix, function(error, data) {
 			
 			x.domain( data.map(function(dp){ return dp["State"]; }) );
 			y.domain([0, d3.max(data, function(dp){ return dp["Area"]; })]);

 			chart.append("g")
 				.attr("class", "x axis")
 				.attr("transform", "translate(0," + height +")") //moves SVG's X axis to usual coord's X
 				.call(xAxis);

 			chart.append("g")
 				.attr("class", "y axis")
 				.call(yAxis);

 			chart.append("text")
 				.attr("x", (width /5) *2)
 				.attr("y", height /data.length +1)
 				.style("font", "24px serif")
 				.text("Total area per US State");
 				

 			chart.selectAll(".bar")
 				.data(data)
 			  .enter()
 			  .append("rect")
 			  	.attr("class", "bar")
 			  	.attr("x", function(dp){ return x(dp["State"]); })
 			  	.attr("y", function(dp){ return y(dp["Area"]); })
 			  	.attr("width", x.rangeBand() -1)
 			  	.attr("height", function(dp){ return height - y(dp["Area"]); });

 		});


 		function dataFix(dp) {
 			dp["Area"] = +dp["Area"];
 			dp["State"] = dp["State"];
 			return dp;
 		}

 		</script>
 	</body>
 </html>
diff --git a/states.tsv b/states.tsv
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<style>
	.bar {
	fill: grey;
	}

	.bar:hover {
	fill: steelblue;
	}

	.axis text {
	font: 10px serif;
	}

	.axis path {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	</style>
	</head>
	<body>
	<svg></svg>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var margin = {top:30, left:60, bottom:30, right:60},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.bottom - margin.top;

	var x = d3.scale.ordinal().rangeRoundBands([0,width], .1),
	y = d3.scale.linear().range([height, 0]);

	var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(function(state) {
	return state.substr(0,2).toUpperCase();
	}),
	yAxis = d3.svg.axis().scale(y).orient("left");

	var chart = d3.select("svg")
	.attr("class", "chart")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.bottom + margin.top)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


	d3.tsv("states.tsv", dataFix, function(error, data) {

	x.domain( data.map(function(dp){ return dp["State"]; }) );
	y.domain([0, d3.max(data, function(dp){ return dp["Area"]; })]);

	chart.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height +")") //moves SVG's X axis to usual coord's X
	.call(xAxis);

	chart.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	chart.append("text")
	.attr("x", (width /5) *2)
	.attr("y", height /data.length +1)
	.style("font", "24px serif")
	.text("Total area per US State");


	chart.selectAll(".bar")
	.data(data)
	.enter()
	.append("rect")
	.attr("class", "bar")
	.attr("x", function(dp){ return x(dp["State"]); })
	.attr("y", function(dp){ return y(dp["Area"]); })
	.attr("width", x.rangeBand() -1)
	.attr("height", function(dp){ return height - y(dp["Area"]); });

	});


	function dataFix(dp) {
	dp["Area"] = +dp["Area"];
	dp["State"] = dp["State"];
	return dp;
	}

	</script>
	</body>
	</html>
State	Population	Income	Illiteracy	Life Exp	Murder	HS Grad	Frost	Area
Alabama	3615	3624	2.1	69.05	15.1	41.3	20	50708
Alaska	365	6315	1.5	69.31	11.3	66.7	152	566432
Arizona	2212	4530	1.8	70.55	7.8	58.1	15	113417
Arkansas	2110	3378	1.9	70.66	10.1	39.9	65	51945
California	21198	5114	1.1	71.71	10.3	62.6	20	156361
Colorado	2541	4884	0.7	72.06	6.8	63.9	166	103766
Connecticut	3100	5348	1.1	72.48	3.1	56	139	4862
Delaware	579	4809	0.9	70.06	6.2	54.6	103	1982
Florida	8277	4815	1.3	70.66	10.7	52.6	11	54090
Georgia	4931	4091	2	68.54	13.9	40.6	60	58073
Hawaii	868	4963	1.9	73.6	6.2	61.9	0	6425
Idaho	813	4119	0.6	71.87	5.3	59.5	126	82677
Illinois	11197	5107	0.9	70.14	10.3	52.6	127	55748
Indiana	5313	4458	0.7	70.88	7.1	52.9	122	36097
Iowa	2861	4628	0.5	72.56	2.3	59	140	55941
Kansas	2280	4669	0.6	72.58	4.5	59.9	114	81787
Kentucky	3387	3712	1.6	70.1	10.6	38.5	95	39650
Louisiana	3806	3545	2.8	68.76	13.2	42.2	12	44930
Maine	1058	3694	0.7	70.39	2.7	54.7	161	30920
Maryland	4122	5299	0.9	70.22	8.5	52.3	101	9891
Massachusetts	5814	4755	1.1	71.83	3.3	58.5	103	7826
Michigan	9111	4751	0.9	70.63	11.1	52.8	125	56817
Minnesota	3921	4675	0.6	72.96	2.3	57.6	160	79289
Mississippi	2341	3098	2.4	68.09	12.5	41	50	47296
Missouri	4767	4254	0.8	70.69	9.3	48.8	108	68995
Montana	746	4347	0.6	70.56	5	59.2	155	145587
Nebraska	1544	4508	0.6	72.6	2.9	59.3	139	76483
Nevada	590	5149	0.5	69.03	11.5	65.2	188	109889
New Hampshire	812	4281	0.7	71.23	3.3	57.6	174	9027
New Jersey	7333	5237	1.1	70.93	5.2	52.5	115	7521
New Mexico	1144	3601	2.2	70.32	9.7	55.2	120	121412
New York	18076	4903	1.4	70.55	10.9	52.7	82	47831
North Carolina	5441	3875	1.8	69.21	11.1	38.5	80	48798
North Dakota	637	5087	0.8	72.78	1.4	50.3	186	69273
Ohio	10735	4561	0.8	70.82	7.4	53.2	124	40975
Oklahoma	2715	3983	1.1	71.42	6.4	51.6	82	68782
Oregon	2284	4660	0.6	72.13	4.2	60	44	96184
Pennsylvania	11860	4449	1	70.43	6.1	50.2	126	44966
Rhode Island	931	4558	1.3	71.9	2.4	46.4	127	1049
South Carolina	2816	3635	2.3	67.96	11.6	37.8	65	30225
South Dakota	681	4167	0.5	72.08	1.7	53.3	172	75955
Tennessee	4173	3821	1.7	70.11	11	41.8	70	41328
Texas	12237	4188	2.2	70.9	12.2	47.4	35	262134
Utah	1203	4022	0.6	72.9	4.5	67.3	137	82096
Vermont	472	3907	0.6	71.64	5.5	57.1	168	9267
Virginia	4981	4701	1.4	70.08	9.5	47.8	85	39780
Washington	3559	4864	0.6	71.72	4.3	63.5	32	66570
West Virginia	1799	3617	1.4	69.48	6.7	41.6	100	24070
Wisconsin	4589	4468	0.7	72.48	3	54.5	149	54464
Wyoming	376	4566	0.6	70.29	6.9	62.9	173	97203