Closed jennmalcolm closed 6 years ago
Here's a good, interactive example of a Sankey diagram built with D3.
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?
@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.
@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.
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.
Yes, @brentryanjohnson, I would like to test it.
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):
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?
@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.
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.
Here's a version in our color palette. I'll see what I can do for revenue.
This is what it looks like when I try to tie together revenue and disbursements data.
One thing to note, is it won't allow inputting negative numbers.
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.
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.
This one has better treatment for offshore disbursements.
Sounds good. We can delay our meeting scheduled for this afternoon, then, and revisit later, @mcharg.
This one is just revenue data.
Revenue by phase.
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.
Ideas being tested in #2945
We're testing these with users: https://vavl06.axshare.com/#g=1&p=key_facts_d
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: