Cool data visualization with React

ZD
ZD
Feb 12 · 3 min read

GoodData.UI is a new open-source data visualization library. It is based on JSX components. For example, this <ColumnChart/> tag displays a column (aka bar) chart:

<ColumnChart 
measures={[Ldm.Revenue]}
viewBy={[Ldm.DateMonthYear.Long]} />
Image for post
Image for post
Bar chart data visualization displayed by the one-line code above

Try it yourself in this sandbox

You can play with the tags in this sandbox. The supported tags are documented here. By the way, the framework is open-sourced.

Image for post
Image for post
Github sandbox with preloaded GoodData.UI

You can also check out the GoodData gallery for many different examples.

Image for post
Image for post
GoodData data visualization gallery

Generate whole application boilerplate

The GoodData.UI includes a useful create-gooddata-react-app command-line tool that generates a complete React application with placeholders for your data visualizations.

Can my users create their own data visualizations?

Sure they can. After you add a couple of data visualizations to your app, your users start requesting their customizations. They’ll want to modify the calculations behind your charts or to slice your numbers by different dimensions, use a pie chart instead of a bat chart, change colors, and many others. The best way how to satisfy these requests is to give them a self-service analytics tool that they can use to create their data visualizations themselves. With GoodData, you can embed their visual drag-and-drop Analytical Designer tool in your application.

Image for post
Image for post
Analytical Designer tool embedded in a Javascript application

Your users can also create interactive dashboards from the individual data visualizations that they create in the Analytical Designer.

Image for post
Image for post
Custom interactive dashboard embedded in Javascript application

GoodData provides a visual Dashboard editor that you can also embed into your app:

Image for post
Image for post
Dashboard editor embedded into Javascript application

Where does the data come from?

GoodData stores your data in a workspace that can be periodically refreshed from your original data source (e.g. CSV files or database).

Data are structured in the Logical Data Model that makes it easy for you and your users to create new data visualizations. The data model can be quickly created from your data.

https://www.gooddata.com/resources/creating-data-model-csv-files?wvideo=jsyuxqacxp
https://www.gooddata.com/resources/creating-data-model-csv-files?wvideo=jsyuxqacxp
Creating logical data model from CSV files

How about advanced calculations?

This is what metrics do. Metrics are scripted in a very simple language called MAQL. With MAQL you and your users can create any data calculation with few lines of code. Moreover, your users can create their metrics from your metrics. You can learn more about the MAQL language here.

How I deliver this to all my users?

GoodData packages analytics in workspaces. There is one workspace for every tenant (your customer — an organization with multiple users). The workspace contains everything that your users need — the data, data model, calculations, data visualizations, dashboards, permissions, etc. You can think of a workspace as a sandbox where your users can customize these objects without affecting others. If you want to learn more, watch the first video of this 15 minutes course.

How much will I pay?

Nothing, at least initially. GoodData is free for up to 5 tenants (they don’t count users).

GoodData Developers

News, resources, and advice for developers and data…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store