Barchart Example Six

Now we need some axes so that we know what we are looking at. The axes need to be outside of the main area of the visualization, but inside of the SVG (so they can be drawn). To get this to work, we place the visualization inside of a "g" (and SVG group object). We can translate this to some other region of the SVG. The beauty of this is that the "g" still maintains its personal origin.

Note that we also have to style the axes to get them to look reasonable. Otherwise, we can't see the tick marks. I've added a style section to the page up in the head. Since the axes are just SVG objects, if we know what they are, we can style them any way we like.