Why visualization helps developers

My co-founder Mike Bostock and I met back in 2005, while we were working together at Google on the search quality team. We were building tools and experimentation frameworks for data scientists and developers to assess improvements to search.

Our biggest challenge wasn’t processing the data, defining quality metrics, or even finding insights. It was that people kept arguing over the metric. And the reason they kept arguing was, well because they couldn’t agree on whether the improvement was "good enough" to launch. As developers, we have strong opinions and we care about the outcome. We could have continued, stuck in arguments, running experiments ineffectively, but instead, we turned towards the problem. Visualizing the data became the path out.

Since my time on that team, I’ve seen thousands of developers working on problems from UI tweaks to managing complexity at epic scale (billions of lines of code, millions of build / tests) and massive deployments scaling to millions of users. I have seen developers work with each other on opensource projects across the world whether they were gearing up for a release or debugging issues together. I’ve experienced tooling and automation make it easier and more fun.

And I have a big claim to make: everyone who uses visualization, in a collaborative, and transparent way, will be better developers.

Visualization helps us be smarter developers by exposing underlying data and code to allow us to question, explore, and derive new insights. Visualization taps into our human visual system with its incredible ability for pattern matching and recognition. We’ll build better products, ship faster, and have more fun doing so.

Let's be honest - our brains and our time are our most important resources. Let's make best use of both as much as we can.

Visualization helps us understand code structure, flows and invocations with the intent to make the code better - to refactor, to clean, to create positive change. You can do so by modeling directory structures to understand relative file sizes like below using Zoomable Sunburst for Flare, a data viz library. You can navigate and explore up and down the hierarchy by clicking into the different levels.

Visualization helps us explore code hierarchies with dataviz like the radial tidy tree below.

Or say you want to understand the relationships among classes in a software hierarchy with something like hierarchical edge bundling. Each directed edge, going from source to target, corresponds to an import. You can immediately see hotspots in the code with many dependencies. Great opportunity for refactoring.

You can graph your code dependencies to understand the flow of your code. Visualizing code before you decide to take a dependency can help as you make decisions.

One of the difficult but most fundamental topics to understand in software development is algorithms. Algorithms are important to internalize as you learn to code, and write real world software where efficiency and performance matter. Say you are deciding between two algorithms, maybe for resampling an image. You can visualize the algorithm to determine what might be a better fit.

We can visualize algorithms like Mitchell's best candidate

Maybe something like Bridson's algorithm is a better approach.

As a developer, we can visualize different algorithms and then bring this understanding to the code we are writing. You can actually "see" the differences in the effects and results of the algorithms. You can find more examples in the algorithm collection.

When developers can see the information, we can learn through interaction. One of my favorite quotes says it all.

Our team uses Observable to model our system architecture, understand system performance, understand feature usage patterns in order to optimize our code. These are just some of the ways that Observable can help you be a better developer that we’ve learned by doing ourselves.

Over the next several weeks, we’re going to share how we’re doing this. I think you’ll see that it allows you to iterate faster, improves your communication and collaboration with others, and helps you make better decisions. We'll provide blog posts, example notebooks, and event some meetups to learn techniques. If you’re interested in following this series, you can subscribe here. Please join us for the first meetup on March 9, 2021.

And, if you have used Observable in a way that you think would help other developers, we’d love to hear from you. You can reach us at community@observablehq.com or DM us on Twitter.

Join us as we work to help all developers make sense of our code using visualization, together.