macarissa/DataVis_TreeCensus_FourCities.csv

## DataVis_TreeCensus_FourCities.csv

          
            CITY
            TREESperhectare
            NET_CARBON_SEQUESTRATION
            LEAF_AREA
            TREE_VALUE

            
              CHICAGO
              149.2
              410.19
              10917.34
              48570

            
              PHILADELPHIA
              61.81
              313.16
              8281.563
              51277

            
              MINNEAPOLIS
              64.81
              275.15
              6432.62
              35486

            
              KANSAS CITY
              117.31
              545.78
              12219.971
              51377

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Comparison of the Dollar Values of Trees in Four U.S. Cities</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
		<style type="text/css">

			body {
				background-color: #ddddff;
			}

			svg {
				background-color: white;
			}

		</style>
	</head>
	<body>

		<script type="text/javascript">


			var svg = d3.select("body")
						.append("svg")
						.attr("width", 600)
						.attr("height", 134);


			d3.csv("DataVis_TreeCensus_FourCities.csv", function(data) {

				data.sort(function(a, b) {
					return d3.descending(+a.TREE_VALUE, +b.TREE_VALUE);

					//If your numeric values aren't sorting properly,
					//try commenting out the line above, and instead using:
					//
					//return d3.descending(+a.lifeSatisfaction, +b.lifeSatisfaction);
					//
					//Data coming in from the CSV is saved as strings (text),
					//so the + signs here force JavaScript to treat those
					//strings instead as numeric values, thereby fixing the
					//sort order (hopefully!).
				});

				var rects = svg.selectAll("rect")
								.data(data)
								.enter()
								.append("rect");

				rects.attr("x", 0)
					.attr("y", function(d, i) {
						return (i * 30)+ 10;
					})
					.attr("width", function(d) {
						return d.TREE_VALUE / 100;
					})
					.attr("height", 24)
					.append("title")
					.text(function(d) {
						return d.CITY + "'s trees are worth US$ " + d.TREE_VALUE + " per hectare";
					});

			});


		</script>

	</body>
</html>
CITY	TREESperhectare	NET_CARBON_SEQUESTRATION	LEAF_AREA	TREE_VALUE
CHICAGO	149.2	410.19	10917.34	48570
PHILADELPHIA	61.81	313.16	8281.563	51277
MINNEAPOLIS	64.81	275.15	6432.62	35486
KANSAS CITY	117.31	545.78	12219.971	51377
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Comparison of the Dollar Values of Trees in Four U.S. Cities</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	background-color: #ddddff;
	}

	svg {
	background-color: white;
	}

	</style>
	</head>
	<body>

	<script type="text/javascript">


	var svg = d3.select("body")
	.append("svg")
	.attr("width", 600)
	.attr("height", 134);



	d3.csv("DataVis_TreeCensus_FourCities.csv", function(data) {

	data.sort(function(a, b) {
	return d3.descending(+a.TREE_VALUE, +b.TREE_VALUE);

	//If your numeric values aren't sorting properly,
	//try commenting out the line above, and instead using:
	//
	//return d3.descending(+a.lifeSatisfaction, +b.lifeSatisfaction);
	//
	//Data coming in from the CSV is saved as strings (text),
	//so the + signs here force JavaScript to treat those
	//strings instead as numeric values, thereby fixing the
	//sort order (hopefully!).
	});

	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	rects.attr("x", 0)
	.attr("y", function(d, i) {
	return (i * 30)+ 10;
	})
	.attr("width", function(d) {
	return d.TREE_VALUE / 100;
	})
	.attr("height", 24)
	.append("title")
	.text(function(d) {
	return d.CITY + "'s trees are worth US$ " + d.TREE_VALUE + " per hectare";
	});

	});


	</script>

	</body>
	</html>