Gender Map


Paul Dechov
@pauldechov

Fully client-side application

 + 

  • Original data across 5 Excel spreadsheets (422 MB total)

  • Node script yields assets for client-side consumption
    • companies.csv (2.2 MB / 765 KB gzipped)
    • options.json with additional data (7 KB)



Demo

Grid Layout


  • d3.layout.legible()
    • legible.width([width])
    • legible.height([height])
    • legible.minBoxHeight([minBoxHeight])
    • legible.maxBoxHeight([maxBoxHeight])
    • legible.minTextRatio([minTextRatio])
    • legible.maxTextRatio([maxTextRatio])
    • legible.spacing([spacing]) — default: 1
    • legible.nodeAtPosition(x, y)

Grid Layout: Grouping


Rendering the Grid


  • DOM mode
    • Absolute positioning of <div> elements
    • Conventional D3 manipulation

  • Canvas mode
    • Painted rectangles
    • Layout's nodeAtPosition method for mouse events

  • Transitioning between modes
    • canvas → DOM: enter "updating" elements beforehand
    • DOM → canvas: exit "updating" elements afterwards

More about transitions


  • Sequential phasesExit, then update, then enter
  • Staggered delays: Scale delay over a time interval

CSS transitions

Conventional D3
selection
  .transition()
  .duration(200)
  .ease('linear')
  .delay(function(d, i) { return i * 10; })
  .style('left', function(d) { return d.x + 'px'; });

The "native" way

selection
  .style('transition-property', 'all')
  .style('transition-duration', 200 + 'ms')
  .style('transition-timing-function', 'linear')
  .style('transition-delay', function(d, i) { return i * 10 + 'ms'; })
  .style('left', function(d) { return d.x + 'px'; });

Miscellaneous D3


  • Boardroom
    • 3D without CSS 3D: left, top, z-index

  • Color legend
    • Translate scale.domain() to a linear gradient

  • Numerical tween

Thank you!




two-n.com/jobs/developer


Gender Map

By dechov

Gender Map

  • 1,105