search

wklumpen / equity-pulse-web

Equity Pulse is a web application and visualization platform using Flask+D3 to support equity and access calcualtions for TransitCenter/SSR/SF2 Work
4 stars 0 forks source link

Adjusting format of clickable date labels #48

Closed mlbtc closed 3 years ago

mlbtc commented 3 years ago

We'd like to make the clickable feature of the dates even more obvious on the interactive charts, if possible. We generated a few ideas - are either of these possible? 1) adding a hover feature over the interactive dates with a note like "Click on a date to show its data on the right bar chart" (like the hover labels over the regional profiles on the homepage) 2) enlarging and/or bolding the font size of the date labels.

wklumpen commented 3 years ago

Number 1 is a feature of Materialize (the CSS package I'm using), and it may not work well with the d3 package we're using for charts.

I need a little bit more clarification on the behaviour for No. 1: Would the tooltip with the message only show when the date is hovered over?

One middle ground here is to make it so when the dates (and bars) are hovered over they respond in some way (perhaps by getting slightly bigger or darker) to guide the idea that it will respond to a click. That may be a bit nicer than having a tooltip pop up which may interfere with the data viewing

mlbtc commented 3 years ago

I like your middle ground idea. We could keep the note below the chart about the dates and bars being clickable, and then have the dates & bars respond when they are hovered over. Bigger or darker would work - whichever you think looks better.

Can you change the note about the interaction to "This chart is interactive. Change the data on the right bar chart by clicking a different date or the gray bar below."

wklumpen commented 3 years ago

Yes, though I will make a small modification to say "above", unless you'd like the text placed on top of the chart?

wklumpen commented 3 years ago

Oh, I see where the "below" comes from! Got it, will make updates.

mlbtc commented 3 years ago

Maybe it could be "This chart is interactive. Change the data on the right bar chart by clicking a different date or a gray bar"

wklumpen commented 3 years ago

Updated, will be reflected in the next push. Changes made:

mlbtc commented 3 years ago

The date labels are just going blue when you hover over them - not also getting bolder. Can you add or strengthen the emboldening feature?