Old school D3 from simpler times

All examples By author By category About

sabeehtaqi

Full window Github gist

Final Project Final

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset='utf-8'>
<title>US Counties</title>
<svg width="960" height="600" fill="none" stroke="#000" stroke-linejoin="round" stroke-linecap="round"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script>
var svg = d3.select("svg");

var Population_Estimate = d3.map();

var path = d3.geoPath();

var x = d3.scaleLinear()
    .domain([100, 11000000])
    .rangeRound([600, 860]);  
  
var color = d3.scaleThreshold()
    .domain(d3.range(1000, 11000000))
    .range(d3.schemeBlues[9]);
  
var g = svg.append("g")
    .attr("class", "key")
    .attr("transform", "translate(0,40)");
  
g.selectAll("rect")
  .data(color.range().map(function(d) {
      d = color.invertExtent(d);
      if (d[0] == null) d[0] = x.domain()[0];
      if (d[1] == null) d[1] = x.domain()[1];
      return d;
   }))
  
.enter().append("rect")
    .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 color(d[0]); });  
  
g.append("text")
    .attr("class", "caption")
    .attr("x", x.range()[0])
    .attr("y", -6)
    .attr("fill", "#000")
    .attr("text-anchor", "start")
    .attr("font-weight", "bold")
    .text("Population Estimate");
  
g.call(d3.axisBottom(x)
    .tickSize(13)
    .tickFormat(function(x, i) { return i ? x : x })
    .tickValues(color.domain()))
  .select(".domain")
    .remove();
  
  var population = "https://raw.githubusercontent.com/sabeehtaqi/FINAL-PROJECT/master/Project%20Data.csv";

d3.queue()
    .defer(d3.json,"https://unpkg.com/us-atlas@1/us/10m.json")
    .defer(d3.csv, population, function(d) { population.set(d.id, +d.	rate2016); })
    .await(ready);
 
  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;
   console.log('json')
    svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
      .attr("fill", function(d) { return color(d.rate = population.get(d.id)); })
      .attr("d", path)
    .append("title")
      .text(function(d) { return d.rate  });
 
  
  console.log(counties[0]);
  svg.selectAll('path.county')
      .data( counties )
    .enter().append("path")
      .attr("d", path)
      .attr("stroke", "#aaa")
      .attr("stroke-width", 0.5);
  svg.append("path")
      .attr("stroke-width", 0.5)
      };
{
  svg.append("path")
      .attr("d", path(topojson.feature(us, us.objects.counties)));
  }
</script>

https://d3js.org/d3.v4.min.js

https://unpkg.com/topojson-client@3