Bcohn · March 11, 2016 21:39
diff --git a/index.html b/index.html
 <!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>

diff --git a/population.csv b/population.csv
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/uspops2.json b/uspops2.json
	<!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>
No results found