Vega-lite visualization initial style sheet

hubmapconsortium / hra-ui

HRA UIs Monorepo (includes HRA Portal, EUI, RUI, ASCT+B Reporter, and more)

MIT License

4 stars 2 forks source link

Vega-lite visualization initial style sheet #515

Closed LibbyUX closed 2 months ago

LibbyUX commented 3 months ago

TO DO: Specify Vega-lite visualization style sheet & guidance for development in the Design System Repository's Pattern Library.

Resources

Vega-lite Overview

LibbyUX commented 3 months ago

@axdanbol, please see my Vega-lite Pattern sheet. Let me know if you need anything else in here! These updates are now ready for development.

Team, please note that some of these updates may be iterative, as I need to see what this looks like in the visualizations.

Design System Repo

Figma: Vega-lite Patterns

LibbyUX commented 3 months ago

I added casing notes from Katy & my Slack messages this morning. The Vega Pattern sheet has been updated.

bhushankhope commented 2 months ago

@LibbyUX I have updated the font styles for the visualizations according to the spec for both CDE and Dashboards. But I see that some of the labels/legend is being cut when we rotate the labels by 45 deg. Latest preview is here

CDE

LibbyUX commented 2 months ago

@bhushankhope thank you for working on this! We're moving in the right direction! I have reviewed both UIs, thank you for getting this started!

Rotation

When I rotate 45 degrees in Figma, this is what I see in Figma vs in production:

Cut off labels

Can we try making all Vega-lite visualizations a 3:1 ratio with longer, responsive containers? We're going to have to keep iterating what looks best but is also readable/interactive.

Can you try these layouts the Vega-lite visualization pages?

Dashboards/Vega font styles

Can we get closer to the Vega Style Sheet - Font Specs in Dashboards? I'm seeing non-Metropolis fonts, light appearing font weights, and letter casing opportunities:

LibbyUX commented 2 months ago

Hey @bhushankhope I just found a feature request from Katy, so I added a number separator section to the Vega-lite Style Sheet!

axdanbol commented 2 months ago

@bhushankhope

See https://vega.github.io/vega-lite/docs/config.html#format and https://d3js.org/d3-format#locale_format for number formatting
For letter casing titles, labels, etc. we might have to add data transforms/expressions
Try using negative angles to rotate in the other direction (don't rotate short labels that already fit)
Definitely try using 3:1 ratio layout

bhushankhope commented 2 months ago

@LibbyUX I have modified the font styles and the angle for the labels Preview I am yet to fix the padding/spacing issues in the charts

bhushankhope commented 2 months ago

@LibbyUX all the latest changes can be reviewed here