

Legends in D3 - jsweojtj
http://d3-legend.susielu.com/

======
bane
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.

~~~
hgylfason
This really reminds me of toggling legend in Rickshaw.
[http://code.shutterstock.com/rickshaw/examples/extensions.ht...](http://code.shutterstock.com/rickshaw/examples/extensions.html)

~~~
bane
Yeah, the legend works very similarly in the one I saw as well.

------
stared
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).

~~~
maaaats
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](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.

~~~
seszett
> _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.

As far as I can see, testing with
[http://colortest.it/deuteranopia:http://d3-legend.susielu.co...](http://colortest.it/deuteranopia:http://d3-legend.susielu.com/)
for example, the chosen colorscale is not the worst there is.

------
aubergene
Looks very good.

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 made a similar legend for circle areas, but they are stacked within each
other.
[http://bl.ocks.org/aubergene/4723857](http://bl.ocks.org/aubergene/4723857)

------
mslev
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!

~~~
coldtea
No, but those comfused would be people who haven't worked with plotting and
charts and so don't know what "legend" means in this context.

------
geoffharcourt
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.

------
couchand
"Tired of making legends for your data visualizations?"

No. It never takes more than about two minutes to whip up something basic like
this.

Integrating your legend tightly with your visualization has lots of benefits,
mostly in terms of enabling interaction.

~~~
anc84
Good for you. For me it would take close to a working day at least the first
time. Later on, maybe an hour if I am lucky.

