Skip to content

Instantly share code, notes, and snippets.

@micahstubbs

micahstubbs/.block

Last active January 16, 2020 09:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save micahstubbs/2bcc47b549613454f6441881fdc48b43 to your computer and use it in GitHub Desktop.
Save micahstubbs/2bcc47b549613454f6441881fdc48b43 to your computer and use it in GitHub Desktop.
Download ZIP
pictogram table | d3v4
Raw
.block
license: MIT
border: no
height: 900
Raw
README.md

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!

solution

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.

Raw
index.html
<!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>
Raw
lebab.sh
# 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
Raw
qcew.json
[
{
"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
}
]
Display the source blob
Display the rendered blob
Raw
stateface-regular-webfont.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
stateface-regular-webfont.ttf
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
stateface-regular-webfont.woff
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
stateface.json
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
style.css
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
vis.js
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment