D3 Examples - TheNpercent

xxxxxxxxxx
 
<!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">
​
<!-- Optional theme -->
<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>
​
<div class = "center-block">
<input type="checkbox" id = "toggle-one">
<input type="checkbox" id = "toggle-two" data-onstyle="danger" data-offstyle="success">
</div>
​
<div id="chart">
</div>
​
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
​
<!-- Latest compiled and minified JavaScript -->
<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 amountWidth(w){
  d3.selectAll("#amount")
    .style("width",chooseWidth(w))
    }
function chooseWidth(w){
      if (w<9) {
        return(14+"px");
      }
      else if (w<98 ){
        return(24+"px");
      }
      else{
        return(34+"px");
      }
    }
​
​
​
function contains(a, obj) {
    for (var i = 0; i < a.length; i++) {
        if (a[i] === obj) {
            return true;
        }
    }
    return false;
}
​
​
function fillCountiesLeast(w){
  var selectedCounties=[];
      populationData.forEach(function(d){
        if(d.proptotal > (1-w)) selectedCounties.push(+d.id); 
      })
    d3.selectAll(".counties")
      .style("fill",function(d){
        return(contains(selectedCounties,d.id) ? "#E14242" : "#e0e0e0")});
      }
​
function fillCountiesMost(w){
  var selectedCounties=[];
      populationData.forEach(function(d){
        if(d.proptotal <w) selectedCounties.push(+d.id); 
      })
    d3.selectAll(".counties")
      .style("fill",function(d){
        return(contains(selectedCounties,d.id) ? "#E14242" : "#e0e0e0")});
      }
​
​
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>
​
​
    