search

dawncomer / open-sdg-site-starter

A starting point for the site repository of an Open SDG platform implementation.
MIT License
3 stars 1 forks source link

Chart visualization options #16

Open dawncomer opened 5 years ago

dawncomer commented 5 years ago

Hi @brockfanning, I've been able to get the bar chart to work, and here is the current view: bar chart current

As an alternative, is there a way to create a stacked bar chart to represent the values? I think it would allow for a better visualization of the data. Example: bar chart vision

brockfanning commented 5 years ago

@dawncomer Sorry this slipped past me. So the difference I seeing there is that:

  1. The bars are ordered from shortest to tallest, left to right
  2. The bars actually go all the way up, but with a different color where they would normally stop

Does that sum up what you're looking for, or is there anything else I'm forgetting?

dawncomer commented 5 years ago

@brockfanning yes on the points you highlighted, but more importantly is that the 'stacked bars', show more than one data value on the same bar, vs it being one data value per bar, does that make sense? so for example if it were gender equity, male and female stats are stacked on one bar, vs being 2 bars side by side.

brockfanning commented 5 years ago

@dawncomer This seems like a great idea for a visualization, but it would need to developed. The two possible ways do go about that are:

  1. Submit it as an issue in the Open SDG issue queue.
  2. Develop it specifically for your site (hackathon?) and then maybe in the future contribute it back to Open SDG

Doing both is fine too. I'm available to give feedback or ideas as needed.

To throw out some initial thoughts: I imagine this visualization might be called something like "percentage_bars", and part of its configuration would be to bind it to specific disaggregations (like female/male) that are required to add up to 100%.

brockfanning commented 5 years ago

Also to see some precedent of custom visualizations, here is another one already in Open SDG. This one is intended for yes/no data, and here is a production example of that.

dawncomer commented 5 years ago

Hi @brockfanning apologies for the delay. thanks for your response. For this example are there values for the 'no' fields, which seem to be blank?? E.g., # of Yes' and % of No's or is this an either Yes or either No representation?

I like the hackathon idea.

Thanks! Dawn

brockfanning commented 5 years ago

Hi @dawncomer for that visualization, which we've called "binary", the values should be either 1 (for "Yes") or -1 (for "No"). In that example all the years are set to 1, but if there was some that were set to -1 then there would be some bars going down instead of up. Here is the data for that example.

dawncomer commented 5 years ago

Hi @brockfanning , following up on this. Is this example similar to the binary visualization? If so, the difference in what I was describing is the bars would have values that say add up to 100%....for example a bar would represent 2 values: 10% and 90% or another would represent 55% and 45%. Is that possible? Or only the 1 and -1? thanks!

brockfanning commented 5 years ago

@dawncomer I took a quick look a stacked bar charts, and wanted to get your feedback on a first draft. It likely will not meet your needs 100%, but could be a step in the right direction. To test it out, you'll need to do this:

  1. Merge this PR: https://github.com/dawncomer/open-sdg-data-starter/pull/8
  2. Wait about 10 minutes
  3. Merge this PR: https://github.com/dawncomer/open-sdg-site-starter/pull/33

Again it's not exactly like your screenshot, but I wanted to start with something really basic and iterate a lot.

brockfanning commented 5 years ago

@dawncomer Just checking in on this. Were you interested in trying this out?

brockfanning commented 5 years ago

@dawncomer Just a note that you merged #33 but you didn't merge https://github.com/dawncomer/open-sdg-data-starter/pull/8

dawncomer commented 5 years ago

Thanks @brockfanning just merged

brockfanning commented 5 years ago

Ok cool. It should show up after your next push to the site repository (or after the next nightly release) on indicator 5.1.1. Remember it's just meant to be a starting place for feedback. As you add items from the sidebar dropdowns, they should appear in the graph as a single bar stacked.

dawncomer commented 5 years ago

Hi @brockfanning this is a great start.
It looks great when 2 variables are chosen: image

however, let's talk through how the bars are reflected for the multiple fields. right now, all departments are stacked on top of each other, male, female and department for 5.1.1.

How would we have separate bars for each department, and on each bar would be the gender breakdown?

image

brockfanning commented 5 years ago

Great notes @dawncomer. Just thinking out loud - so it seems like we need some way to have a "special" disaggregation which gets stacked (male/female in this case), whereas all other disaggregations get displayed as separate bars. So in practice maybe that would be a metadata field like:

stacked_disaggregation: Gender

Which would communicate to Open SDG that the "Gender" disaggregations (only) should be stacked.

angelamhkim commented 5 years ago

Hi @brockfanning is that as easy as adding that line to the metadata file? Do you know of a way to incorporate R code for customized visualization? I think this is what Dawn has in mind for the 5.1.1 plot (http://rpubs.com/angelamhkim/LA511viz). The code for that plot is here (https://github.com/angelamhkim/open-sdg-data-starter/blob/develop/testing/5.1.1viz).

I think if the functionality to add personalized visualization code is added to the data starter, a lot more people will be able to contribute in the future as well.

brockfanning commented 5 years ago

@angelamhkim I mentioned a few general thoughts here. As for the idea here, it's still a work in progress, but I think it might work. I have been pulled in other directions but would like to get back to this and pursue some of the ideas mentioned above (like the stacked_disaggregation idea).

In general I prefer to implement new visualizations -- at least at first -- using Chartjs, since that is what the other visualizations use, and it would be easier to connect the visualization to the disaggregation widgets on the left. But I also think it would be awesome if we could figure out a way to use R code (or Python too).

angelamhkim commented 5 years ago

@brockfanning thanks for sharing your thoughts. I like the idea of embedding R charts in iframes but I agree that using custom Chartjs charts would be better for integration. If I write the js code for custom charts using Chartjs, do you think you'd have time to show me where to add it in the GitHub files? I think I could learn it but not sure if I'd know where to insert it since there are so many files in the GitHub site repository

dawncomer commented 5 years ago

@angelamhkim here's the stacked bar issue thread

brockfanning commented 4 years ago

@dawncomer @angelamhkim @lindamejia I've finally been able to devote some time to stacked bars, and I have a PR open in the open-sdg repo: https://github.com/open-sdg/open-sdg/pull/497

I was thinking about giving it a test with your data, and posting a screenshot here. Would 5.1.1 be the best indicator to try it with?

dawncomer commented 4 years ago

@brockfanning great to hear from you! @angelamhkim @lindamejia - making sure you saw this. is 5.1.1 the best dataset for Brock to use for this test?

brockfanning commented 4 years ago

@dawncomer @angelamhkim @lindamejia I took a closer look and saw that 5.1.2 made for a good test. I posted a screenshot of the stacked bar functionality here: https://github.com/open-sdg/open-sdg/pull/497#issue-376265835