block by renecnielsen 9904798

Sortable Table with Bars

Full Screen

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<link href='//fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<style type="text/css">

table {
  border-collapse: collapse;
  font: 300 10px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 720px;
}

th {
  text-align: right;
  padding-right: 6px;
  min-width: 43px;
}

thead td {
  cursor: s-resize;
}

tbody tr:first-child td {
  padding-top: 2px;
}

tbody td {
  padding: 0;
  border-left: solid 1px #000;
}

tbody rect {
  fill: #00aeef;
}

tbody tr:hover rect {
  fill: #00447c;
}

</style>

<table>
  <thead>
    <tr>
      <th>State</th>
      <td><5</td>
      <td>5-13</td>
      <td>14-17</td>
      <td>18-24</td>
      <td>≥16</td>
      <td>≥18</td>
      <td>15-44</td>
      <td>45-64</td>
      <td>≥65</td>
      <td>≥85</td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<script src="//d3js.org/d3.v2.min.js"></script>
<script>

d3.csv("readme-states-age.csv", function(states) {
  var ages = d3.keys(states[0]).filter(function(key) {
    return key != "State" && key != "Total";
  });

  d3.selectAll("thead td").data(ages).on("click", function(k) {
    tr.sort(function(a, b) { return (b[k] / b.Total) - (a[k] / a.Total); });
  });

  var tr = d3.select("tbody").selectAll("tr")
      .data(states)
    .enter().append("tr");

  tr.append("th")
      .text(function(d) { return d.State; });

  tr.selectAll("td")
      .data(function(d) { return ages.map(function(k) { return d[k] / d.Total; }); })
    .enter().append("td").append("svg")
      .attr("width", 71)
      .attr("height", 12)
    .append("rect")
      .attr("height", 12)
      .attr("width", function(d) { return d * 71; });
});

</script>

readme-states-age.csv

State,Total,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,16 Years and Over,18 Years and Over,15 to 44 Years,45 to 64 Years,65 Years and Over,85 Years and Over
AL,4661900,310504,552339,259034,450818,3671200,3540023,1878306,1215966,641667,85079
AK,686293,52083,85640,42153,74257,528405,506417,305207,183159,50277,4844
AZ,6500180,515910,828669,362642,601943,4975709,4792959,2680368,1523681,862573,122985
AR,2855390,202070,343207,157204,264160,2233398,2152909,1137988,727124,407205,58675
CA,36756666,2704659,4499890,2159981,3853788,28492781,27392136,16091480,8819342,4114496,612463
CO,4939456,358280,587154,261701,466194,3865113,3732321,2129158,1290094,511094,67286
CT,3501252,211637,403658,196918,325110,2788471,2689039,1390702,968967,478007,79111
DE,873092,59319,99496,47414,84464,690990,666863,350565,230528,121688,16118
DC,591833,36352,50439,25225,75569,492806,479817,288300,140043,70648,11144
FL,18328340,1140516,1938695,925060,1607297,14796088,14324069,7090172,4746856,3187797,521366
GA,9685744,740521,1250460,557860,919876,7417769,7136903,4187887,2389018,981024,122419
HI,1288198,87207,134025,64011,124834,1035429,1002955,529382,331817,190067,31681
ID,1523816,121746,201192,89702,147606,1156761,1111176,621672,375173,182150,25501
IL,12901563,894368,1558919,725973,1311479,10088978,9722303,5455020,3239173,1575308,238921
IN,6376792,443089,780199,361393,605863,4974895,4792111,2603160,1647881,813839,118650
IA,3002555,201321,345409,165883,306398,2374594,2289942,1182767,788485,444554,78699
KS,2802134,202529,342134,155822,293114,2180905,2101649,1139193,713663,366706,62319
KY,4269245,284601,493536,229927,381394,3378568,3261181,1735205,1134283,565867,74759
LA,4410796,310716,542341,254916,471275,3432616,3302823,1826987,1128771,540314,72250
ME,1316456,71459,133656,69752,112682,1077777,1041589,497847,397911,199187,28719
MD,5633597,371787,651923,316873,543470,4455297,4293014,2340626,1513754,679565,91884
MA,6497967,383568,701752,341713,665879,5245355,5070934,2707831,1751508,871098,143097
MI,10003422,625526,1179503,585169,974480,7913100,7613224,4047073,2706100,1304322,186744
MN,5220393,358471,606802,289371,507289,4113132,3965749,2142434,1391878,650519,106854
MS,2938618,220813,371502,174405,305964,2259986,2171898,1202339,730133,371598,52235
MO,5911605,399450,690476,331543,560463,4659430,4490136,2381522,1554812,805235,121678
MT,967440,61114,106088,53156,95232,774664,747082,372043,278241,137312,20246
NE,1783432,132092,215265,99638,186657,1387409,1336437,719367,451756,240847,41008
NV,2600167,199175,325650,142976,212379,2004027,1932366,1089478,653357,296717,31930
NH,1315809,75297,144235,73826,119114,1060287,1022451,520357,388250,169978,24480
NJ,8682661,557421,1011656,478505,769321,6877132,6635079,3510101,2335168,1150941,175310
NM,1984356,148323,241326,112801,203097,1539499,1481906,805851,501604,260051,35849
NY,19490297,1208495,2141490,1058031,1999120,15624059,15082281,8158231,5120254,2607672,397954
NC,9222414,652823,1097890,492964,883397,7228860,6978737,3831668,2380685,1139052,148054
ND,641481,41896,67358,33794,82629,515794,498433,263162,166615,94276,17772
OH,11485910,743750,1340492,646135,1081734,9085157,8755533,4590870,3083815,1570837,228649
OK,3642361,266547,438926,200562,369916,2839156,2736326,1479166,918688,490637,69824
OR,3790060,243483,424167,199925,338162,3025474,2922485,1534279,1036269,503998,76229
PA,12448279,737462,1345341,679201,1203944,10033800,9686275,4877273,3414001,1910571,310242
RI,1050788,60934,111408,56198,114502,850951,822248,434905,282321,147646,26001
SC,4479800,303024,517803,245400,438147,3539603,3413573,1818126,1186019,596295,76604
SD,804194,58566,94438,45305,82869,629010,605885,313905,210178,116100,20645
TN,6214888,416334,725948,336312,550612,4907628,4736294,2524606,1646623,819626,106162
TX,24326974,2027307,3277946,1420518,2454721,18315472,17601203,10540819,5656528,2472223,332872
UT,2736424,268916,413034,167685,329585,1972123,1886789,1228432,538978,246202,32898
VT,621270,32635,62538,33757,61679,509882,492340,242818,188593,86649,12364
VA,7769089,522672,887525,413004,768475,6155777,5945888,3284355,2033550,940577,121693
WA,6549224,433119,750274,357782,610378,5191341,5008049,2733393,1762811,783877,114860
WV,1814468,105435,189649,91074,157989,1475218,1428310,697910,514505,285067,38502
WI,5627967,362277,640286,311849,553914,4472917,4313555,2278148,1522038,750146,117154
WY,532668,38253,60890,29314,53980,419262,404211,213580,147279,65614,8985