MODULE 4: Tree Species Distribution in Four American Cities

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Tree Species Distribution per Hectare, by Decile, for Four American Cities</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			
			body {
				background-color: white;
                font-family: Helvetica, Arial, sans-serif;
			}

svg {
				background-color: white;
			}

.axis path,
			.axis line {
				fill: none;
				stroke: none;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 10px;
			}

h1 {
				font-size: 24px;
				margin: 0;
			}

p {
				font-size: 12px;
				margin: 10px 0 0 0;
			}

svg {
				background-color: white;
			}

rect:hover {
				fill: #000000;
			}
            
			.y.axis path,
			.y.axis line {
				opacity: 0;
			}
            
		</style>
	</head>
    <body>
<h1>Tree Diversity and the Health of American Cities</h1>
        <p><b>Tree Species Distribution per Hectare, by Decile, for Chicago, Philadelphia, Minneapolis, and Kansas City</b></p><br />
        <p>One measure of the health of an urban ecosystem is its diversity of tree species; the more diverse the forest, the more likely it will rebound from periodic trauma from pests, diseases, and severe weather events. Emerald Ash Borer, for example, has decimated many eastern and midwestern cities' ash populations, to the point where up to 50% of parkway trees have had to be removed.  The resulting deforestration has been costly for regional environments, local economies, and overall community health.</p>
        <p>The <a href="https://www.nrs.fs.fed.us/data/urban/">Urban Tree Census</a> has gathered data from 19 cities across the United States. This U.S. Forest Service-sponsored initiative measures tree species diversity, leaf biomass, net carbon sequestration, and tree values, among other things.  The charts below represent data from Chicago, Philadelphia, Minneapolis, and Kansas City.  The height of the rightmost bar indicates that in each of these cities, the most populous 10% of the species in the region represent over half of the urban canopy.</p><br />
		<script type="text/javascript">

var w = 320;
			
            var h = 320;
            
            var padding = [30, 15, 30, 15]; //top, right, bottom, left
          
            var heightScale = d3.scale.linear()
                        .range([padding[0], h - padding[2]]);
            
            var widthScale = d3.scale.ordinal()
                        .rangeBands([0, w - padding[1] - padding[3] ], 0.1);
            
            var xAxis = d3.svg.axis()
                        .scale(widthScale)
                        .orient("bottom");
            				
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);
			
			d3.csv("DataVis_TreeCensus_CHICAGO.csv", function(data) {

data.sort(function(a, b) {
					return d3.ascending(+a.TREES_PROPORTION, +b.TREES_PROPORTION);

});    
                
                widthScale.domain(data.map(function(d) { return d.DECILE; } ));

heightScale.domain([ 0, d3.max(data, function(d) {
					return +d.TREES_PROPORTION;
				}) 
                ]);