Improve Legend Design

[ryanbaumann]

The current default legend is very basic - we should improve the design with a bit of CSS magic.

[akacarlyann]

I think this could go well with generalizing the function for creating the legend, too! Right now I have a hack in the ChoroplethViz class that styles the legend symbols as rounded squares instead of circles. Are you thinking of inline CSS with Jupyter or defining more style components in viz.py? I'm happy to work on this a bit.

[ryanbaumann]

Yes, that would be excellent @akacarlyann. There's lots of inspiration to take for great design - are you confident in the design direction you'd like to take, or would you prefer to start with some suggestions on this thread?

As far as how to compile the CSS - if we're going to make the stylesheet bigger, I'd think of breaking it out into its own style Jinja template block. Then can insert the needed css into the block for the viz.

Alternatively, if there isn't much more css, we can just inline all the css into main.html and use different CSS classes to control the legend style to use.

[akacarlyann]

If you've got an idea in mind, I'm happy to take a look. Otherwise my thought was to start with centering the legend title and possibly adding a color-background to the header. Otherwise, feel free to point me in a different direction.

[ryanbaumann]

I like those. Other ideas from the Mapbox CSS library, especially for continuous scales:

https://www.mapbox.com/assembly/examples/legends/

[bchowTWC]

Apologies for hijacking, didn't want to create another issue on a related topic...

Background: one of my use cases involves dropping a polygon on the map from a single geojson feature and filling in the enclosed area. I currently (mis)use a ChoroplethViz to accomplish that, using a single colour stop and a property that's common across all my features. That almost gets the job done for me; the only "issue" is that the legend doesn't show anything useful, since I'm misusing the ChoroplethViz type.

Question: would there be any interest in having a way to hide the legend?

I've a few ideas, the simplest being a boolean should_show_legend=True argument in either the constructor or ChoroplethViz.show(), but I wanted to check with y'all first in case the solution to my problem is more coffee already hiding in plain sight somewhere in the documentation. Which I swear I've read several times over.

Thanks!

[ryanbaumann]

I'm in favor of a legend=True option @bchowTWC, where the default parameter value is True. This could be added as a base parameter to all visualizations, along with style and access_token.

[akacarlyann]

@bchowTWC I like that idea too! In the meantime, if you need a quick hack to hide the legend, you can override the legend block at the top of your choropleth HTML template (this is what is done for heatmaps currently):

{% block legend %}

    document.getElementById('legend').style.visibility = 'hidden';

{% endblock legend %}

[akacarlyann]

@ryanbaumann I'm thinking of moving creation of the legend div into the legend creation function.

function calcCircleColorLegend(myColorStops, title) {
    // create legend
    var legend = document.createElement('div');
    legend.className = 'legend';
    legend.id = 'legend';

    document.body.appendChild(legend);
   ...

and removing <div id='legend' class='legend'></div> from main.html. This way we don't have to explicitly select the div and hide it for cases where no legend is desired. Any thoughts on drawbacks to doing this?

[akacarlyann]

Work in progress at #100 :)

[ryanbaumann]

Agree with that approach @akacarlyann - generate the div in the javascript function instead of using more CSS magic to conditionally show/hide the legend

[akacarlyann]

For next steps on this, I think the best things would be:

• smart text wrapping/scaling in legend item text
• a variable radius legend for graduated circle viz
• variable width legend for linestring viz
• some other support for multi-variable legends
• legend placement controls (currently always lower right of map)

[ryanbaumann]

Closed in #100 - let's open a new issue to track improvements @akacarlyann