A Simple Tool to Interactively Explore SVG Markers

SVG in the browser offers some interesting and powerful capabilities with respect to lowly line markers for arbitrary paths (http://www.w3.org/TR/SVG/painting.html#MarkerElement). However, from my point of view, the documentation is a little confusing, and it is difficult to experiment in an interactive way in order to better understand what the various parameters are. And even for a marker, there are a surprising number of parameters, some of which may interact in unexpected ways.  And then there's the  issue of how the different browsers have actually implemented the specification.

With this in mind, I have started creating a tool - based on d3.js - that lets you twiddle the various parameters and see the impact on the rendered marker.  It is on googledrive here:

How do all those parameters affect the rendering of the end marker
(an arrowhead in this case)?

You can enter specific values to see the impact (and d3 transitions are used to animate these changes), or you can simply click in one of the input boxes and drag the mouse up and down - this will increase/decrease the parameter and allow you to see how those changes affect the rendered marker.

Note that the red box is added as part of the marker to try to assist with how the viewbox parameters affect the marker.  I have checked several times, and it seems to be putting the right values in, but some odd things seem to happen to the marker relative to the box for some values.

I had been meaning to put something together like this after fighting with end markers with this visualization to explore how PageRank is calculated, and last night I came across a nice jsFiddle (which itself is based on this example by Michael Bostock) - this inspired me to go ahead and start implementing this.  In addition, implementing the ability to simply move the mouse in the inputs in order to see dynamic changes - while not really anything new - was inspired by the amazing work by Bret Victor, whose mind-blowing visualization tools and approaches are opening up new avenues of creative exploration.