Making responsive SVG graphs

One of the (many) nice things about Twitter’s Bootstrap is its responsive layout. I’m using it for a new project alongside some D3, and I’d really like the graphs to resize with the grid. Unfortunately SVG elements don’t seem particularly amenable to this, and all the D3 demos I’ve seen have had a fixed width and height.

Building a responsive graph

A responsive SVG graph should behave like any other styled element

  • Expand to fill the containing element (if required)
  • Keep line widths and text the same size and prevent distortion, no matter how big the graph becomes

Keep reading >