create fluid (scaling) concentric arcs using css, canvas, or svg

Question

I am trying to create a graph like this:

http://bl.ocks.org/cmdoptesc/6228457

or like this

http://raphaeljs.com/polar-clock.html

But I want it to be able to scale (preferably without javascript) according to the browser width. I would love to be able to do this with CSS only, and if not with CSS, preferably without a library like raphael or d3 (though I'll take what I can get). Anybody know how to accomplish this in a way that scales down / up?

UPDATE

I made a JS Fiddle - this is exactly the graph I want:

http://jsfiddle.net/Q9hb5/

But I need it to resize. I am using Raphael, and I read about SVG resizing here:

http://bertanguven.com/?tag=raphael-js

and here:

http://www.justinmccandless.com/blog/Making+Sense+of+SVG+viewBox%27s+Madness

but I don't want to have to resize with JS - I'd really like to be able to do this with svg properties such as viewBox and preserveAspectRatio, but I still haven't seen an example that accomplishes this.

Any ideas?

Answer 1

Since you say you don't want to use Javascript libraries, I assume you are creating the SVG image ahead of time and/or on the server, and are just transmitting static SVG code to the user. Canvas images, in contrast, are always made with Javascript.

(If you want to dynamically create the graph with Javascript, but not use a library, the hard part will be drawing the graph, not getting it to resize! As @Lars Kotthoff notes, with Javascript it is easy to find out the size of the window and scale everything accordingly.)

To make SVG scale up and down, you need to include a viewBox attribute on your SVG element, and it will scale automatically. A warning, though, that sizing the image dynamically while maintaining aspect ratio can be a bit frustrating. The preserveAspectRatio attribute prevents distortion, but only by leaving empty space, not by scaling down. In Firefox, using height:auto; will cause the SVG height to scale down to match the width and viewBox aspect ratio, but not in webkit browsers.

Example here:
http://fiddle.jshell.net/9dSbL/

A somewhat indirect solution is to + Set the svg height to a negligible (but not zero) amount, such as 1px; + Set overflow:visible; on the svg; + Use a slice option for preserveAspectRatio, so that the image scales to the larger dimension of height or width; + Hard-code a bottom padding style on the svg element that matches the aspect ratio of the viewBox; + Wrap the entire svg in a <div> with style overflow:hidden;.

Example here:
http://fiddle.jshell.net/9dSbL/1/