The Elegant Selection

Building news graphics and data visualizations for the modern web

Table of Contents

1. Introduction
2. How to read this book
3. Writing Less JavaScript
   1. jQuery in Vanilla JavaScript
      Selecting and iterating in the DOM | Events at a distance | A toast to John Resig
   2. Scaling time and space
      Sparklines from normal data | Timing and easing | The new face of zero and one
   3. Combining data with the DOM
      Transforming data into HTML | Closures for storage | Cheaper events with lookup tables
   4. Client Rects and Scroll Effects
      Efficient scroll listeners | get rect | Scrolling sans JS
   5. Visualizing with canvas
      Rendering basics | Handling events | Coping strategies
   6. Media matters
      Media tags | Creating player UI | Never use .gif again
4. Fluently speaking CSS and HTML
   1. Floats demystified
      All about the document flow | Clearing floated elements | Alternatives to float
   2. Building stacked charts with flexbox
      Assembling our chart | Columns over bars | Weird flex but okay
   3. CSS-based scatter plots
      How positioning works | Aspect ratio rules | WTF, padding
   4. Dot matrix chart via CSS attributes
      Tab UI with radio buttons | Attribute selectors | Deep pattern thoughts
   5. Visualization as a civil right
      Inclusive news design | Accessible by default | Required reading
5. SVG Mechanics and Mysteries
   1. Art direction with viewBox
      The SVG coordinate system | Setting the camera bounds | Pan, zoom, and draw
   2. Generating SVG from code
      Creating elements | Nesting SVG | Line charts to scale
   3. CSS and SVG, Large and Small
      Inline and external media | Small multiples | Style icons
   4. Common pitfalls of SVG
      Attributes and properties | Scaling and wrapping text | SVG speed traps
6. Performance and other problems
   1. Debugging and dev tools
      Dev tools starting points | What to look for | Debugging mobile devices
   2. FLIP for smooth animations
      From A to B | Using FLIP on many elements | Stack of reflow
   3. Fixing common slowdowns
      The easy stuff | Deferred loading | Shrink your JavaScript