SVG plot from point-value pairs

+1 vote
asked Mar 16, 2012 by minifig404

I need to write some code (for a webapp with a straight-HTML/JS client) that will generate a visual representation of a set of point-values. Each point has an X and Y coordinate, and the value is an integer. If I can use SVG to do this, then I can scale the image client-side with no extra code. Can I actually do this? I am concerned about a couple of things:

  • The points don't necessarily have any relation to each other. They aren't necessarily in a grid, nor can we say how many points are nearby, etc.
  • Gradients are primarily one-direction, and multiple gradients on the same shape seems to be a foreign concept.
  • Fills require an existing image, at which point, I'd be better off generating the entire image server-side anyway.
  • Objects always have a layering, even if it isn't specified, which can change how the image is rendered.

If it helps, consider a situation where we have a point surrounded by 5 others, where one of them is a bit closer than the others (exact distances and sizes can be adjusted). All six of the points have different colors (Red, Green, Blue, Cyan, Magenta, Yellow, with red in the center and Yellow being slightly closer), and the outer five points are arranged roughly in a pentagon. Note that this situation is not the only option, just a theoretically possible situation.

Can I do this with SVG, or should I render an image server-side?

EDIT: The main difficulty isn't in drawing the points, it is in filling the space between the points so that there is no whitespace, and color transitions aren't harsh/unpredictable if you know the data.

1 Answer

+1 vote
answered Jun 11, 2013 by junkaholik

I don't entirely understand the different issues you are having with wanting to use svg. I am currently using the set up you are describing to render X-Y scatter plots and gaussian curves and found that it works great.

Regarding the last point about object layering, you have to be particularly careful when layering objects with less than 100% opacity which are different colors. The way the colors "add" depends on the order in which you add the objects to your svg drawing.

Thankfully you can use different filters to overlay the colors without blending them. Specifically I am using the FeComposite filter element. There is a good example of its usage here:

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter