Prototyping Better Charts with Gemini 3 and Nano Banana Pro

I check my sleep tracker app every morning. As someone with a passion for data visualization, there's one chart in this app that never fails to confuse me. Here is a screenshot:

It resembles 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. Google describes this release as “our most intelligent model that helps you bring any idea to life.” Big words! But I'm honestly excited about Gemini 3. I've been using it for coding with the Gemini CLI for the past month, and it's been super helpful.s

I was curious if Gemini 3 could articulate exactly why this chart is difficult 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).

However, it also provided specific insights that went deeper than my initial annoyance. It identified 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.

It also highlighted the counter-intuitive visual mapping. In data visualization, larger areas usually equate to 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. Of this model, Google says it's great at generating and editing photos, but also "an ideal solution for developing marketing collateral, educational content and numerous other applications."

To put this to the test, I asked it to "Render a new version."

The model generated this:

The Floating Gantt structure fixed the mutually exclusive data problem, and the shift to orange for Awake made those periods distinct.

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, reasoned with the model about 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.

* * *