azavea / fb-gender-survey-dashboard

Interactive exploration of global results from the Facebook "Survey on Gender Equality At Home
https://gender-survey-dashboard.netlify.app/
Apache License 2.0
2 stars 2 forks source link

Add stack chart #26

Closed TaiWilkin closed 3 years ago

TaiWilkin commented 3 years ago

Overview

Adds a generalized chart component and a basic visualizations page layout. The generalize chart component receives a Question/Response object and determines which type of Nivo chart to render.

Implements the Stacked Bar Chart, including the legend.

Connects #21

Demo

Screen Shot 2020-12-28 at 9 55 54 AM Screen Shot 2020-12-28 at 9 57 24 AM

Notes

The title value (the question) does not appear to be supported for canvas. I attempted to add it through this suggested method. I also attempted to add the question as an axis label (see how the country/region is shown), but text wrapping isn't available and the questions are too long to be displayed in one line.

Rather than modifying the DataIndexer class return value, I'm currently modifying the data structure within the component. I think it's possible that once all three charts are made there could be overlap in structure, but at the moment it seems like they are too different for a consistent data structure to be used.

There is a bug in Nivo where the legend text color can't be set properly, so the text is currently their default grey. Hopefully this will be repaired in the future.

I didn't use this in the final code, but it is possible to manually select the colors for different values in the chart if we choose to go down that route:

colors={item => {
    if (item.id === 'Strongly Disagree/Disagree') {
        return 'rgb(162, 48, 55)';
    } else if (item.id === 'Neutral') {
        return 'rgb(217, 217, 217)';
    } else {
        return 'rgb(221, 155, 0)';
    }
 }}

Testing Instructions

TaiWilkin commented 3 years ago

Added issues #27 and #28 addressing the legend text and title issues.