Report not found

There was a problem finding this report.
The Distribution of the U.S. Population
May 27, 2014 · Refreshed about 1 month ago
Description
A graphic exploring where Americans live.

Collaborators

Run History
SELECT state, county, popestimate2013 AS population FROM benn.county_data WHERE county != 0
SELECT state, county, popestimate2013 AS population FROM benn.county_data WHERE county != 0
<style> body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; } h1 { font-family:Geneva; text-align: center; } p, text { font-family: Geneva; font-size: 12px; } div.intro { margin: 0 auto; width: 600px; } div#map { margin: 0 auto; width: 960px; } .label { text-align: center; margin-bottom: 3px; font-size: 14px; } .counties { fill: #ccc; } .states { fill: none; stroke: #333333; stroke-linejoin: round; } .slider-container { margin: 0 auto; width: 800px; margin-top: 1px; margin-bottom: 20px; } .last-pick .tick { stroke: black; shape-rendering: crispEdges; } .top-slider, .slider-ticks { width: 689px; float: left; position: relative; } .slider-ticks .tick { position: absolute; border-left: solid 1px #ccc; height: 4px; } .slider-ticks .tick-label { position: absolute; top: 6px; text-align: center; width: 20px; left: -10px; font-size: 12px; color: #75756F; } .slider-directions { position: absolute; top: -20px; padding: 5px; font-size: 12px; } .filter { margin: 0 auto; margin-bottom:20px; } .toggles { list-style-type:none; display: table; margin: 0 auto; padding: 0px; } .toggles a { display:block; color:#000; padding:7px 12px; text-decoration:none } .toggles .switch { width: 250px; text-align: center; } .toggles .active a{ background: #ea833f; cursor: pointer; } .toggles a:hover { text-decoration: underline; cursor: pointer; } .toggles li { line-height:12px; float:left; background: white; margin-right:-1px; border:1px solid #ddd; } .toggles li.active { border:1px solid #ccc; background: #fed976; color: white; } div.slider { float: left; height: 25px; cursor: pointer; } .inner-container { width: 800px; margin: 0 auto; } .label-containter { width: 55px; height: 25px; float: left; text-align: center; } #text-inc, #text-exc { margin-top: 5px; } .inc,.exc { cursor:pointer;} </style> <div id="map"> <h1>The Distribution of the U.S. Population</h1> <div class="intro"> <p>The graphic below explores how the U.S. population is distributed. The map shades the fewest possible counties required to include the selected percentage of the population. You can choose to look at the population distribution by most populous counties, or at random. </p> <p>The graphic is based on <a target="_blank" href="#">U.S. Census data</a>.</p> <p>Click the clone button to dive deeper into the data or to create your own visualizations.</p> </div> <p class="label">HIGHLIGHT COUNTIES</p> <div class="filter"> <ul class="toggles"> <li class="switch active" id="sort-size"><a>By population</a></li> <li class="switch" id="sort-rand"><a>In random order</a></li> </ul> </div> <div class="slider-container"> <p style="text-align:center;color:#7A7A7A"><em>Click in the bar to change the ratio</em></p> <div class="inner-container"> <div class="label-containter inc"><p style="color:white"id="text-inc"></p></div> <div class="slider"></div> <div class="label-containter exc"><p id="text-exc"></p></div> <div class="label-containter"></div> <div class="slider-ticks"></div> </div> </div> </div> <body> <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script> <script> percent = .1 var width = 950, height = 500, margin = {top:0}; var incColor = "#396d6c", excColor = "#bdbdbd"; var sliderWidth = 688; var f = d3.format("%"); var p = d3.format(".1%"); var zero3 = d3.format("03d"); var path = d3.geo.path(); var svg = d3.select("#map").append("svg") .attr("width", width) .attr("height", height+margin.top) var g = svg.append("g") .attr("transform", "translate(0," + margin.top + ")");; var leftTickPadding = 0, rightTickPadding = 0.001 totalTickPadding = leftTickPadding + rightTickPadding; var tickValues = d3.range(0,1.01,.01); var tick = d3.select(".slider-ticks").selectAll(".g-tick") .data(tickValues) .enter() .append("div") .attr("class", "tick") .style("left", function(d, i) { return ((leftTickPadding + i * ((1 - totalTickPadding)/ (tickValues.length - 1))) * 100) + "%"; }); tick.append("div") .attr("class", "tick-label") .text(function(d, i) { return d === 1 ? f(d) : (d*100 % 10 ? "" : f(d)); }); var slider = d3.select(".slider") .style("width",(sliderWidth * percent) + "px") .style("background",incColor) .style("border-right",((1 - percent) * sliderWidth) + "px solid " + excColor) d3.select(".inc").style("background",incColor).style("margin-right","1px") d3.select(".exc").style("background",excColor).style("margin-left","1px") d3.json('https://dl.dropboxusercontent.com/s/sh04tjwairb7vgk/counties.json', function(us) { var counties = dataset.content; var total = 0; counties.forEach(function(c) { var countyId = "" + c.state + zero3(c.county); c.id = +countyId; var pop = +c.population total += pop; }) counties.sort(function(a, b) { return d3.descending(a.population, b.population); }) var mapping = d3.map(); counties.forEach(function(d) { mapping.set(d.id,+d.population); }) var startValue = (percent/total); drawMap(); shadeMap(percent); if (mode && mode.resize) { mode.resize(); } $('.slider').click(function(e) { var posX = $(this).offset().left; percent = Math.max(Math.min((e.pageX - posX)/(sliderWidth),1),0); var input = d3.round(percent,2) drawSlider(input); shadeMap(input); }); $(".inc").click( function() { percent = 0; drawSlider(percent); shadeMap(percent); }); $(".exc").click( function() { percent = 1; drawSlider(percent); shadeMap(percent); }); $(".switch").click( function() { $(".switch").removeClass('active'); $(this).addClass('active'); var id = $(this).attr("id") if (id == 'sort-size') { counties.sort(function(a, b) { return d3.descending(a.population, b.population); }) } else { counties = shuffle(counties); } shadeMap(percent) }); function drawSlider(input) { var w = Math.floor(sliderWidth * input); var br = sliderWidth - w; d3.select(".slider") .style("width",w + "px") .style("border-right",br + "px solid " + excColor) } function shadeMap(percent) { d3.selectAll(".county") .style("fill",excColor); var popTally = 0; var percentTally = 0; var includedCounties = []; var i = 0; while (percentTally < percent) { var county = counties[i] includedCounties.push(county.id) popTally += +county.population percentTally = popTally/total; i+=1 } includedCounties.forEach(function(c) { d3.select("#c" + c) .style("fill",incColor) }) var tally = Math.min(Math.max(percentTally,0),1) d3.select("#text-inc").text(p(tally)) d3.select("#text-exc").text(p(1-tally)) } function drawMap() { g.append("g") .attr("class", "counties") .selectAll("path") .data(topojson.feature(us, us.objects.counties).features) .enter().append("path") .attr("class",function(d) { return "county";}) .attr("id",function(d) { return "c" + d.id; }) .attr("d", path) .style("fill",excColor); g.append("path") .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })) .attr("class", "states") .attr("d", path); } function shuffle(array) { var tmp, current, top = array.length; if(top) while(--top) { current = Math.floor(Math.random() * (top + 1)); tmp = array[current]; array[current] = array[top]; array[top] = tmp; } return array; } }) </script>
{{ dataSourceName(params.queryId) }}

The dataset is too large to view in browser

Export

Looks like something went wrong with your query.

{{ DS.queryRuns[params.queryId].errorMessage }}
This query was cancelled