DOI-ONRR / doi-extractives-data

Information on the extractive industries in the U.S. from federal data.
https://revenuedata.doi.gov/
Other
77 stars 41 forks source link

Exploring visualization using Sankey diagrams #2848

Closed jennmalcolm closed 6 years ago

jennmalcolm commented 6 years ago

I got a call from Mike DeBerard, ONRR's program manager for Analytics and Risk Management, to suggest that we look into using a Sankey diagram on NRRD. I think it's worth looking into this and exploring whether other users like this type of visual, and it could work well with disbursements. Let's see if we can test a visual like this for the major breakdowns of disbursements.

Here's an example of a Sankey diagram: image

brentryanjohnson commented 6 years ago

Here's a good, interactive example of a Sankey diagram built with D3.

jennmalcolm commented 6 years ago

Here's another example Ryan found: https://datalab.usaspending.gov/budget-function.html#one. @mcharg, what do you think about testing one of these Sankey diagrams for the main disbursements section on explore data on your next round of user interviews? Is this something you could prototype in Axure?

mcharg commented 6 years ago

@jennmalcolm I'll have to look into whether there's a tool we can use to prototype sankey diagrams. The ones I've done so far, I create in Excel and then copy into Axure.

brentryanjohnson commented 6 years ago

@jennmalcolm and @mcharg I briefly looked into prototyping with our actual data in Raw, which has an option for alluvial charts (a type of Sankey). It requires restructuring the data to identify the "nodes" (which create the "levels"), loading in the data, and choosing the type of chart.

I didn't have time to restructure the data before leaving for the conference, but I'd be happy to look into this option with either one (or both) of you next week sometime.

brentryanjohnson commented 6 years ago

I'm working on a relatively simple D3 prototype for this, primarily to explore how the data needs to be structured to drive this type of chart. I've used GOMESA disbursements to Texas counties to develop a draft chart. Obviously it needs some visual design work, and the code is hideous, but it's a start.

I can push the branch and trigger a preview URL if we think this is worth testing with users.

sankey chart

jennmalcolm commented 6 years ago

Yes, @brentryanjohnson, I would like to test it.

mcharg commented 6 years ago

We might want to test something that has a variety of sources before it, so it's data that can't just be displayed as a pie chart.

Something like this (generated using a free online generator): sankeymatic_1200x1200

jennmalcolm commented 6 years ago

Ok, @mcharg, I think you are right that we should have more than one thing on the left side. Do you think it would be worthwhile/possible to build something like this into one of the homepage prototypes to test?

mcharg commented 6 years ago

@jennmalcolm I can definitely show the disbursements one, but I'll see if we have the right kind of data to put one together that would be at the right level for the homepage.

mcharg commented 6 years ago

It would be nice if we could tie revenue and disbursements data, but I'm not sure we can do that with what we currently have.

mcharg commented 6 years ago

Here's a version in our color palette. I'll see what I can do for revenue. sankeymatic_1200x1200 1

mcharg commented 6 years ago

This is what it looks like when I try to tie together revenue and disbursements data. sankeymatic_2000x1600

mcharg commented 6 years ago

One thing to note, is it won't allow inputting negative numbers.

brentryanjohnson commented 6 years ago

These get unreadable when too many variables are included. And this is just a simple test with a limited amount of data built out with our codebase, so we can easily expand it. We can certainly include more "sources" when I get a basic version working.

mcharg commented 6 years ago

I agree that they get unreadable with too many variables, but it's wouldn't be a true test with users if it's not data that makes sense to use one of these diagrams for. I think we should test with the diagrams using the online generator and then figure out how to build them if users want them.

mcharg commented 6 years ago

This one has better treatment for offshore disbursements. sankeymatic_2000x1600 1

brentryanjohnson commented 6 years ago

Sounds good. We can delay our meeting scheduled for this afternoon, then, and revisit later, @mcharg.

mcharg commented 6 years ago

This one is just revenue data. sankeymatic_2000x1600 2

mcharg commented 6 years ago

Revenue by phase. sankeymatic_2000x1600 3

brentryanjohnson commented 6 years ago

I'm going to halt work on this in D3. I initially worked on a prototype in the code, because it didn't seem like we had a viable option to prototype these elsewhere. Thankfully, @mcharg found an option to do so.

At least we know these are viable to build out in D3; it will be interesting to see what users think of them. There are some sizing issues and compressed text in the coded prototype I built, but I'm going to leave it for now until we have a research round with Shannon's prototypes.

The Sankey draft I built is in this branch preview, if you want to check it out.

sankey chart d3

jennmalcolm commented 6 years ago

Ideas being tested in #2945

mcharg commented 6 years ago

We're testing these with users: https://vavl06.axshare.com/#g=1&p=key_facts_d