Introducing Canopy Charts: A Visual Editor for Dynamic Charts
Site: https://canopycharts.com
In the course of building analytics dashboards at work and hacking together data visualizations for side projects at home, I’ve spent many hours wrangling the state-of-the-art in JavaScript charting libraries. I’ve played around with everything from raw d3 to high-level component libraries like Nivo and Victory charts. Some experiences were great, and some were not so great, but one thing I felt with every charting library I’ve used is that this is not the best way to build custom charts.
The developer experience of writing code for a chart backed by some data API is inevitably a combination of scrolling through library documentation looking for the function call for a pie chart, tweaking the configuration parameters you pass into that function, then reloading the page, until the chart looks mostly how you want it to look. This takes time and is incredibly tedious.
As I thought about what a better way to build charts might look like, I remembered Bret Victor and his talk Inventing on Principle, which I had watched recently and had resonated with me. His principle, the one he uses to guide what he works on, is “Creators need an immediate connection to what they are creating.”
“An immediate connection.” That’s certainly one thing I didn’t feel I had when building charts using JavaScript charting libraries.
So I tried to imagine what it would feel like to have an immediate connection to the charts I was creating. What I came up with was that it would need to be a visual tool. You would take an action on the screen, and immediately see what effect that action had on the chart. In other words: a visual editor.
Then the seed of the idea was planted: I would use a low-level charting library to create a browser-based editor that would unlock the ability to quickly build beautiful charts. But the scope of the problem was not just the creation of charts, it was the creation of charts that are backed by live data. The kind of charts software companies use to build dashboards; charts that report on business critical metrics on an up-to-the-minute basis.
And so Canopy Charts is not just a chart editor. There has to be a way to plug these charts into your codebase and power them with live data. Hence the canopy-charts open source library on npm. This React library allows you to render any chart built with the Canopy Charts editor in your application, powered by data from your API. The charts are responsive and reliable.
This is the initial release of a product that I think solves a clear problem: enable developers to build beautiful data-backed charts ten times faster than was previously possible.
I can’t wait to hear feedback from the community on my idea and my execution so far. Custom and dynamic data visualization is a space that I know has so much innovation ahead of it. I’m very much looking forward to being a part of that with Canopy Charts.
Cheers! And much love ❤️,
Matt
