qaisarmehmood/index.html

## index.html

<!DOCTYPE html>
<meta charset='utf-8'>
<title>Class Project</title>
<style>
body {
  margin: 0;
  background-color: #eee;
}
  .info {
  position: absolute;
  top: 50px;
  left: 50px;
}
  </style>
<div class="info"></div>
<svg width="960" height="500" fill="none" stroke="#000" stroke-linejoin="round" stroke-linecap="round">
<defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="5"></feGaussianBlur>
    </filter>
  </defs>
</svg>


<div class="info" style="position: absolute; top: 50px; left: 50px"></div> <!-- NEW -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="//d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>

  // add title
  var svg = d3.select("svg");
var layer1 = svg.append("g");
var path = d3.geoPath();
  var width;
  var text = svg.append('text')
 .attr('width', width)
 .attr('x', "14em" )
    .attr('y', "1em")
    .style('font-size', '1.5em')
    .style('text-anchor', 'middle')
    .text('Population of Newyork under 5 years')
  	.style("fill", "black")


  // New York central state plane, EPSG: 2829
// (central meridian = - 76.5833..., latitute of origin = 40)
var projection = d3.geoTransverseMercator()
        .rotate([76 + 35 / 60, - 40]);

var path = d3.geoPath()
    .projection(projection);


var threshold = d3.scaleThreshold()
    .domain([1, 2, 4, 5, 6, 8, 10 ])
    .range(d3.schemeOrRd[8]);

// This demo modified slightly from https://bl.ocks.org/mbostock/4108203

var svg = d3.select("svg").append("g")
    .attr('transform', 'scale(4)translate(-700, -100)');

var path = d3.geoPath();

var filename = "https://raw.githubusercontent.com/qaisarmehmood/umbcvis/master/Newyork.population%20Data.csv"

d3.queue()
    .defer(d3.json,"https://unpkg.com/us-atlas@1/us/10m.json")
    .defer(d3.csv, filename)
    .await(ready);
  addLegend();

function ready(error, us, csv) {
  if (error) throw error;

  console.log('here is the csv data:', csv);

  var counties = topojson.feature(us, us.objects.counties).features;

  // Examine one of the county features in the developer console.
  // The "id" attribute is a 5-digit GEOID (state + county).
  // See: https://www.census.gov/geo/reference/geoidentifiers.html
  console.log(counties[0]);

  // NEW: Create a d3.map() so we can query CSV data by "id" = FIPS code
   var data = d3.map();
  csv.forEach(function(d) { data.set(d.FIPS, d)})
  newyork = counties.filter(function(d) { return d.id.slice(0,2) === "36"; })
  svg.append("g").selectAll("path")
      .data(newyork)
  	.enter().append ("path")
      .attr("d", path)
        .style("fill", function(d) { return threshold(data.get(d.id) ? data.get(d.id).Percent : null);  })


  // Get New York counties
 // Get New York counties
  //newyork = counties.filter(function(d) { return d.id.slice(0,2) === "36"; })
   svg.selectAll('path.county')
      .data( newyork )
    .enter().append("path")
      .attr("d", path)
      .attr("class", "county")
      .attr("stroke", "#aaa")
      .attr("stroke-width", 1)
    // .attr("fill", function(d) { return threshold(d.county); })
    .on('mouseover', function(d, i) {
     d3.select(this).attr('stroke-width', 2).raise()
          console.log(d.id, data.get(d.id));
          d3.select(".info").html(data.get(d.id)["County Name"] +
                           "<br>Percent: "
                              + d3.format(",d")(data.get(d.id).Percent))

      })
      .on('mouseout', function(d) {
      //d3.select(this).attr('fill', '#fff');
        d3.select(".info").html("")
        d3.select(this).attr('stroke-width', 0.5)
      });

  svg.append("path")
      .attr("stroke-width", 0.5)
      .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));

  svg.append("path")
      .attr("d", path(topojson.feature(us, us.objects.nation)));

  projection.fitExtent([[10,10],[960 - 20, 500 - 20]], { type: "FeatureCollection", features: newyork });


  // Drop-shadow styling (this is blurred shadow)
  svg.append("use")
      .attr("xlink:href", "#nation")
      .attr("fill-opacity", 0.2)
      .attr("filter", "url(#blur)");

  // Drop-shadow styling (this is white overlay)
  svg.append("use")
      .attr("xlink:href", "#nation")
      .attr("fill", "#fff");
}
  function addLegend() {

  var formatNumber = d3.format("d");

  var x = d3.scalePow().exponent('.15')
      .domain([1, 10])
      .range([0, 300]);

  var xAxis = d3.axisBottom(x)
      .tickSize(13)
      .tickValues(threshold.domain())
      .tickFormat(formatNumber)

  var g = d3.select('svg').append('g')
      .attr('transform', 'translate(50, 120)')
      .call(xAxis);


  g.select(".domain")
      .remove();

  g.selectAll("rect")
    .data(threshold.range().map(function(color) {
      var d = threshold.invertExtent(color);
      if (d[0] == null) d[0] = x.domain()[0];
      if (d[1] == null) d[1] = x.domain()[1];
      return d;
    }))
    .enter().insert("rect", ".tick")
      .attr("height", 8)
      .attr("x", function(d) { return x(d[0]); })
      .attr("width", function(d) { return x(d[1]) - x(d[0]); })
      .attr("fill", function(d) { return threshold(d[0]); });

  g.append("text")
      .attr("fill", "#000")
      .attr("font-weight", "bold")
      .attr("text-anchor", "start")
      .attr("y", -6)
      .text("Percentage of under 5 in a county");
}

</script>

	<!DOCTYPE html>
	<meta charset='utf-8'>
	<title>Class Project</title>
	<style>
	body {
	margin: 0;
	background-color: #eee;
	}
	.info {
	position: absolute;
	top: 50px;
	left: 50px;
	}
	</style>
	<div class="info"></div>
	<svg width="960" height="500" fill="none" stroke="#000" stroke-linejoin="round" stroke-linecap="round">
	<defs>
	<filter id="blur">
	<feGaussianBlur stdDeviation="5"></feGaussianBlur>
	</filter>
	</defs>
	</svg>


	<div class="info" style="position: absolute; top: 50px; left: 50px"></div> <!-- NEW -->
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://unpkg.com/topojson-client@3"></script>
	<script src="//d3js.org/d3-scale-chromatic.v1.min.js"></script>
	<script>

	// add title
	var svg = d3.select("svg");
	var layer1 = svg.append("g");
	var path = d3.geoPath();
	var width;
	var text = svg.append('text')
	.attr('width', width)
	.attr('x', "14em" )
	.attr('y', "1em")
	.style('font-size', '1.5em')
	.style('text-anchor', 'middle')
	.text('Population of Newyork under 5 years')
	.style("fill", "black")




	// New York central state plane, EPSG: 2829
	// (central meridian = - 76.5833..., latitute of origin = 40)
	var projection = d3.geoTransverseMercator()
	.rotate([76 + 35 / 60, - 40]);

	var path = d3.geoPath()
	.projection(projection);


	var threshold = d3.scaleThreshold()
	.domain([1, 2, 4, 5, 6, 8, 10 ])
	.range(d3.schemeOrRd[8]);

	// This demo modified slightly from https://bl.ocks.org/mbostock/4108203

	var svg = d3.select("svg").append("g")
	.attr('transform', 'scale(4)translate(-700, -100)');

	var path = d3.geoPath();

	var filename = "https://raw.githubusercontent.com/qaisarmehmood/umbcvis/master/Newyork.population%20Data.csv"

	d3.queue()
	.defer(d3.json,"https://unpkg.com/us-atlas@1/us/10m.json")
	.defer(d3.csv, filename)
	.await(ready);
	addLegend();

	function ready(error, us, csv) {
	if (error) throw error;

	console.log('here is the csv data:', csv);

	var counties = topojson.feature(us, us.objects.counties).features;

	// Examine one of the county features in the developer console.
	// The "id" attribute is a 5-digit GEOID (state + county).
	// See: https://www.census.gov/geo/reference/geoidentifiers.html
	console.log(counties[0]);

	// NEW: Create a d3.map() so we can query CSV data by "id" = FIPS code
	var data = d3.map();
	csv.forEach(function(d) { data.set(d.FIPS, d)})
	newyork = counties.filter(function(d) { return d.id.slice(0,2) === "36"; })
	svg.append("g").selectAll("path")
	.data(newyork)
	.enter().append ("path")
	.attr("d", path)
	.style("fill", function(d) { return threshold(data.get(d.id) ? data.get(d.id).Percent : null); })



	// Get New York counties
	// Get New York counties
	//newyork = counties.filter(function(d) { return d.id.slice(0,2) === "36"; })
	svg.selectAll('path.county')
	.data( newyork )
	.enter().append("path")
	.attr("d", path)
	.attr("class", "county")
	.attr("stroke", "#aaa")
	.attr("stroke-width", 1)
	// .attr("fill", function(d) { return threshold(d.county); })
	.on('mouseover', function(d, i) {
	d3.select(this).attr('stroke-width', 2).raise()
	console.log(d.id, data.get(d.id));
	d3.select(".info").html(data.get(d.id)["County Name"] +
	"<br>Percent: "
	+ d3.format(",d")(data.get(d.id).Percent))

	})
	.on('mouseout', function(d) {
	//d3.select(this).attr('fill', '#fff');
	d3.select(".info").html("")
	d3.select(this).attr('stroke-width', 0.5)
	});

	svg.append("path")
	.attr("stroke-width", 0.5)
	.attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));

	svg.append("path")
	.attr("d", path(topojson.feature(us, us.objects.nation)));

	projection.fitExtent([[10,10],[960 - 20, 500 - 20]], { type: "FeatureCollection", features: newyork });



	// Drop-shadow styling (this is blurred shadow)
	svg.append("use")
	.attr("xlink:href", "#nation")
	.attr("fill-opacity", 0.2)
	.attr("filter", "url(#blur)");

	// Drop-shadow styling (this is white overlay)
	svg.append("use")
	.attr("xlink:href", "#nation")
	.attr("fill", "#fff");
	}
	function addLegend() {

	var formatNumber = d3.format("d");

	var x = d3.scalePow().exponent('.15')
	.domain([1, 10])
	.range([0, 300]);

	var xAxis = d3.axisBottom(x)
	.tickSize(13)
	.tickValues(threshold.domain())
	.tickFormat(formatNumber)

	var g = d3.select('svg').append('g')
	.attr('transform', 'translate(50, 120)')
	.call(xAxis);


	g.select(".domain")
	.remove();

	g.selectAll("rect")
	.data(threshold.range().map(function(color) {
	var d = threshold.invertExtent(color);
	if (d[0] == null) d[0] = x.domain()[0];
	if (d[1] == null) d[1] = x.domain()[1];
	return d;
	}))
	.enter().insert("rect", ".tick")
	.attr("height", 8)
	.attr("x", function(d) { return x(d[0]); })
	.attr("width", function(d) { return x(d[1]) - x(d[0]); })
	.attr("fill", function(d) { return threshold(d[0]); });

	g.append("text")
	.attr("fill", "#000")
	.attr("font-weight", "bold")
	.attr("text-anchor", "start")
	.attr("y", -6)
	.text("Percentage of under 5 in a county");
	}

	</script>