Introductory Infographic for Gages

[ellenbechtel]

Task

Create an infographic that replaces much of the introductory text, and is more user-friendly than the existing pic and text combo. Lindsay made a sketch, and we can use it as a starting point to hit the main points.

Linsday's sketch:

Original Text:

The U.S. Geological Survey (USGS) Streamgaging Program is funded by both Congress and over 1,400 state and local partner agencies to monitor river water levels and flow, and to support water-quality monitoring across the U.S.

In 2020, USGS monitors water levels and flow at more than 8,400 streamgages, some of which also are equipped with sensors that measure water properties such as temperature, conductivity, and dissolved oxygen content. Streamgages send data in near real-time to the National Water Information System (NWIS). Streamgage data have become critical to forecasting floods, managing streamflow, and operating hydropower plants, as well as recreation, emergency management, engineering designs, and more.

The USGS began using streamgages to quantify the Nation's flowing waters in 1889. Factors that influence which waterways are selected for monitoring have changed in the last 130 years. Gages are built at specific locations for many reasons, and those reasons are reflected in the number and location of gages through time. Their placement tells a story of changing needs for the Nation.

Original image:

[ellenbechtel]

Here's where I'm at by the end of the day on Wed 8/5. Each "panel" is just my artboard to get a vignette composed that looks good and tells the main point that we need it to say. Next on my docket is arranging them in a way that makes sense, make sure the text supports the illustrations, compose it so it looks "complete."

Then after that, I need to upload it to Test and make the SVG text accessible by screenreaders, or make the existing intro text off-screen but still readable.

Some questions I'm thinking about

• What do we think of the gage illustration? Better/worse than a picture?
• Two gages in the beginning, to show diversity? One gage, to keep it simple?
• Ordering of panels? Congress first, as it is in the text?
• Better ways to highlight NWIS?
• Better ways to highlight data collection?

The vignettes

[jordansread]

This is looking great! My opinions below

What do we think of the gage illustration? Better/worse than a picture?

Better!

Two gages in the beginning, to show diversity? One gage, to keep it simple?

I think one

Ordering of panels? Congress first, as it is in the text?

Last (or at least not first) - we've had a request from Chad/Joel to not make the funding the first sentence of the viz (that is a change from the past, where emphasizing the funding was seen as a :+1:). I haven't changed the text yet, but they noted when they loaded beta on a phone, they saw the great initial image but then the funding line was also in the screen and instead, they'd love to see something more interesting, such as your "the story of streamgages through the ages tells the story of changing needs for the nation". I think that is a great line

Better ways to highlight NWIS?

Looks good as-is, I think this is a very good start

---

A thought on this:

Have you thought about some way to compress this chart so it mainly shows 1889 and 2019? I'm not sure how this could be done (perhaps smoosh all of the bars between or connect w/ a hand drawn arrow instead?) but since we're showing these bars in two other spots, I'm wondering if it would make sense to alter this one a bit and make it smaller

[ellenbechtel]

All excellent feedback, thanks. The only thing I'm still puzzling on is your last point - about compressing the chart. A full compression would be just a bar chart with two bars - 1889 and 2020 (or rather, 2019). I have two hesitations about going that far:

1. The scale of the difference (1 vs 8,400) is so large that it would get lost. It would be like a period and a skyscraper. That scale difference makes it hard to compare just those two numbers in the format we've been doing (bar chart). Maybe another kind of chart would work, but position/length is definitely the most "accurate" way to visualize the value of data so other options would let the true number value slide, or might not get the scale difference across. Open to other ideas though!

2. The interesting part of this story is what happens in the 130 years between then and now. So on pure semantics, I'd hesitate to erase all the intervening history! But from an educational point of view, seeing this bar chart a few times in a few context helps make it familiar, so readers have a better chance of understanding the finer nuanced moments in history once we get to the annotated bar chart.

All goes to say...I am willing to be convinced! I just don't think there's anything hugely wrong with having the bar chart here, and in fact it might be good to have it here, so it doesn't strike me as a huge priority to find other ways to make the point that "there are a lot of streamgages now".

Now, for the actual draft

I put this up in MxS crit, so you can view some more discussion going on there. But my main points are:

What is it: Gages has an intro with a lot of text. We want to give the intro more of an ease-in to the rest of the piece, so that readers are first intrigued by the main vis, then eased in to the context and intro information, and then can hit the rest of the story already understanding the intro context. This thing I'm making will be uploaded as an which means that it will be a vector image that takes up as much width as we give it, but the text will be True Type. For accessibility, we will keep the original text for screenreaders, but position it way off screen.

Who would use it: mostly the readers who are first reading this, as a way to get introduced to the topic. But also funders and important people who want to see their nods early on.

Why: We want the gages text and contextual/intro info to be more understandable. And fun?!

What have we learned: I don't know about infographics, but we've learned that people have lots of feelings about what gets said and in what order! So this infographic will also be a reflection of that, and I'd like to get out ahead of as much as possible.

Looking for feedback on: unified story layout. Infographics are REALLY hard. I don't want it to be just big numbers in fancy type. I also don't want it to just be a story-board of little vignettes that don't look unified or flow together nicely. How can I make this layout flow better? How can I make the layout less hodge-podge? Am I hitting all the right intro points?

Also: Any better ideas for the NWIS section?

Also: Is this vertical layout working? I REALLY want there to be enough white space to create a clear path for the eye. But I also don't want to create two different versions of the infographic (for desktop and mobile). Does this vertical flow work for that?

[cnell-usgs]

re: bar chart - This is also going to be shown in the following section, so something to think about. I like the ordering here as it tells a story from the map to the cell phone, but after that it is slightly less fluid. In a similar realm, the grey color used here is slightly different than the initial map/chart which looks nice, but may cause the infographic piece to feel mismatched when the same chart is shown in a bunch of different versions. Same goes for what I am working on with the annotated bar chart, and I am wondering how it is going to be with the initial viz, the infographic, and the annotated bar chart in series with a lot of variants of the same chart.

Aesthetically, I really like the use of the light blue water to break things up, but it also is integrated well with the rest of the graphic/gage illustrations. For the numbers in the water "active gates collect..." the measurements could use a little more contrast with the background color.

Also the capitol building with the little partner agencies is cute and I really like how that is represented.

[cnell-usgs]

Layout-wise I think the NWIS and congress pieces could go side-by-side although conceptually that might not make sense. Altenatively, what if the NWIS cell phone was made to look like it is getting pinged by the streamgage illustration above? I think the current NWIS graphic can be smaller.

[mhines-usgs]

this is awesome, I think this is a really nice explanation of how the gages work and I really love all the illustrations. would it be kosher instead of showing congress, showing a USGS logo? like yeah the money comes through congress, but it seems like the topic is USGS USGS (and partners!) ! 🎆 on Colleen's feedback, the cell phone really wouldn't be directly hitting the gage, the data are technically aggregated into a server and into a database first before the web services put the data up on the web for consumption, i think 🤓

[jordansread]

I’m thinking we can skip the bar chart since the first gage is covered in the annotated chart below and the 8400+ number could be added to that chart as well without a stretch. Feels too redundant to see it three times.

Adding onto Colleen’s idea of having the cell integrated with the gage data flow (I like that) would you consider making the overall set of images smaller to fit in a single 1:1 square view? I think that becomes possible if the bar chart goes away and if you connect the cell and gage parts. It looks great stacked, but it is a lot of real estate when each component ends up that big.

[ellenbechtel]

Thanks for the input guys!

K, taking the bar chart out - you're right that it'll be redundant. And I agree, I think the NWIS vignette can take up less real estate.

@jread-usgs can you clarify what you mean by the 1:1 square view and the connect the cell and gage parts? I'm intrigued and willing to try it out, but also concerned about mobile friendliness (where having the vignettes flow horizontally would mean they are each tiny, or they are each very skinny).

[jordansread]

Sure, no prob. That wasn't very clear.

What I mean by the 1:1 is that the current layout is probably like 1:4~5 (so quite tall) and I'm asking whether you think it would be possible to go for a layout where all of the elements of the infographic could be seen on the same screen at the same time (vs scrolling through them, which I think is the design right now). In reality, a 1:1 probably isn't the best number to throw out there, maybe it is 1.2:1 or some other variant? But I'm wondering if that alternative would be good to consider too at this stage.

For the "connect the cell [phone] and gage parts", I thought Colleen was suggesting something that would combine the NWIS data part with the streamgage visual. Really quick copy/pasta:

If you riff on Colleen's suggestion and drop the bar chart (the congress + cooperators is 😍 IMO), it seems possible to fit all of the content into a single view/screen at once. That's what I was getting at when asking about the 1:1 above.

[lindsayplatt]

OK first this is the best explanation/graphic of what the heck a gage is that I have seen - love this above water and below water look! SO COOL. Second, the Congress + partners graphic is super cute and makes a really boring sentence into a beautiful image and I think does more justice to the "partners" because they become a mosaic of different places/bldgs rather than just lumped into the word "partners". Awesome stuff 😍

I like the idea to relocate the NWIS part next to the gage explanation and take up less vertical space. I think being able to see the next section after this quickly will be important to keep people engaged and moving along. I am thinking that text sizes of the gage part should probably increase if we move them side-by-side because they felt fairly small to begin with. Lastly, the layout of the icons doesn't feel like it fits with the rest of the graphic. I think you left this in the layout I made, but it seems too perfect (shape-wise). Struggling with the right words here but everything else has a bit of loose placement or non-symmetry and then these icons are very symmetrical along an arc. Perhaps we can jostle them around a bit to fit the rest of this graphic's style?

One teeny tiny little thing is that the paddle on the canoe icon kind of looks like a broom - you may want to just extend the paddle part :)

[ellenbechtel]

Thanks for the tweaks guys! Working on the small things such as:

• broom paddle
• making the color palette consistent with the original gages map
• no bar chart
• moving NWIS closer to the top

The one thing I'm struggling with is this aspect ratio question. Don't get me wrong, I'm down to keep trying! But I have some reservations about a horizontal (~1.2 : 1) or very compressed vertical (where everything can be seen in one view) layout. I want to lay out the pros/cons here that I'm trying to balance so that we can all puzzle on the same framework.

Here's an example of a Work-In-Progress that is starting to feel like a dead-end. Notice:

• does the text feel cramped?
• does the text have a sense of hierarchy?
• does the eye have a clear path to follow through the image, such that that path tells the story in the order we want?
• if this were in another language (as lots of science and policy is, for lay people), would the visuals tell you the right story?

Here's the same thing again, with pixel size guides.

• Horizontal is 1100px (a normal desktop width)
• Inner content guides are 700px (which is what the rest of the piece is set to)
• Horizontal lines are spaced ~700px apart (which is the window size on my laptop here, which I think is a good midpoint)

So, with this in mind, I think there are a few approaches we can take.

Mostly Horizontal (1.5ish : 1) Pros

• Desktop users would see each vignette all in one screen.
• Wouldn't take up much vertical real estate

Cons

• Flow would be horizontal or diagonal, or twisty-turny and would have to have visual aides (arrows?) to guide user along the story
• Mobile version would likely feel very compressed
• Would have to design two different infographics, one for desktop and one for mobile
• Not much space for visual hierarchy in the font (headings in the rest of the piece are Bold 24px and text is Regular 17px)
• Not much space for white space or breathing room, since we'd have to fit a lot of vignettes in a tight space

Slightly Vertical (1 : 2 or 3) Pros

• We would have a little more room for vignettes to flow in a clear direction
• Each vignette still is one (or at most, two) contained ideas. The pacing of introducing new ideas as the user reads the graphic would be mostly even, with a few chunks of side-by-side ideas.
• We would have visual "breaks" like the blue river which could highlight important text or signify a new concept

Cons

• There still is a little bit of compression in the Gage and NWIS vignette, where the images take up room that the text feels cramped
• Not sure whether we'd have to make two different desktop v mobile graphics, and if we don't, it might take some clever css to make sure everything translates well.

Entirely Vertical (1 : 4 or 5) Pro

• Each vignette is a single, digestible idea, not trying to do too much
• Very clear story direction. Down! Keep scrolling.
• Would not have to design two different graphics for desktop and mobile

Con

• Takes up a lot of vertical space
• Could make the rest of the text feel like an afterthought

I think a good example of another website that does this is: https://pudding.cool/2019/10/shelters/ In this site, it starts with big images and lots of negative space, good hierarchy, and then gets into the weeds after a short vignette. We'd be kinda doing something similar.

Anyway, food for thought! Let's hop on the phone to discuss how we can thread this needle. ;)

[ellenbechtel]

Here's the list of takeaways from JR and EB chattin' just now:

• We're okay keeping the flow mostly vertical, but we'll rearrange some individual components to keep them as horizontal as possible to keep them from taking up enormous amounts of white space
• Specifically, make the tiny state agencies flow/fade horizontally
• Okay to nix the following text blocks if needed: "Streamgages are..." "Wondering..." "Anyone can access..."
• Okay to shorten "The National Streamgaging Program is funded by..."
• Okay to move the NWIS web text to a different place if need be, but we'll try hard to keep it near the top where the wifi signal is good 😜
• Okay to have two blue "rivers" as visual breaks as long as they don't look weird too close together
• White space is good. But use judiciously

[ellenbechtel]

Here's a quick shot, which hits everything except getting NWIS close to the good wifi.

Also, I'm wondering...centered text for congress, partners, and USGS? How's that look?

[ellenbechtel]

• Adjusted the NWIS section
• Adjusted Congress+partners typography
• Made the tiny bottom gage stand out a little more
• Did not include the "why is it spelled gage?" but there's almost certainly room for it somewhere once we implement.

[jordansread]

beautiful work