an es2015 d3v4 iteration on the block Pictogram Table from @armollica
a comment in a recent talk from @elijah_meeks exposed me to the ISOTYPE design system developed by Otto Neurath and colleagues in the 1930s. learning about the origins of the use of pictograms in information graphics sparked my interest in working with d3 examples like this. for more, read on to this nice set of blog posts on ISOTYPE from @eagereyes
special thanks to @yonester who helped me spot just what I needed to get column sorting working again. hooray d3js community!
yonester [10:45 AM]
@micahstubbs you just forgot to merge tdEnter
and tdUpdate
before you update the HTML. I.e., you need tdEnter.merge(tdUpdate).html(d => d.html);
Using pictograms within a table. Click headers to sort.
Notes: Uses technique from this blog post to implement HTML tables with D3 in a nice way. Growth rates are from Q2-2012 to Q2-2015. Data from BLS. State icons from ProPublica’s StateFace project. Other icons from Font Awesome.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='style.css'>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>
<div class='table-container'></div>
<script src='//d3js.org/d3.v4.min.js' charset='utf-8'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js'></script>
<script src='vis.js'></script>
</body>
</html>
# safe
lebab --replace vis.js --transform arrow
lebab --replace vis.js --transform for-of
lebab --replace vis.js --transform for-each
lebab --replace vis.js --transform arg-rest
lebab --replace vis.js --transform arg-spread
lebab --replace vis.js --transform obj-method
lebab --replace vis.js --transform obj-shorthand
lebab --replace vis.js --transform multi-var
# unsafe
lebab --replace vis.js --transform let
lebab --replace vis.js --transform template
[
{
"fips":"01",
"state":"Alabama",
"state_abbrev":"AL",
"emp":1894247,
"emp_pc":0.0312,
"wage":819,
"wage_pc":0.046,
"estabs":118496,
"estabs_pc":0.0268
},
{
"fips":"02",
"state":"Alaska",
"state_abbrev":"AK",
"emp":338078,
"emp_pc":0.0192,
"wage":1028,
"wage_pc":0.0764,
"estabs":22338,
"estabs_pc":0.0315
},
{
"fips":"04",
"state":"Arizona",
"state_abbrev":"AZ",
"emp":2585850.6667,
"emp_pc":0.0687,
"wage":904,
"wage_pc":0.0487,
"estabs":151145,
"estabs_pc":0.0317
},
{
"fips":"05",
"state":"Arkansas",
"state_abbrev":"AR",
"emp":1183673,
"emp_pc":0.021,
"wage":762,
"wage_pc":0.0628,
"estabs":88603,
"estabs_pc":0.0414
},
{
"fips":"06",
"state":"California",
"state_abbrev":"CA",
"emp":16272726,
"emp_pc":0.0863,
"wage":1131,
"wage_pc":0.1013,
"estabs":1420008,
"estabs_pc":0.0027
},
{
"fips":"08",
"state":"Colorado",
"state_abbrev":"CO",
"emp":2489827.6667,
"emp_pc":0.1003,
"wage":989,
"wage_pc":0.0773,
"estabs":185399,
"estabs_pc":0.0817
},
{
"fips":"09",
"state":"Connecticut",
"state_abbrev":"CT",
"emp":1678711.6667,
"emp_pc":0.0255,
"wage":1177,
"wage_pc":0.0594,
"estabs":115445,
"estabs_pc":0.039
},
{
"fips":"10",
"state":"Delaware",
"state_abbrev":"DE",
"emp":433342,
"emp_pc":0.0654,
"wage":991,
"wage_pc":0.0465,
"estabs":30521,
"estabs_pc":0.0961
},
{
"fips":"11",
"state":"District Of Columbia",
"state_abbrev":"DC",
"emp":743073,
"emp_pc":0.0399,
"wage":1599,
"wage_pc":0.0363,
"estabs":37199,
"estabs_pc":0.0468
},
{
"fips":"12",
"state":"Florida",
"state_abbrev":"FL",
"emp":8003431.3333,
"emp_pc":0.0909,
"wage":861,
"wage_pc":0.0682,
"estabs":658263,
"estabs_pc":0.0896
},
{
"fips":"13",
"state":"Georgia",
"state_abbrev":"GA",
"emp":4154506.3333,
"emp_pc":0.0776,
"wage":903,
"wage_pc":0.0649,
"estabs":289226,
"estabs_pc":0.079
},
{
"fips":"15",
"state":"Hawaii",
"state_abbrev":"HI",
"emp":635094.3333,
"emp_pc":0.0499,
"wage":876,
"wage_pc":0.0815,
"estabs":39508,
"estabs_pc":0.0476
},
{
"fips":"16",
"state":"Idaho",
"state_abbrev":"ID",
"emp":668081,
"emp_pc":0.0854,
"wage":713,
"wage_pc":0.0642,
"estabs":55412,
"estabs_pc":0.0466
},
{
"fips":"17",
"state":"Illinois",
"state_abbrev":"IL",
"emp":5876319.6667,
"emp_pc":0.0378,
"wage":1015,
"wage_pc":0.0651,
"estabs":428328,
"estabs_pc":0.0944
},
{
"fips":"18",
"state":"Indiana",
"state_abbrev":"IN",
"emp":2952937,
"emp_pc":0.0453,
"wage":811,
"wage_pc":0.0629,
"estabs":159694,
"estabs_pc":-0.0046
},
{
"fips":"19",
"state":"Iowa",
"state_abbrev":"IA",
"emp":1545515.3333,
"emp_pc":0.038,
"wage":802,
"wage_pc":0.0809,
"estabs":100605,
"estabs_pc":0.0575
},
{
"fips":"20",
"state":"Kansas",
"state_abbrev":"KS",
"emp":1376710,
"emp_pc":0.035,
"wage":819,
"wage_pc":0.0734,
"estabs":86812,
"estabs_pc":0.0367
},
{
"fips":"21",
"state":"Kentucky",
"state_abbrev":"KY",
"emp":1843882.6667,
"emp_pc":0.0394,
"wage":822,
"wage_pc":0.0648,
"estabs":121697,
"estabs_pc":0.1017
},
{
"fips":"22",
"state":"Louisiana",
"state_abbrev":"LA",
"emp":1935351.6667,
"emp_pc":0.0283,
"wage":850,
"wage_pc":0.0559,
"estabs":126513,
"estabs_pc":0.0031
},
{
"fips":"23",
"state":"Maine",
"state_abbrev":"ME",
"emp":598530,
"emp_pc":0.0205,
"wage":768,
"wage_pc":0.0682,
"estabs":50631,
"estabs_pc":0.0229
},
{
"fips":"24",
"state":"Maryland",
"state_abbrev":"MD",
"emp":2609762,
"emp_pc":0.0328,
"wage":1046,
"wage_pc":0.0555,
"estabs":167250,
"estabs_pc":0.0048
},
{
"fips":"25",
"state":"Massachusetts",
"state_abbrev":"MA",
"emp":3441869,
"emp_pc":0.0555,
"wage":1211,
"wage_pc":0.092,
"estabs":239474,
"estabs_pc":0.0826
},
{
"fips":"26",
"state":"Michigan",
"state_abbrev":"MI",
"emp":4182290.6667,
"emp_pc":0.0572,
"wage":916,
"wage_pc":0.0676,
"estabs":237670,
"estabs_pc":-0.0093
},
{
"fips":"27",
"state":"Minnesota",
"state_abbrev":"MN",
"emp":2798098.6667,
"emp_pc":0.0505,
"wage":977,
"wage_pc":0.0772,
"estabs":164087,
"estabs_pc":-0.0114
},
{
"fips":"28",
"state":"Mississippi",
"state_abbrev":"MS",
"emp":1116829.3333,
"emp_pc":0.025,
"wage":709,
"wage_pc":0.0411,
"estabs":71906,
"estabs_pc":0.0532
},
{
"fips":"29",
"state":"Missouri",
"state_abbrev":"MO",
"emp":2739022,
"emp_pc":0.0415,
"wage":842,
"wage_pc":0.0658,
"estabs":191050,
"estabs_pc":0.0821
},
{
"fips":"30",
"state":"Montana",
"state_abbrev":"MT",
"emp":454126,
"emp_pc":0.0452,
"wage":754,
"wage_pc":0.0771,
"estabs":45380,
"estabs_pc":0.0737
},
{
"fips":"31",
"state":"Nebraska",
"state_abbrev":"NE",
"emp":962499.3333,
"emp_pc":0.0401,
"wage":787,
"wage_pc":0.0961,
"estabs":71548,
"estabs_pc":0.0723
},
{
"fips":"32",
"state":"Nevada",
"state_abbrev":"NV",
"emp":1243926.6667,
"emp_pc":0.0961,
"wage":855,
"wage_pc":0.0491,
"estabs":78447,
"estabs_pc":0.0809
},
{
"fips":"33",
"state":"New Hampshire",
"state_abbrev":"NH",
"emp":638569.3333,
"emp_pc":0.0392,
"wage":967,
"wage_pc":0.0865,
"estabs":50742,
"estabs_pc":0.0436
},
{
"fips":"34",
"state":"New Jersey",
"state_abbrev":"NJ",
"emp":3941282.6667,
"emp_pc":0.0333,
"wage":1126,
"wage_pc":0.0653,
"estabs":266867,
"estabs_pc":0.0404
},
{
"fips":"35",
"state":"New Mexico",
"state_abbrev":"NM",
"emp":808459,
"emp_pc":0.027,
"wage":805,
"wage_pc":0.0281,
"estabs":56059,
"estabs_pc":0.0148
},
{
"fips":"36",
"state":"New York",
"state_abbrev":"NY",
"emp":9062160.3333,
"emp_pc":0.0508,
"wage":1180,
"wage_pc":0.0766,
"estabs":636614,
"estabs_pc":0.0601
},
{
"fips":"37",
"state":"North Carolina",
"state_abbrev":"NC",
"emp":4171099.3333,
"emp_pc":0.0643,
"wage":850,
"wage_pc":0.0787,
"estabs":266026,
"estabs_pc":0.0275
},
{
"fips":"38",
"state":"North Dakota",
"state_abbrev":"ND",
"emp":442512.6667,
"emp_pc":0.0693,
"wage":939,
"wage_pc":0.0982,
"estabs":32132,
"estabs_pc":0.1009
},
{
"fips":"39",
"state":"Ohio",
"state_abbrev":"OH",
"emp":5282683,
"emp_pc":0.0409,
"wage":865,
"wage_pc":0.06,
"estabs":290156,
"estabs_pc":0.0073
},
{
"fips":"40",
"state":"Oklahoma",
"state_abbrev":"OK",
"emp":1598213.6667,
"emp_pc":0.0334,
"wage":818,
"wage_pc":0.0665,
"estabs":108844,
"estabs_pc":0.0423
},
{
"fips":"41",
"state":"Oregon",
"state_abbrev":"OR",
"emp":1786037.6667,
"emp_pc":0.0847,
"wage":899,
"wage_pc":0.0741,
"estabs":143057,
"estabs_pc":0.0961
},
{
"fips":"42",
"state":"Pennsylvania",
"state_abbrev":"PA",
"emp":5726758,
"emp_pc":0.0192,
"wage":958,
"wage_pc":0.0728,
"estabs":354050,
"estabs_pc":0.0152
},
{
"fips":"44",
"state":"Rhode Island",
"state_abbrev":"RI",
"emp":474281.6667,
"emp_pc":0.0427,
"wage":925,
"wage_pc":0.0756,
"estabs":36360,
"estabs_pc":0.0335
},
{
"fips":"45",
"state":"South Carolina",
"state_abbrev":"SC",
"emp":1954333.6667,
"emp_pc":0.0719,
"wage":782,
"wage_pc":0.0625,
"estabs":121168,
"estabs_pc":0.0857
},
{
"fips":"46",
"state":"South Dakota",
"state_abbrev":"SD",
"emp":421137.3333,
"emp_pc":0.0388,
"wage":740,
"wage_pc":0.0931,
"estabs":32363,
"estabs_pc":0.0334
},
{
"fips":"47",
"state":"Tennessee",
"state_abbrev":"TN",
"emp":2820220.6667,
"emp_pc":0.059,
"wage":863,
"wage_pc":0.0576,
"estabs":149702,
"estabs_pc":0.0659
},
{
"fips":"48",
"state":"Texas",
"state_abbrev":"TX",
"emp":11651792.6667,
"emp_pc":0.0861,
"wage":988,
"wage_pc":0.0716,
"estabs":634983,
"estabs_pc":0.0679
},
{
"fips":"49",
"state":"Utah",
"state_abbrev":"UT",
"emp":1338293,
"emp_pc":0.0994,
"wage":821,
"wage_pc":0.0718,
"estabs":92945,
"estabs_pc":0.0994
},
{
"fips":"50",
"state":"Vermont",
"state_abbrev":"VT",
"emp":306212,
"emp_pc":0.0271,
"wage":831,
"wage_pc":0.0559,
"estabs":24657,
"estabs_pc":0.0125
},
{
"fips":"51",
"state":"Virginia",
"state_abbrev":"VA",
"emp":3739379.6667,
"emp_pc":0.0295,
"wage":1000,
"wage_pc":0.0504,
"estabs":247583,
"estabs_pc":0.0442
},
{
"fips":"53",
"state":"Washington",
"state_abbrev":"WA",
"emp":3137354.3333,
"emp_pc":0.0838,
"wage":1026,
"wage_pc":0.0846,
"estabs":235511,
"estabs_pc":0.0027
},
{
"fips":"54",
"state":"West Virginia",
"state_abbrev":"WV",
"emp":704558.6667,
"emp_pc":-0.0126,
"wage":803,
"wage_pc":0.0348,
"estabs":50066,
"estabs_pc":0.0144
},
{
"fips":"55",
"state":"Wisconsin",
"state_abbrev":"WI",
"emp":2806129.3333,
"emp_pc":0.0331,
"wage":836,
"wage_pc":0.0746,
"estabs":166660,
"estabs_pc":0.045
},
{
"fips":"56",
"state":"Wyoming",
"state_abbrev":"WY",
"emp":284545.3333,
"emp_pc":0.0119,
"wage":869,
"wage_pc":0.0333,
"estabs":26050,
"estabs_pc":0.0238
}
]
�G �F � LP ؘ$ S t a t e F a c e R e g u l a r x V e r s i o n 1 . 1 0 0 ; P S 0 0 1 . 1 0 0 ; h o t c o n v 1 . 0 . 5 6 ; m a k e o t f . l i b 2 . 0 . 2 1 3 2 5 " S t a t e F a c e R e g u l a r BSGP e� =� >