AnaMal08/index.html

## index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v2.min.js"></script>
  <script src="//d3js.org/d3-scale-chromatic.v1.min.js"></script>

<script>

var width=960, height=500;
var svg = d3.select('body').append('svg')
    .attr('width', width)
		.attr('height',height);

var threshold = d3.scaleThreshold()
		.domain([1,10,50,200,800,2000,5000,10000])
		.range(d3.schemeOrRd[9])

  d3.queue()
  	.defer(d3.json, 'https://raw.githubusercontent.com/umbcvis/classes/master/class-12/tracts.json')
  	.defer(d3.json, 'https://raw.githubusercontent.com/umbcvis/classes/master/class-12/population.json')
  	.await(ready);

  var projection = d3.geoConicConformal()
  		.parallels([38+18/60,39+27/60])
  		.rotate([77,-37-40/60]);
  var path = d3.geoPath()
  		.projection(projection);

function ready(error, json, population) {
  if (error) throw error;
  /*geojson = topojson.feature(json, json.objects.tracts).features;
  it is comination of two lines below
  */
  geojson = topojson.feature(json, json.objects.tracts);
  tracts = geojson.features;

  projection.fitSize([960,500], geojson);

  /* + on front of population convert from string to a number
    we do fileter to eliminate first array in the array where is the "county" "population "etc
    */

  tracts.forEach(function(tract) {
    var countyfips = tract.properties.COUNTYFP;
    var tractce = tract.properties.TRACTCE;
    var pop = population.filter(function(d) {return (d[2] === countyfips) &&
                                  (d[3] === tractce);
                      });
    pop = +pop[0][0];
    var aland = tract.properties.ALAND/ 2589975.2356;
    tract.properties.density = pop/aland ;


  });
  svg.selectAll('path.tract')
  			.data(tracts)
  		.enter()
				.append('path')
  			.attr('class','tract')
  			.attr("d", path)
  			.style('stroke','#000')
  			.style('fill', function(d) {return threshold(d.properties.density)})
}
  </script>
	<!DOCTYPE html>
	<meta charset='utf-8'>
	<body>
	<script src="//d3js.org/d3.v4.min.js"></script>
	<script src="//d3js.org/topojson.v2.min.js"></script>
	<script src="//d3js.org/d3-scale-chromatic.v1.min.js"></script>

	<script>

	var width=960, height=500;
	var svg = d3.select('body').append('svg')
	.attr('width', width)
	.attr('height',height);

	var threshold = d3.scaleThreshold()
	.domain([1,10,50,200,800,2000,5000,10000])
	.range(d3.schemeOrRd[9])

	d3.queue()
	.defer(d3.json, 'https://raw.githubusercontent.com/umbcvis/classes/master/class-12/tracts.json')
	.defer(d3.json, 'https://raw.githubusercontent.com/umbcvis/classes/master/class-12/population.json')
	.await(ready);

	var projection = d3.geoConicConformal()
	.parallels([38+18/60,39+27/60])
	.rotate([77,-37-40/60]);
	var path = d3.geoPath()
	.projection(projection);

	function ready(error, json, population) {
	if (error) throw error;
	/*geojson = topojson.feature(json, json.objects.tracts).features;
	it is comination of two lines below
	*/
	geojson = topojson.feature(json, json.objects.tracts);
	tracts = geojson.features;

	projection.fitSize([960,500], geojson);

	/* + on front of population convert from string to a number
	we do fileter to eliminate first array in the array where is the "county" "population "etc
	*/

	tracts.forEach(function(tract) {
	var countyfips = tract.properties.COUNTYFP;
	var tractce = tract.properties.TRACTCE;
	var pop = population.filter(function(d) {return (d[2] === countyfips) &&
	(d[3] === tractce);
	});
	pop = +pop[0][0];
	var aland = tract.properties.ALAND/ 2589975.2356;
	tract.properties.density = pop/aland ;


	});
	svg.selectAll('path.tract')
	.data(tracts)
	.enter()
	.append('path')
	.attr('class','tract')
	.attr("d", path)
	.style('stroke','#000')
	.style('fill', function(d) {return threshold(d.properties.density)})
	}
	</script>