Here's how the end result will look like:
Now we're all set. Please check your ticket and proceed to Floor 1, Charting Gallery 🎫
What is Google Charts?
Google Charts is a charting service by Google that provides a rich selection of data visualization types, renders charts using HTML5 and SVG, provides cross-browser compatibility and cross-platform portability (meaning that charts look nice both on desktop and mobile).
Such an approach has its pros:
- Rendering code is browser- and platform-independent which provides increased compatibility and portability. If it renders once, it will render anytime.
But it also has its cons:
- For some charts, data has to be uploaded to Google servers for the chart to be rendered. If you deal with sensitive data, please check the Google APIs Terms of Service. Also, make sure to always check the Data Policy sections in the docs. In this tutorial, we'll be using a public dataset, so it's not a big deal.
Which charts are available? Among the usual suspects like line charts, bar charts, or pie charts you can find a few distinctive ones:
- Calendar charts that you must have seen numerous times at GitHub profiles.
- Gantt charts that you might have wished to never encounter because of their affinity to "enterprise software".
- Diff charts that combine a couple of scatter charts, pie charts, or bar charts into an image that visualizes the difference between two similar datasets.
- Vega charts that provide a way to render charts defined with Vega and Vega-Lite visual grammars in Google Charts.
All of these are available in React-Google-Charts, 4.09 KB sized React-wrapper.
Enjoying the sight so far? Please proceed to Floor 2, Modern Arts 🎫
What is MoMA?
The Museum of Modern Art is an art museum in New York, USA. It was established 91 years ago, on November 7, 1929, and it's often identified as one of the largest and most influential museums of modern art in the world. MoMA's collection includes almost 200,000 works of architecture and design, drawing, painting, sculpture, photography, prints, illustrated books, film, and electronic media.
On GitHub, MoMA publishes and periodically updates a public dataset which contains ~140,000 records, representing all of the works that have been accessioned into MoMA’s collection and cataloged in our database. It includes basic metadata for each work (e.g., title, artist, date made, medium, dimensions, and date of acquisition). This dataset is placed in the public domain using a CC0 License (so we're free to use it in this tutorial) and available in CSV and JSON formats.
I've imported this dataset to a publicly available Postgres instance that we'll use in a few minutes to explore the data. Proceed to Floor 3, Cubism 🎫
What is Cube?
We're building a dashboard, so it would be very convenient to access the data from the front end via an API. Cube comes particularly handy for this purpose.
Cube is a popular open-source product with more than 11,000 stars on GitHub to date. It serves as an API for building data apps. You can configure Cube to connect to any database, describe your data with a declarative data schema, and instantly get an API that you can use in your app.
Second, let's create a new folder for your Cube app and navigate to it:
Third, run this snippet to create a new
docker-compose.yml file with the configuration. We'll also use environment variables from the
.env file to instruct Cube how to connect to Postgres:
Then, run this snippet to create the
.env file with Postgres credentials. In this tutorial, we're using a publicly available Postgres database that I've already set up. Check the docs to learn more about connecting Cube to Postgres or any other database.
That is all we need to let Cube connect to Postgres. The last part of configuration is the data schema which declaratively describes the contents of the database. Let's put it under the
Please copy and paste this data schema into
Artworks.js, then follow the comments in the file:
Whew! Now we're finally ready to run Cube:
Now, let's review the data in the MoMA dataset. Cube provides the Developer Playground, a convenient web-based tool that helps explore the data, at localhost:4000. Navigate to the Developer Playground in your browser and explore the UI. You can retrieve arbitrary data, slice and dice the dataset by selecting dimensions and measures.
For example, you can check how many artworks MoMA has for the artists that have "Sarah" in their name. To do so, select the
Artworks.count measure, the
Artworks.artist dimension, and also make sure to add a filter for the
Artworks.artist dimension that allows only the names containing "Sarah".
Feel free to tinker with other measures and dimensions. Once you're done, let's get to building the dashboard. Proceed to Floor 4, Abstract Art 🎫
Building a dashboard with React Google Charts
Now it's time to develop a front-end application telling the story behind the MoMA artworks collection with charts and other types of data visualizations. Let's build it with TypeScript and, obviously, React.
Basic dashboard. Here is the sandbox which you can open and explore. Take a look at the
ArtworkYearsChart components. At the very end of their source code you'll find the
<Chart .../> component from React Google Charts.
It's a table and a fancy diagonal chart — because it's unlikely that MoMA can acquire an artwork before it was created, right?
However, I wouldn't call it a full-fledged dashboard until it allows interaction with elements and change how the data is represented. Let's explore how to work with events and cross-link the charts.
Interactive dashboard. Here we have more charts and some bits of code that allow working with events. Again, take a look at the
components folder and its contents. You might want to check the
const events = useMemo<ReactGoogleChartEvent>(...); fragment in the
ArtworkArtistsTable component — that's how you set up an event listener with React Google Charts.
That's all you need to add interactivity to the dashboard. See how the charts change upon the selection of one or many artists in the first table:
It's a kind of art, isn't it? 🧑🎨
Actually, these charts and this whole tutorial are inspired by the work of others that I'd like to mention here: "A Nerd’s Guide To The 2,229 Paintings At MoMA" by FiveThirtyEight, "MoMA on GitHub" by YYYY-MM-DD, and this tweet by Steven Lubar.
Cleaning Off the Paint
Thank you for reading and following this tutorial! I encourage you to spend some time in the docs and explore what else React Google Charts and Google Charts are capable of. You'll find even more chart types, configuration options, and advanced features.
Also, thanks for learning about Cube and building dashboards. I hope you enjoyed it.
Please don't hesitate to like and bookmark this post, write a comment, and give a star to Cube on GitHub. I hope that you'll try Cube and Google Charts in your next production gig or your next pet project.
Good luck and have fun! Now, proceed to the exit! 🎫