Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Library] Allow stat var <> color mapping to be set by users #2919

Merged
merged 14 commits into from
Jul 11, 2023

Conversation

juliawu
Copy link
Contributor

@juliawu juliawu commented Jul 11, 2023

Adds an optional "colors" attribute to each of the chart web components, to allow the user to set specific colors for the stat vars being plotted. Any CSS valid color value is allowed.

Changes made:

  • colors attribute is added to each chart web component
  • the corresponding tile gets color added as a chart option
  • some cleanup of attributes/props -- resorted to alphabetical order
  • Examples and docs are updated

Examples:

<datacommons-bar
  title="Median income by gender of select US states (grouped)"
  comparisonVariables="Median_Income_Person_15OrMoreYears_Male_WithIncome Median_Income_Person_15OrMoreYears_Female_WithIncome"
  comparisonPlaces="geoId/01 geoId/02 geoId/04 geoId/05"
  colors="#4287f5 #f542a4"
></datacommons-bar>

Screenshot 2023-07-11 at 1 37 09 PM

For the maps, providing up to three colors are supported (will ignore colors past the first three):

For a single color, we get a luminance based color scale

<datacommons-map
  title="Population"
  place="country/USA"
  childPlaceType="State"
  variable="Count_Person"
  colors="red"
></datacommons-map>

Screenshot 2023-07-11 at 1 17 05 PM

For two colors, we get a diverging color scale

<datacommons-map
  title="Population"
  place="country/USA"
  childPlaceType="State"
  variable="Count_Person"
  colors="blue red"
></datacommons-map>

Screenshot 2023-07-11 at 1 16 40 PM

For three colors, we have [min, mean, max] mapping:

<datacommons-map
  title="Population"
  place="country/USA"
  childPlaceType="State"
  variable="Count_Person"
  colors="blue purple red"
></datacommons-map>

Screenshot 2023-07-11 at 1 17 27 PM

@juliawu juliawu requested review from shifucun and dwnoble and removed request for shifucun July 11, 2023 20:49
@juliawu juliawu marked this pull request as ready for review July 11, 2023 20:50
Copy link
Contributor

@dwnoble dwnoble left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice!

@juliawu juliawu merged commit f734137 into datacommonsorg:master Jul 11, 2023
8 of 9 checks passed
@juliawu juliawu deleted the web-component-colors branch August 10, 2023 18:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants