A team I work with built a great internal tool with D3 and there were a few things that they did that really bumped it up to the next level:
- The data was the interface. Things that they used d3 to show, were also the interaction elements which could be clicked to focus-in on subsets of the same data. It was almost fractal, but also immediately clear and simple to use. There were no control bars or sliders or really buttons. Anybody who could use google maps could use this and it took about 10 seconds to show somebody how it worked before they could operate it at a high-level.
- The legend was not just a visual aid, but had interactive components in the tool:
1) Hovering over an element in the legend caused all the corresponding elements in the display to highlight so you could see where they were in a complex display. (and visa-versa, hovering over an element in the main display caused that element in the legend to highlight)
2) Clicking an element in the legend caused it to filter on-off, allowing various unimportant parts of the display to be eliminated.
These three things changed it from just a static picture into a useful analytic tool and getting more value out of the legend by turning it from just a picture into a fully interactive element felt so obvious in retrospect that legends I see now that are just a legend feel incomplete.
Very nice! I was tired of making my own legends for each single things. And this one looks really nice and easy.
Though, one of my pet peeves: people, please don't use discrete color scales for continuous parameters. It distorts presentation for no good reason. For example two countries are colored the same way even though they are on the opposing edges of a bin (so the difference is being masked), or two countries are colored in a different way, even though the difference is minimal, but just passes an artificial threshold (then an artificial difference is being shown).
And the colormap should be easy to read with color blindness (so the blue/green one is not good), and also look good with various amounts of hue on different screens or print. For instance, printed in b&w. This page has a lot of color maps and how they look in greyscale in the bottom: http://matplotlib.org/1.4.1/users/colormaps.html As can be seen, the "jet" map often used is unreadable, luckily it is no longer default in matlab.
> And the colormap should be easy to read with color blindness (so the blue/green one is not good)
Well, blue/green or blue/red are actually the most acceptable scales to use, since most colorblind people only have problems distinguishing red and green, while for most of the others blue is very dark so the scale still works somewhat. The others are a very, very small minority that will already be used to use various tools to enhance their vision.
> people, please don't use discrete color scales for continuous parameters
There are arguments against using continuous scales:
* By using classes (e. g. quantiles) you can reduce the impact of outliers. On a continuous scale an outlier can cause everything else to be perceived as one color.
* Perception of color intensity is not strictly linear.
This is the exact wrong way round. Continuous colour scales are hugely problematic because of the fact that our colour perception is closely linked to context.
If precise comparisons are required you're better off not using colour at all. Colour e.g. in choropleth maps, is good for showing broad spatial trends or highlighting particular areas for selection. A bar chart is better for precise comparisons because we're much better at comparing lengths than colours.
It depends. Classes can greatly help the understanding of a map. It ia much easier to recognise and identify few classes than it is to interpret a vast continuous scale. But really, it totally depends on your data and intentions.
It is easy to arrive at wrong conclusions. But it is No.1 argument against discrete scales, not for it. It can happen by accident, but it is possible also to intentionally deceive - e.g. by setting such bins that Greece and Spain have the same color but Italy do not. Or that Spain and Italy have the same (but Greece different), etc.
For the size legend, the defaults are a bit odd. You should almost always be using d3.scale.sqrt() as you're comparing area, also zero in the domain should usually map to zero on the range.
I can't be the only one who thought this article would be about people who will be known throughout history for their amazing work in D3- champions, heroes, front-end developers!
This is awesome. After spending a lot of time tweaking chart legend code, I would be very happy to pull a polished toolset like this in to future projects.
Something you make in two minutes enables more interaction than this solution? I must work at a very slow pace...legends take me longer than I'd like to admit.
- The data was the interface. Things that they used d3 to show, were also the interaction elements which could be clicked to focus-in on subsets of the same data. It was almost fractal, but also immediately clear and simple to use. There were no control bars or sliders or really buttons. Anybody who could use google maps could use this and it took about 10 seconds to show somebody how it worked before they could operate it at a high-level.
- The legend was not just a visual aid, but had interactive components in the tool:
1) Hovering over an element in the legend caused all the corresponding elements in the display to highlight so you could see where they were in a complex display. (and visa-versa, hovering over an element in the main display caused that element in the legend to highlight)
2) Clicking an element in the legend caused it to filter on-off, allowing various unimportant parts of the display to be eliminated.
These three things changed it from just a static picture into a useful analytic tool and getting more value out of the legend by turning it from just a picture into a fully interactive element felt so obvious in retrospect that legends I see now that are just a legend feel incomplete.