Skip to content

Instantly share code, notes, and snippets.

@bluedot951
Last active June 29, 2016 06:50
US Populations by State and County
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
path {
stroke: #fff;
fill-rule: evenodd;
}
</style>
<body>
<!-- <form>
<label><input type="radio" name="mode" value="size" checked> Size</label>
<label><input type="radio" name="mode" value="count"> Count</label>
</form>
--><script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 700,
radius = Math.min(width, height) / 2;
var x = d3.scale.linear()
.range([0, 2 * Math.PI]);
var y = d3.scale.sqrt()
.range([0, radius]);
var color = d3.scale.category20c();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");
var partition = d3.layout.partition()
// .sort(function(d) {
// console.log(d);
// if(d.children)
// return d.children.size;
// return 0;
// })
.sort(null)
.value(function(d) { return d.size; });
var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, y(d.y)); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
// Keep track of the node that is currently being displayed as the root.
var node;
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden");
d3.json("jsonOut.json", function(error, root) {
node = root;
console.log("node", node);
var path = svg.datum(root).selectAll("path")
.data(partition.nodes)
.enter().append("path")
.attr("d", arc)
.style("fill", function(d) {
// console.log("d", d);
// console.log("name", (d.children ? d : d.parent).name);
// console.log("partition.nodes", partition.nodes);
return color((d.children ? d : d.parent).name);
})
.on("click", click)
.on("mouseover", function(d){
d3.select(this).attr("r", 5.5).style("fill", "blue");
return tooltip.style("visibility", "visible").text(d.name + " (" + d.size.toLocaleString('en-us') + ")");
})
.on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
.on("mouseout", function(d){
d3.select(this).attr("r", 5.5).style("fill", color((d.children ? d : d.parent).name));
return tooltip.style("visibility", "hidden");
})
.each(stash);
d3.selectAll("input").on("change", function change() {
var value = false
? function() { return 1; }
: function(d) { return d.size; };
path
.data(partition.value(value).nodes)
.transition()
.duration(1000)
.attrTween("d", arcTweenData);
});
function click(d) {
node = d;
path.transition()
.duration(1000)
.attrTween("d", arcTweenZoom(d));
}
function mouseover(d) {
console.log("d from mouseover", d);
d3.select(this)
.attr("title", d.name);
}
});
d3.select(self.frameElement).style("height", height + "px");
// Setup for switching data: stash the old values for transition.
function stash(d) {
d.x0 = d.x;
d.dx0 = d.dx;
}
// When switching data: interpolate the arcs in data space.
function arcTweenData(a, i) {
var oi = d3.interpolate({x: a.x0, dx: a.dx0}, a);
function tween(t) {
var b = oi(t);
a.x0 = b.x;
a.dx0 = b.dx;
return arc(b);
}
if (i == 0) {
// If we are on the first arc, adjust the x domain to match the root node
// at the current zoom level. (We only need to do this once.)
var xd = d3.interpolate(x.domain(), [node.x, node.x + node.dx]);
return function(t) {
x.domain(xd(t));
return tween(t);
};
} else {
return tween;
}
}
// When zooming: interpolate the scales.
function arcTweenZoom(d) {
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, 1]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
return function(d, i) {
return i
? function(t) { return arc(d); }
: function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
};
}
</script>
{
"name": "United States",
"children": [
{
"size": 563626,
"name": "Wyoming",
"children": [
{
"name": "Laramie County",
"size": 91738
}
]
},
{
"size": 601723,
"name": "District of Columbia",
"children": [
{
"name": "District of Columbia",
"size": 601723
}
]
},
{
"size": 625741,
"name": "Vermont",
"children": [
{
"name": "Chittenden County",
"size": 156545
}
]
},
{
"size": 672591,
"name": "North Dakota",
"children": [
{
"name": "Cass County",
"size": 149778
}
]
},
{
"size": 710231,
"name": "Alaska",
"children": [
{
"name": "Anchorage Municipality",
"size": 291826
}
]
},
{
"size": 814180,
"name": "South Dakota",
"children": [
{
"name": "Minnehaha County",
"size": 169468
}
]
},
{
"size": 897934,
"name": "Delaware",
"children": [
{
"name": "New Castle County",
"size": 538479
}
]
},
{
"size": 989415,
"name": "Montana",
"children": [
{
"name": "Yellowstone County",
"size": 147972
}
]
},
{
"size": 1052567,
"name": "Rhode Island",
"children": [
{
"name": "Providence County",
"size": 626667
}
]
},
{
"size": 1316470,
"name": "New Hampshire",
"children": [
{
"name": "Hillsborough County",
"size": 400721
}
]
},
{
"size": 1328361,
"name": "Maine",
"children": [
{
"name": "Cumberland County",
"size": 281674
}
]
},
{
"size": 1360301,
"name": "Hawaii",
"children": [
{
"name": "Honolulu County",
"size": 953207
}
]
},
{
"size": 1567582,
"name": "Idaho",
"children": [
{
"name": "Ada County",
"size": 392365
},
{
"name": "Canyon County",
"size": 188923
}
]
},
{
"size": 1826341,
"name": "Nebraska",
"children": [
{
"name": "Douglas County",
"size": 517110
},
{
"name": "Lancaster County",
"size": 285407
}
]
},
{
"size": 1852994,
"name": "West Virginia",
"children": [
{
"name": "Kanawha County",
"size": 193063
},
{
"name": "Berkeley County",
"size": 104169
}
]
},
{
"size": 2059179,
"name": "New Mexico",
"children": [
{
"name": "Bernalillo County",
"size": 662564
},
{
"name": "Do\u00f1a Ana County",
"size": 209233
}
]
},
{
"size": 2700551,
"name": "Nevada",
"children": [
{
"name": "Clark County",
"size": 1951269
},
{
"name": "Washoe County",
"size": 421407
}
]
},
{
"size": 2763885,
"name": "Utah",
"children": [
{
"name": "Salt Lake County",
"size": 1029655
},
{
"name": "Utah County",
"size": 516564
}
]
},
{
"size": 2853118,
"name": "Kansas",
"children": [
{
"name": "Johnson County",
"size": 544179
},
{
"name": "Sedgwick County",
"size": 498365
}
]
},
{
"size": 2915918,
"name": "Arkansas",
"children": [
{
"name": "Pulaski County",
"size": 382748
},
{
"name": "Benton County",
"size": 221339
}
]
},
{
"size": 2967297,
"name": "Mississippi",
"children": [
{
"name": "Hinds County",
"size": 245285
},
{
"name": "Harrison County",
"size": 187105
}
]
},
{
"size": 3046355,
"name": "Iowa",
"children": [
{
"name": "Polk County",
"size": 430640
},
{
"name": "Linn County",
"size": 211226
}
]
},
{
"size": 3574097,
"name": "Connecticut",
"children": [
{
"name": "Fairfield County",
"size": 916829
},
{
"name": "Hartford County",
"size": 894014
},
{
"name": "New Haven County",
"size": 862477
}
]
},
{
"size": 3751351,
"name": "Oklahoma",
"children": [
{
"name": "Oklahoma County",
"size": 718633
},
{
"name": "Tulsa County",
"size": 603403
},
{
"name": "Cleveland County",
"size": 255755
}
]
},
{
"size": 3831074,
"name": "Oregon",
"children": [
{
"name": "Multnomah County",
"size": 735334
},
{
"name": "Washington County",
"size": 529710
},
{
"name": "Clackamas County",
"size": 375992
}
]
},
{
"size": 4339367,
"name": "Kentucky",
"children": [
{
"name": "Jefferson County",
"size": 741096
},
{
"name": "Fayette County",
"size": 295803
},
{
"name": "Kenton County",
"size": 159720
}
]
},
{
"size": 4533372,
"name": "Louisiana",
"children": [
{
"name": "East Baton Rouge Parish",
"size": 440171
},
{
"name": "Jefferson Parish",
"size": 432552
},
{
"name": "Orleans Parish",
"size": 343829
}
]
},
{
"size": 4625364,
"name": "South Carolina",
"children": [
{
"name": "Greenville County",
"size": 451225
},
{
"name": "Richland County",
"size": 384504
},
{
"name": "Charleston County",
"size": 350209
}
]
},
{
"size": 4779736,
"name": "Alabama",
"children": [
{
"name": "Jefferson County",
"size": 658466
},
{
"name": "Mobile County",
"size": 412992
},
{
"name": "Madison County",
"size": 334811
},
{
"name": "Montgomery County",
"size": 229363
}
]
},
{
"size": 5029196,
"name": "Colorado",
"children": [
{
"name": "El Paso County",
"size": 622263
},
{
"name": "Denver County",
"size": 600158
},
{
"name": "Arapahoe County",
"size": 572003
},
{
"name": "Jefferson County",
"size": 534543
}
]
},
{
"size": 5303925,
"name": "Minnesota",
"children": [
{
"name": "Hennepin County",
"size": 1152425
},
{
"name": "Ramsey County",
"size": 508640
},
{
"name": "Dakota County",
"size": 398552
},
{
"name": "Anoka County",
"size": 330844
}
]
},
{
"size": 5686986,
"name": "Wisconsin",
"children": [
{
"name": "Milwaukee County",
"size": 947735
},
{
"name": "Dane County",
"size": 488073
},
{
"name": "Waukesha County",
"size": 389891
},
{
"name": "Brown County",
"size": 248007
}
]
},
{
"size": 5773552,
"name": "Maryland",
"children": [
{
"name": "Montgomery County",
"size": 971777
},
{
"name": "Prince George's County",
"size": 863420
},
{
"name": "Baltimore County",
"size": 805029
},
{
"name": "Baltimore city",
"size": 620961
}
]
},
{
"size": 5988927,
"name": "Missouri",
"children": [
{
"name": "St. Louis County",
"size": 998954
},
{
"name": "Jackson County",
"size": 674158
},
{
"name": "St. Charles County",
"size": 360485
},
{
"name": "St. Louis city",
"size": 319294
}
]
},
{
"size": 6346105,
"name": "Tennessee",
"children": [
{
"name": "Shelby County",
"size": 927644
},
{
"name": "Davidson County",
"size": 626681
},
{
"name": "Knox County",
"size": 432226
},
{
"name": "Hamilton County",
"size": 336463
},
{
"name": "Rutherford County",
"size": 262604
}
]
},
{
"size": 6392017,
"name": "Arizona",
"children": [
{
"name": "Maricopa County",
"size": 3817117
},
{
"name": "Pima County",
"size": 980263
},
{
"name": "Pinal County",
"size": 375770
},
{
"name": "Yavapai County",
"size": 211033
},
{
"name": "Mohave County",
"size": 200186
}
]
},
{
"size": 6483802,
"name": "Indiana",
"children": [
{
"name": "Marion County",
"size": 903393
},
{
"name": "Lake County",
"size": 496005
},
{
"name": "Allen County",
"size": 355329
},
{
"name": "Hamilton County",
"size": 274569
},
{
"name": "St. Joseph County",
"size": 266931
}
]
},
{
"size": 6547629,
"name": "Massachusetts",
"children": [
{
"name": "Middlesex County",
"size": 1503085
},
{
"name": "Worcester County",
"size": 798552
},
{
"name": "Essex County",
"size": 743159
},
{
"name": "Suffolk County",
"size": 722023
},
{
"name": "Norfolk County",
"size": 670850
}
]
},
{
"size": 6724540,
"name": "Washington",
"children": [
{
"name": "King County",
"size": 1931249
},
{
"name": "Pierce County",
"size": 795225
},
{
"name": "Snohomish County",
"size": 713335
},
{
"name": "Spokane County",
"size": 471221
},
{
"name": "Clark County",
"size": 425363
}
]
},
{
"size": 7994802,
"name": "Virginia",
"children": [
{
"name": "Fairfax County",
"size": 1081726
},
{
"name": "Virginia Beach city",
"size": 437994
},
{
"name": "Prince William County",
"size": 402002
},
{
"name": "Chesterfield County",
"size": 316236
},
{
"name": "Loudoun County",
"size": 312311
},
{
"name": "Henrico County",
"size": 306935
}
]
},
{
"size": 8791894,
"name": "New Jersey",
"children": [
{
"name": "Bergen County",
"size": 905116
},
{
"name": "Middlesex County",
"size": 809858
},
{
"name": "Essex County",
"size": 783969
},
{
"name": "Hudson County",
"size": 634266
},
{
"name": "Monmouth County",
"size": 630380
},
{
"name": "Ocean County",
"size": 576567
}
]
},
{
"size": 9535483,
"name": "North Carolina",
"children": [
{
"name": "Mecklenburg County",
"size": 919628
},
{
"name": "Wake County",
"size": 900993
},
{
"name": "Guilford County",
"size": 488406
},
{
"name": "Forsyth County",
"size": 350670
},
{
"name": "Cumberland County",
"size": 319431
},
{
"name": "Durham County",
"size": 267587
},
{
"name": "Buncombe County",
"size": 238318
}
]
},
{
"size": 9687653,
"name": "Georgia",
"children": [
{
"name": "Fulton County",
"size": 920581
},
{
"name": "Gwinnett County",
"size": 805321
},
{
"name": "DeKalb County",
"size": 691893
},
{
"name": "Cobb County",
"size": 688078
},
{
"name": "Chatham County",
"size": 265128
},
{
"name": "Clayton County",
"size": 259424
},
{
"name": "Cherokee County",
"size": 214346
}
]
},
{
"size": 9883640,
"name": "Michigan",
"children": [
{
"name": "Wayne County",
"size": 1820584
},
{
"name": "Oakland County",
"size": 1202362
},
{
"name": "Macomb County",
"size": 840978
},
{
"name": "Kent County",
"size": 602622
},
{
"name": "Genesee County",
"size": 425790
},
{
"name": "Washtenaw County",
"size": 344791
},
{
"name": "Ingham County",
"size": 280895
}
]
},
{
"size": 11536504,
"name": "Ohio",
"children": [
{
"name": "Cuyahoga County",
"size": 1280122
},
{
"name": "Franklin County",
"size": 1163414
},
{
"name": "Hamilton County",
"size": 802374
},
{
"name": "Summit County",
"size": 541781
},
{
"name": "Montgomery County",
"size": 535153
},
{
"name": "Lucas County",
"size": 441815
},
{
"name": "Stark County",
"size": 375586
},
{
"name": "Butler County",
"size": 368130
}
]
},
{
"size": 12702379,
"name": "Pennsylvania",
"children": [
{
"name": "Philadelphia County",
"size": 1526006
},
{
"name": "Allegheny County",
"size": 1223348
},
{
"name": "Montgomery County",
"size": 799874
},
{
"name": "Bucks County",
"size": 625249
},
{
"name": "Delaware County",
"size": 558979
},
{
"name": "Lancaster County",
"size": 519445
},
{
"name": "Chester County",
"size": 498886
},
{
"name": "York County",
"size": 434972
},
{
"name": "Berks County",
"size": 411442
}
]
},
{
"size": 12830632,
"name": "Illinois",
"children": [
{
"name": "Cook County",
"size": 5194675
},
{
"name": "DuPage County",
"size": 916924
},
{
"name": "Lake County",
"size": 703462
},
{
"name": "Will County",
"size": 677560
},
{
"name": "Kane County",
"size": 515269
},
{
"name": "McHenry County",
"size": 308760
},
{
"name": "Winnebago County",
"size": 295266
},
{
"name": "St. Clair County",
"size": 270056
},
{
"name": "Madison County",
"size": 269282
}
]
},
{
"size": 18801310,
"name": "Florida",
"children": [
{
"name": "Miami-Dade County",
"size": 2496435
},
{
"name": "Broward County",
"size": 1748066
},
{
"name": "Palm Beach County",
"size": 1320134
},
{
"name": "Hillsborough County",
"size": 1229226
},
{
"name": "Orange County",
"size": 1145956
},
{
"name": "Pinellas County",
"size": 916542
},
{
"name": "Duval County",
"size": 864263
},
{
"name": "Lee County",
"size": 618754
},
{
"name": "Polk County",
"size": 602095
},
{
"name": "Brevard County",
"size": 543376
},
{
"name": "Volusia County",
"size": 494593
},
{
"name": "Pasco County",
"size": 464697
},
{
"name": "Seminole County",
"size": 422718
}
]
},
{
"size": 19378102,
"name": "New York",
"children": [
{
"name": "Kings County",
"size": 2504700
},
{
"name": "Queens County",
"size": 2230722
},
{
"name": "New York County",
"size": 1585873
},
{
"name": "Suffolk County",
"size": 1493350
},
{
"name": "Bronx County",
"size": 1385108
},
{
"name": "Nassau County",
"size": 1339532
},
{
"name": "Westchester County",
"size": 949113
},
{
"name": "Erie County",
"size": 919040
},
{
"name": "Monroe County",
"size": 744344
},
{
"name": "Richmond County",
"size": 468730
},
{
"name": "Onondaga County",
"size": 467026
},
{
"name": "Orange County",
"size": 372813
},
{
"name": "Rockland County",
"size": 311687
}
]
},
{
"size": 25145561,
"name": "Texas",
"children": [
{
"name": "Harris County",
"size": 4092459
},
{
"name": "Dallas County",
"size": 2368139
},
{
"name": "Tarrant County",
"size": 1809034
},
{
"name": "Bexar County",
"size": 1714773
},
{
"name": "Travis County",
"size": 1024266
},
{
"name": "El Paso County",
"size": 800647
},
{
"name": "Collin County",
"size": 782341
},
{
"name": "Hidalgo County",
"size": 774769
},
{
"name": "Denton County",
"size": 662614
},
{
"name": "Fort Bend County",
"size": 585375
},
{
"name": "Montgomery County",
"size": 455746
},
{
"name": "Williamson County",
"size": 422679
},
{
"name": "Cameron County",
"size": 406220
},
{
"name": "Nueces County",
"size": 340223
},
{
"name": "Brazoria County",
"size": 313166
},
{
"name": "Bell County",
"size": 310235
},
{
"name": "Galveston County",
"size": 291309
}
]
},
{
"size": 37253956,
"name": "California",
"children": [
{
"name": "Los Angeles County",
"size": 9818605
},
{
"name": "San Diego County",
"size": 3095313
},
{
"name": "Orange County",
"size": 3010232
},
{
"name": "Riverside County",
"size": 2189641
},
{
"name": "San Bernardino County",
"size": 2035210
},
{
"name": "Santa Clara County",
"size": 1781642
},
{
"name": "Alameda County",
"size": 1510271
},
{
"name": "Sacramento County",
"size": 1418788
},
{
"name": "Contra Costa County",
"size": 1049025
},
{
"name": "Fresno County",
"size": 930450
},
{
"name": "Kern County",
"size": 839631
},
{
"name": "Ventura County",
"size": 823318
},
{
"name": "San Francisco County",
"size": 805235
},
{
"name": "San Mateo County",
"size": 718451
},
{
"name": "San Joaquin County",
"size": 685306
},
{
"name": "Stanislaus County",
"size": 514453
},
{
"name": "Sonoma County",
"size": 483878
},
{
"name": "Tulare County",
"size": 442179
},
{
"name": "Santa Barbara County",
"size": 423895
},
{
"name": "Monterey County",
"size": 415057
},
{
"name": "Solano County",
"size": 413344
},
{
"name": "Placer County",
"size": 348432
},
{
"name": "San Luis Obispo County",
"size": 269637
},
{
"name": "Santa Cruz County",
"size": 262382
},
{
"name": "Merced County",
"size": 255793
}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment