TheNpercent

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">

<style>

path {
  fill: #ccc;
  stroke: #fff;
  stroke-width: .5px;
}
.center-block {
  width: 240px;
    float: none;
    margin: 0 auto;
}

.states {
  fill: none;
  stroke: #424242;
  stroke-linejoin: round;
  opacity: .5;
}

#slider-range-max{
  width:600px;
  height:10px;
  margin-bottom: 10px;
  margin-left: auto ;
  margin-right: auto ;

}

#amount{
  width:14px;
  font-family: 'Open Sans', sans-serif; font-weight: 400;font-size: 18px;
}

p { font-family: 'Open Sans', sans-serif; font-weight: 400;  text-align:center;
 }
.most{
  width:90;
}
.least{
  width:90;
}

.density{
  width:200px;
}

</style>

<body>

<p>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
  <label for="amount">percent of the population lives in these counties.</label>
</p>
<div id="slider-range-max">
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<script>

$(function() {
    $( "#slider-range-max" ).slider({
      range: "max",
      min: 0,
      max: 100,
      value: 0,
      slide: function( event, ui ) {
        toggleOnOne();
        $( "#amount" ).val( ui.value );
        var w = ui.value;
        amountWidth(w);
        var v = w/100;
        if($('#toggle-two').prop('checked')){
          fillCountiesMost(v);}
        else {
          fillCountiesLeast(v);
        }
      }

});
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );

});

$(function() {
    $('#toggle-one').bootstrapToggle({
      on: 'Comparison',
      off: 'Density'
    });
  })

$(function() {
    $('#toggle-two').bootstrapToggle({
      on: 'Most Area',
      off: 'Least Area'
    });
  })
  $(function() {
    $('#toggle-one').change(function() {
      if($(this).prop('checked')) {
        fillCountiesLeast(0);
      }
      else{
        density()
      }
    })
  })

$(function() {
    $('#toggle-two').change(function() {
      var w = +$( "#amount" ).val();
      var v = w/100;
      if($(this).prop('checked')) {
        toggleOnOne();
        fillCountiesMost(v);
      }
      else{
        fillCountiesLeast(v);
      }
    })
  })

var selectedCounties=[];

var alignchart = d3.select("#chart")
           .attr("align","center")

var alignwidget = d3.select(".toggle-button")
           .attr("align","center")

var color = d3.scale.threshold()
    .domain([10000,25000,50000, 100000, 250000,500000, 1000000,5000000 ,11116705])
    .range(["#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0","#225ea8","#253494","#081d58"]);

var width = 960,
    height = 500;

var path = d3.geo.path();

var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height);

var counter = 0;

d3.json("uspops2.json", function(error, topology) {
  if (error) throw error;

svg.append("g")
    .selectAll("path")
    .data(topojson.feature(topology, topology.objects.counties).features)
    .enter().append("path")
    .attr("class", "counties")
    .attr("d", path)
    .style("fill",function(d){return color(+d.properties.pop2014);});
//    .on("mouseover",hovercounty)
//    .on('mouseout',mouseoutcounty);

svg.append("path")
    .datum(topojson.mesh(topology, topology.objects.states, function(a, b) { return a.id !== b.id; }))
    .attr("class", "states")
     .attr("d", path);

});

var populationData; 
  d3.csv("population.csv", function(error, data) {
    if (error) throw error;
    populationData=data;
  });

function contains(a, obj) {
    for (var i = 0; i < a.length; i++) {
        if (a[i] === obj) {
            return true;
        }
    }
    return false;
}

function density(){
      d3.selectAll(".counties")
        .transition().duration(800)
        .style("fill",function(d){return color(+d.properties.pop2014);});
}

function hovercounty(){
        d3.select(this)
        .style("fill","#B767FF");

}

function toggleOnOne() {
    $('#toggle-one').bootstrapToggle('on')
  }

function mouseoutcounty(pop){
        d3.select(this)
        .style("fill",color(+pop.properties.pop2014));

}
</script>

https://code.jquery.com/jquery-1.10.2.js

https://code.jquery.com/ui/1.11.4/jquery-ui.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

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

https://d3js.org/topojson.v1.min.js

https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js