• 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)

• legible.groupBy([groupBy])
  
  
• d3.nest()
  
  
• d3.layout.treemap()
  
• treemap.round([round])
  

• 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

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

CSS transitions

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'; });

• Boardroom
• 3D without CSS 3D: left, top, z-index
  
  
• Color legend
• Translate scale.domain() to a linear gradient
  
  
• Numerical tween