Prototyping Better Charts with Gemini 3 and Nano Banana Pro

I check my sleep tracker app every morning. I love data visualization, and one chart in this app always confuses me. Here is a screenshot:

It looks like a colorful city skyline, but the stacking and color choices make it hard to interpret at a glance.

Gemini 3 launched last week (November 18), and I wanted to test it on a real-world problem. I've been using it for coding with the Gemini CLI for the past month, and it's been very helpful.

I wondered if Gemini 3 could explain why this chart is hard to read, and if it could come up with a better alternative.

I uploaded the screenshot to Google AI Studio and asked: "How to improve this chart? Reason about it."

The Analysis

Gemini confirmed several things I had already noticed, specifically the confusing color palette where Awake (an alert state) was too similar in hue to REM (a sleep state).

It also found another issue in the design:

Stacked Bars for Mutually Exclusive Data

The most significant problem is the use of vertical bars that grow from the bottom axis... Sleep stages are mutually exclusive. You cannot be in "Light Sleep" and "REM" at the same time. However, by anchoring all bars at the bottom, a pink "REM" bar visually occupies the physical space of the "Deep" and "Light" rows beneath it.

In data visualization, larger areas usually mean higher values or importance. Here, Deep Sleep—the most restorative stage—is represented by the smallest bars, while Awake gets the tallest bars, effectively celebrating the wrong metric.

Rendering an Improved Version

Gemini suggested a Floating Gantt chart as a solution. This disconnects the bars from the bottom axis, showing exactly when each sleep stage occurred without any misleading overlap.

To visualize this, I switched the model to Nano Banana Pro (Google's nickname for the new Gemini 3 Pro Image model). I stayed in the same conversation so that the model would have context of both the original screenshot and the critique from Gemini 3. Google says Nano Banana Pro is great at generating and editing photos, but also "an ideal solution for developing marketing collateral, educational content and numerous other applications."

I asked it to "Render a new version."

The model generated this:

The Floating Gantt structure fixed the mutually exclusive data problem, and I like the shift to orange for Awake

Refining the Details

Now let's see how well it can edit the generated image. This took me a few tries to get right, but I'm impressed with the accuracy of the results.

I wanted specific time markers on the X-axis, so I prompted: "What about some times on the x axis. Print full hours (3 AM). Labels are not allowed to overlap. You don't need to mark every hour, can be every 2 if you need space. Carefully place the labels for accuracy - every dot is an hour. First dot to get a label after 11:15 is 1 AM, then 3 AM, 5AM."

Gemini refined the image and added the time labels. I then asked for one final polish to center the Y-axis labels within their respective lanes: "The labels on the y axis need to be centered in their respective lanes, instead of aligned with the grid line. They all need to shift vertically down."

Here is the final result:

Wrap Up

I didn't have to write a single line of plotting code or fiddle with design tools. I uploaded a screenshot, discussed data visualization principles, and iterated until I had a result that was clear and accurate.

If you want to experiment with improving your own apps or charts, you can try the new Gemini 3 models in Google AI Studio.