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
I wanted to learn a bit of D3, so I made a small web app that shows (nearly) realtime webserver statistics as pretty graphs. Here’s a demo for my server and a setup guide.
Source on Github Source on Github
(You need both, but the first will get the second via NPM.)
MediaTemple were nice enough to introduce an API that provides a load of stats about what your server is doing some time ago. This is the same info that you can see in the server status bit of the account centre. Unfortunately the interface there is a bit clunky and it also logs you out (sensibly) after a few minutes’ inactivity.
Inspired by some of the really cool stuff Mike Bostock has done with D3, (mt) Stats gives you the same info with a (hopefully) nicer interface, and maybe even doing quite well with Tufte’s data-ink ratio. You can add as many graphs as you like (if your CPU can take it at least), move them around by dragging and adjust the interval over which stats are shown with the range slider. Keep reading