Georgians crowd into metro Atlanta. Here's how much.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 60px;                  
  height: 28px;                 
  padding: 2px;                    
  background: green;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;         
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}

#title {
  font-size: 36px;
}

#byline{
  font-size: 12px;
}

#subtitle{
  font-size: 18px;
}

#legendholder {
  font-size: 12px;
}

#chart {
  font-size: 12px;
}

#footer {
  font-size: 12px;
}

#decorative_bar {
  background-color: #bcbd22;
  height: 10px;
}
/* CSS goes here. */

</style>
<body>

<div id="subtitle">
  <br>
  <img src="https://greencracker.net/wp-content/uploads/2015/06/noun_23892_cc.png" align="left"><br>
  About 10 million people were living in Georgia as of 2014.<br>
  Of those, about 4.5 million cluster in Fulton and neighboring counties.<br><br><br>
</div>

<div id="legendholder">
<button id="click_to_run" onclick="do_update()">
        View by Population
    </button>
<button id="click_to_normal" onclick="do_normal()">
        View Normal
    </button><br><br>
  </div> 
<div id="decorative_bar"></div>
Hover over a county for details
<div id="chart">
  </div>
<div> <img src="https://greencracker.net/wp-content/uploads/2015/06/sharealike.svg"></div>
<div id="decorative_bar"></div>

<div id="footer">
  <h1>Notes, Thanks & How-to:</h1>
  <p>Thanks to <a href="https://greencracker.net/wp-content/uploads/2015/06/cartogram.js">cartogram.js</a>, a JavaScript implementation of
        <a href="https://lambert.nico.free.fr/tp/biblio/Dougeniketal1985.pdf">an algoritm to construct continuous area cartograms</a>,
        by James A. Dougenik, Nicholas R. Chrisman and Duane R. Niemeyer,
        ©1985 by the Association of American Geographers. 
        <p>Cartogram.js is designed and built by <a href="https://stamen.com/studio/shawn">Shawn Allen</a> at
        <a href="https://stamen.com">Stamen</a> and has a home on <a href="https://github.com/shawnbot/d3-cartogram/" target="_blank">Github</a>. It runs with
        <a href="https://d3js.org">d3.js</a> by Mike Bostock.
        <p>
          This Georgia example runs with d3.v2, an older version.
          It's based on a tutorial from <a href="https://www.limn.co.za/2013/10/making-a-cartogram/" target="_blank">Jeff Fletcher on his South Africa dataviz blog Limn</a>. He bundles up the <a href="https://www.limn.co.za/dev/assets/cartogram.zip">appropriate versions of cartogram, topojson and d3 here.</a>
        <p>
          Data source: Population as of July, 2014 from the <a href ="https://factfinder.census.gov/faces/tableservices/jsf/pages/productview.xhtml?src=bkmk" target="_blank">U.S. Census</a>, downloaded June 26, 2015.
        <p>Population icon <a href ="https://thenounproject.com/search/?q=population&i=23892" target="_blank">by Wilson Joseph from the Noun Project.</a>

var width = 1000,
    height = 775,
    margin = {top: 10, bottom: 10, left: 10, right: 10};

var tooltip_div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);

var svg = d3.select("#chart").append("svg")
    .attr("width", width-margin.left-margin.right)
    .attr("height", height-margin.top-margin.bottom);

// var map = d3.select("#map");

var counties = svg.append("g")
  .attr("id", "counties")
  .selectAll("path");

var projection = d3.geo.albers()
    .origin([-83, 33.5])
    .parallels([30, 36])
    .scale(9000);

var topology,
    geometries,
    carto_features;

var number_formatter = d3.format("0,000");

var pop_data = d3.map();

var carto = d3.cartogram()
            .projection(projection)
            .properties(function (d) {
                // this add the "properties" properties to the geometries
                return d.properties;
            });

d3.csv("pop_data.csv", function (data) {
            data.forEach(function (d) {
                pop_data.set(d.GEOID10, [d.NAME10, d.POP]);
            })
        });

d3.json("topo_GA_counties_simple.json", function (data) {
  topology = data;
  geometries = topology.objects['geo_GA_counties_simplified'].geometries;

var features = carto.features(topology, geometries),
    path = d3.geo.path()
      .projection(projection);

//add this jive to make up for counties with a space in the name: .replace(/\s+/g, '')
  counties = counties.data(features)
      .enter()
      .append("path")
      .attr("class", "county")
      // .attr("id", function (d) {return d.properties.GEOID10}) 
      // .attr("fill", function (d, i) {return color(i);} )
      .attr("id", function (d) {return d.properties.NAME10.replace(/\s+/g, '');})
      .on("mouseover", function (d) {
        console.log(number_formatter(pop_data.get(d.properties['GEOID10'])[1]))

d3.selectAll("#"+d.properties.NAME10.replace(/\s+/g, '')).style("fill", "green")
        tooltip_div.transition()
          .duration(200)
          .style("opacity", 0.9)
        tooltip_div .html(d.properties.NAME10 + "<br>" +
          number_formatter(pop_data.get(d.properties['GEOID10'])[1]))
          .style("left", (d3.event.pageX) + "px")
          .style("top", (d3.event.pageY -28) + "px");
      })
      .on("mouseout", function (d) {
         d3.selectAll("#"+d.properties.NAME10.replace(/\s+/g, '')).style("fill", "white")
        tooltip_div.transition()
          .duration(500)
          .style("opacity", 0);
      })

.attr("fill", "white")
      .attr("d", path)
      .attr("stroke", "black")
      .attr("stroke-width", "0.3px")

do_update();

// NB population estimate as of July 14!
})

function do_normal() {

d3.select("#click_to_normal").text("thinking...");
  setTimeout(function () {

console.log("doing normal")

var features = carto.features(topology, geometries),
    path = d3.geo.path()
      .projection(projection);

counties.data(features)
      .transition()
        .duration(3750)
        .each("end", function () {
            d3.select("#click_to_normal").text("View Normal")
        })
       .attr("d", path);
  }, 10);

};

function do_update() {

d3.select("#click_to_run").text("thinking...");
  setTimeout(function () {

carto.value(function (d) {
      console.log(+pop_data.get(d.properties['GEOID10'])[1])
      return +pop_data.get(d.properties['GEOID10'])[1];
    });

if (carto_features == undefined)
      carto_features = carto(topology, geometries).features;

counties.data(carto_features)
    .text(function (d) {return d.properties.GEOID10;})
    // .on("mouseover", console.log("moused"));

// console.log("line 118")

counties.transition()
      .duration(3750)
      .each("end", function () {
          d3.select("#click_to_run").text("View by Population")
      })
      .attr("d", carto.path);
  }, 10);

}

</script>

</body>
</html>

Modified http://greencracker.net/wp-content/uploads/2015/06/d3.v2.min_.js to a secure url

Modified http://greencracker.net/wp-content/uploads/2015/06/topojson.js to a secure url

Modified http://greencracker.net/wp-content/uploads/2015/06/cartogram.js to a secure url

Modified http:// to a secure url

https://greencracker.net/wp-content/uploads/2015/06/d3.v2.min_.js

https://greencracker.net/wp-content/uploads/2015/06/topojson.js

https://greencracker.net/wp-content/uploads/2015/06/cartogram.js

https://