Refine bar charts

[ericronne]

No description provided.

[ericronne]

from #1548 ...

@shawnbot @meiqimichelle @coreycaitlin, i think it might be best to make all of the bars the same width, and allot space for ten of them. This will make for an easier page scan, say if the user wants to visually compare all of the 2010 numbers. Here's how it could look, discuss! (Sample topic: hairline along the bottom necessary?) ...

[ericronne]

Here's what interaction might look like. Test? Try different design?? @meiqimichelle

Option A
Visually distinguish the "zero" year labels (light gray) from the "no data" year labels...

Option B
Treat all non-selected year labels identically. Hover over years (or click) to see whether a given year has no data is a zero.

[ericronne]

Will do an envision prototype to test...

[ericronne]

Proposed visual and interaction design ...

Note: When you mouse off of a year after clicking it, the other charts will not change (this would be really difficult to prototype correctly!)

And with sentences (not animated)

Thought: i think it might good to update the summary sentences only on click, rather than mouseover. Otherwise it might be jarring. Agree?

[ericronne]

Here's how it looks with sentences changing on hover. I think i'll test this. LMK if you would like to as well, it requires the flinto app :/

[coreycaitlin]

<3 this, and agree that the sentences should probably only change on click.

[ericronne]

As a result of feedback from armchair usability testing sessions, i've updated the design. Will fold these into the upcoming selector prototype (issue #1582), but probably safe to get this styling into the implementation queue, @gemfarmer 👍

Sketch file

[ericronne]

Made a slight tweak based on your comment re emphasizing the numbers, @gemfarmer ...

Sketch file

[shawnbot]

@gemfarmer: I just cleaned up the year ranges on all of the state and national pages in #1592, so they're all set with {% assign %} and the bar charts get x-range="{{ year_range }}" instead of data-x-range (which was my way of disabling that feature). The one thing to be aware of here is that year_range is a "global" variable in the liquid templates, so there could be some cases in which we're not setting it in one include and its previously set value is being used anyway. We might want to namespace these, or move the year ranges into a data file so that they can just be used as-is by the individual templates, for instance:

x-range="{{ site.data.year_ranges.federal_production | jsonify }}"

@ericronne what this means for you is that the bar charts should all be at least internally consistent on a section-by-section basis, e.g. with Geothermal Sulfur in California.