All examples By author By category About

Saminu
Full window Github gist

pictogram table | d3v4

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.

forked from micahstubbs's block: pictogram table | d3v4