block by micahstubbs 264454a671a6785cbc652cd79460fd2f

d3-module-faces | more modules

Full Screen

now with d3-sankey and d3-hexbin

as requested by @xaranke

an iteration on d3-module-faces | standard notation from @micahstubbs


Original README.md text


an iteration that shows axis tick labels in standard notation.

I found the tickFormat snippet to do this at this stackoverflow answer

along the way, I also fiddled with the width and the annotation placement to get everything inside of the 960px bl.ocks.org frame

an iteration on d3-module-faces from @adamrpearce


To visualize the d3 modules being used, I made a qr. By transforming many different attributes of our dataset into friendly glyphs, Chernoff faces allow us to understand multidimensional datasets. The encoding scheme is probably self explanatory, but I’ve included it below just in case:

'face':  ƒ('dependentsCount')
'hair':  ƒ('description', 'length')
'mouth': ƒ('downloads')
'nosew': ƒ('githubContributers')
'noseh': ƒ('githubIssues')
'eyew':  ƒ('githubStars')
'eyeh':  d => Math.random()
'brow':  ƒ('repoSize')

I used the following modules:

Data is from nprms.io - see download-data.js to your generate your own listing of modules with different data points.

_script.js

index.html

annotations.json

chernoff.js

container-force.js

download-data.js

package.json

style.css

swoopy-drag.js