Deepnote
IntegrationsPricing
Join usDocs
All posts

By Gabor on November 16, 2022

Data visualization for everyone: Meet the new chart block

How we redesigned our no-code charting experience.

If a picture is worth 1,000 words, a thoughtful data visualization must be worth at least 10,000. This is especially the case when it comes to exploratory data analysis. A well-crafted chart can make all the difference in uncovering insights. It is also the best tool for communicating these findings with others.

Last year, we launched the first version of our native chart blocks. They were designed to lower the barrier-to-entry to data visualization. We added a simple, no-code visualization interface to Deepnote which empowered users of any skill level to visualize Pandas DataFrames—just by pointing and clicking.

The initial version laid the foundations for data visualization in a notebook and is one of our most-used block types. However, after being in the hands of our users for over a year and seeing how it was used (limitations included), we decided it was time to bring our chart builder to the next level.

We started out with a simple goal: unlock a more intuitive and flexible chart creation experience. One which better supports the work of both data analysts (primarily using SQL and no/low-code tools) and seasoned data scientists (those well versed in fine-tuning graphs in Python). And we’re happy to share that our new chart block has arrived!

In this post, we’ll share our approach to developing a new chart builder, how it works, and how to apply it in practice.

charts-v1-to-charts-v2.png

Opportunities for a better visualization experience

Visualization is a complex topic with different paradigms adopted by data practitioners and the tools they use. It’s easy to get lost in the forest of opinions and preferences. So to start, we wanted to pinpoint the essential needs of our user base.

Luckily, we have thousands of data teams using Deepnote to provide us with fast, actionable feedback. After collecting insights from our users, talking to leading visualization experts, and pressure-testing our assumptions with quantitative data, we distilled our opportunities to the following list:

1. Raising the ceiling of what’s possible
Supporting additional chart types (e.g., combined charts, grouped bar charts, etc.) is a must-have for many common visualization use cases. Providing more customization options like axis titles and formatting is just one example of how we wanted to make charts presentable to stakeholders.

2. Lowering the barrier to entry
“No-code” does not automatically translate to “easy to use”. Many of our users have experience with various BI and visualization tools; therefore, they expect a degree of familiarity—including patterns and interactions similar to what they are accustomed to and clear guidance for completing more complex tasks.

3. Giving charts the space to shine
Working with graphs requires more control over the screen real estate in a notebook. Resizing the canvas, full-width mode, and hiding configuration details all contribute to better presentation value and shareability.

4. Bridging the no-code vs. code gap
For more technical users, the purpose of using a charting UI is often more about efficiency than completeness. They expect to quickly get to 80% of their visualization goals and then apply further customization with code.

5. Making charts interactive
Plotting is rarely the end of the visualization journey. Data exploration is done in iterative cycles. Adding interactive tooling (e.g., filtering on charts) makes the exploration process much more efficient.

Charting design principles

Incremental additions to our original chart blocks wouldn’t get us to the level of quality and user experience we desired. So instead, we have redesigned the chart configuration experience from the ground up. Here are the principles we were guided by and how we applied them to designing our new charts user experience:

Just enough customizability

⁠After talking with many Deepnote users, we’ve built an essential set of configuration options that enable them to create beautiful charts for 99% of use cases. If you really need super-advanced customization, you can always export the visualization to code and modify it’s config directly.

duplicate-as-code-customization.png

Customize with code using a Duplicate as code option for tweaking the finer details in Python.

Less is more

⁠Many visualization tools offer templates for dozens of chart types. However, we found that teams don’t rely on the more exotic varieties and usually just stick with the basics. So we’ve built a starting point for four widely-used chart types and the ability to add powerful layers and visualizations from there.

simple-chart-types-stacked-bar-chart.png

⁠Pick from four core chart types (bar, line, area, point) as a starting point. Then customize further to achieve different variations (e.g., normalized stacked bar chart).

Grammar of graphics with sensible shortcuts

We built visualizations on top of Vega-Lite, an interactive implementation of the widely popular grammar of graphics principles. Our new chart configuration follows the core structure of this framework, but not precisely to the letter. When it makes sense, we abstract away complexity to provide a more user-friendly experience.

grammar-of-graphics.png

Creating a combined bar chart with multiple measures requires pretty complex configuration of options in Vega-Lite. In the new chart block, we default to this view automatically when you add multiple bar chart layers with different measures.

Eliminating clutter

All too often, visualization tools overwhelm users with a barrage of settings to tweak—most of which is tried once and never touched again. Good configuration is reserved in our chart blocks. This means you can easily access carefully considered options and depend on progressive disclosure to reveal more complex elements.

data-tab-and-format-tab.png

Exploratory charts can be configured using the Data tab. For additional formatting of the given chart layer, you can use the Format tab. Final adjustments for the entire chart are accessible on the Display tab.

Attention to detail

Creating charts is a high-frequency activity where any added friction can quickly accumulate. We’ve removed as many of these paper cuts as possible. For instance, aggregation and sorting are two essential operations that we've simplified with the new chart builder.

aggregation-options.png

Aggregation is now transparent and easy to change. We also apply some automation depending on the chart type (e.g., on bar charts we will auto-aggregate your numerical columns).

Introducing our new chart block

After incorporating these principles into the product, we are excited to share our new chart block. For a quick tour of the new capabilities, check out the video below.

Feature highlights:

On the Data tab, you can select from four basic mark types as your starting point (bar, line, area, and point charts) and build toward your desired graph with progressive configuration options. Common chart types such as stacked & normalized bar charts, histograms, line charts, and scatterplots are only a couple of clicks away.

You can now create compound charts by adding multiple layers to your graphs. This is particularly useful for plotting multiple measures.

Essential formatting options are now available under the Format tab. Here you can rename the axes and tweak other aspects, such as the scale and range for the selected measure.

On the Display tab, you can find general settings that control the appearance of the whole chart. You can give your chart a title and adjust the position of the legend (among other options).

Designing charts is much simpler now, with many workflow improvements. Routine operations such as sorting and aggregation are always at your fingertips.

You can hide the config panel to let your charts take the spotlightand even resize your charts vertically to accommodate larger charts.

Additional resources: Naturally, we built a notebook to showcase how to use the all-new chart blocks in Deepnote. Also more details about each individual options can be found in our updated chart docs →

What’s next?

In the coming weeks, we'll add an option to export the chart configuration into a Python block so you can refine the charts further via code. Additional formatting options (e.g., color palette selection and number/date formatting) and handy convenience functions are also coming to the chart block—including an easier way to add secondary measures to your charts. Interactive filtering is in the works, too, so you'll soon be able to zoom in on specific data points of interest without writing code for it.

In the longer term, we are also exploring ways to add intelligent assistance to the chart creation workflow (more on that soon!).

In the meantime, we would love to hear your feedback 🙏. Please send us your suggestions on how we can improve the chart creation experience for you.

Share this post

Twitter icon

Gabor Szalai

Product guy with an urge to scratch that data itch.

Join the world's best data teams and get started with Deepnote

No credit card required. Run your first notebook in seconds.

Deepnote
Product
© 2022 Deepnote. All rights reserved.