gigamonkey/gg — pull request #6 by asolove (2012-08-08 15:33:07+00:00)
Title: Text geometry begins

This is the beginning of a text geometry with interactive labels. I wanted to check in and see if I had structured things in an expected way.

The text geometry will allow us to label data points. It is especially helpful on numeric-numeric charts, like scatter plots, where the axes provide no answer to the question "where does the data for this dot come from?" The text can optionally only be shown on hover, which is useful on high-density charts.

What's changed?

- I had to update `dataMin` and `dataMax` to only get values from layers that actually have something to say about the given aesthetic. My text layers were getting queried for their min and max about things they didn't know about.
- I have added a `TextGeometry` class which knows how to render the text labels at the appropriate place on the canvas.
- I have added a `TextScale` that implements a very simple templating format for interpolating in data values. Providing a mapping of { text: "{name}: {height}" } will result in labels like "Adam: 78". I am currently formatting floats automatically to 2 decimal places. Obviously the format strings should allow for things like number formatting, escaping html, etc.
- The `TextScale` needs to know the raw values of all the scales for a given point so it can interpolate them into the string. This required passing the data through `scaledValue` and `scaleExtracted`.
- I have added a special case for training a `TextScale` because the other cases there did not make sense.

What could be improved:

The SVG implementation of show-on-hover is messy. It's just a bunch of text layers with transparent text until you hover over them. This means they are always there, and preventing hover and mouse events from making it down to the actual data points.

- Find a way to connect the text labels to the actual data points/lines/bars. Then have the text only displayed when the user hovers over the data item itself. I'm not sure how to do this since the two layers are rendered at different times. Maybe we need to cache the svg elements we rendered in other layers so we can get to them later?
- Highlight the point/line/bar for which the label is being shown.
- Configurable text aesthetics, so text can be in different colors or sizes based on data.