Bartosz Mikulski

Firebolt

Lightning-fast analytics experiences for modern data engineering and dev teams.

Building terabyte-scale data apps with Firebolt and Cube

I’ve worked for many years as a business intelligence (BI) consultant, building dashboards and reports for big companies. It’s not easy to build a dashboard with classic BI tools, and it’s even trickier if you want to embed elements in a classic [React](https://reactjs.org) web app. You’ll face various issues, including security, integration, and interactivity—not to mention the price tag.

This tutorial will walk you through building a custom dashboard that displays data from a [PostgreSQL](https://www.postgresql.org) database using [nivo](https://nivo.rocks/) and [Cube Cloud](https://cube.dev/). Here is the expected result:

![Final Dashboard](https://i.imgur.com/7nLVozg.png)

## What is Nivo?

Nivo is a React library that allows you to easily build charts and other dataviz elements. It’s built on top of the famous [D3](https://d3js.org/) library, but has even more visualizations and is optimized for easier, more intuitive use. Not only will you find the classic [bar](https://nivo.rocks/bar/) and [pie](https://nivo.rocks/pie/) charts, but you’ll also find new components, like [Funnel](https://nivo.rocks/funnel/), [CirclePacking](https://nivo.rocks/circle-packing/) and [Choropleth](https://nivo.rocks/choropleth/) to name a few.

One of the things that makes nivo stand out is that it comes with server-side rendering capabilities, though they’re not used in this tutorial. It’s also a fully declarative library that allows users to specify how a chart should render, right down to the last pixel. Here’s a simple example for a pie chart: 

```jsx
const MyResponsivePie = () => {

    const data = [
    {
        "id": "php",
        "value": 425,
    },
    {
        "id": "erlang",
        "value": 276,
    },
    {
        "id": "stylus",
        "value": 62,
    },
    ...
    ];

    return (<ResponsivePie
        data={data}
        margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
        innerRadius={0.5}
        padAngle={0.7}
        cornerRadius={3}
        activeOuterRadiusOffset={8}
        borderWidth={1}
    />)
}
```

It will generate an SVG element that looks like this:

![nivo pie chart](https://imgur.com/0tiWaE2.png)

Compared to [Chart.js](https://www.chartjs.org/) or [Recharts](https://recharts.org/en-US/), nivo has a broader selection of components, and offers full control over how your data is displayed. The downside to nivo is that, as of this writing, there’s no native integration with Cube Cloud’s [Developer Playground](https://cube.dev/docs/dev-tools/dev-playground), so building a dashboard with it requires a little more manual coding than some of the other options. 

## What is Cube?

[Cube](https://cube.dev/) is a Headless BI solution that lets you expose your database through a rich API that can be consumed by your React stack and, ultimately, the nivo charts you’ll build. Cube functions as a bridge, of sorts, between data stored in MySQL, PostgreSQL, and your front-end application.

![Cube quick architecture schema](https://i.imgur.com/HxVyW1e.png)

It’s a headless business intelligence engine, allowing you to manage the complexity of your data behind the scenes, and expose the information you want to show the consumer via multiple APIs. Then you just have to hook up the data to show it in the desired components. Cube also provides a [Developer Playground](https://cube.dev/docs/dev-tools/dev-playground) that lets you build charts visually, further speeding up dashboard creation.

[Cube](https://cube.dev/) is available in two versions:

* an open-source version named **Cube** that you host and manage by yourself. It’s a good choice if you need to deploy Cube in a private cloud near your data source, or if you want to have full control over your architecture.
* a full-featured service named **Cube Cloud**, which offers [high availability and scalability](https://cube.dev/docs/cloud), and requires little management or maintenance.

## Build a Nivo Dashboard With Cube Cloud

Time to get your hands dirty. To follow along the tutorial, you’ll need a few things ahead of time:

* [`npm`](https://www.npmjs.com) and [`node`](https://nodejs.org/en/download/) on your laptop to build the React application that will host your dashboard
* `psql` command-line tool to load a script on the [ElephantSQL](https://www.elephantsql.com/) service. If you don’t already have it, you can follow this [tutorial](https://www.timescale.com/blog/how-to-install-psql-on-mac-ubuntu-debian-windows/) to install it.

That’s it—everything else will be covered in the tutorial. If you want to follow along in your own editor, the full tutorial is available as a [GitHub repo](https://github.com/julbrs/cube-nivo-tutorial).

### Initialize Your Database

If you already have a PostgreSQL database available online, you can use your own data as you follow along. If not, head over to [ElephantSQL](https://www.elephantsql.com/) and create a free account. ElephantSQL is a “PostgreSQL as a Service” solution with a free plan that will be very convenient for this tutorial.

After creating an account, create a new instance on the Tiny Turtle plan: 

![Create Instance ElephantSQL](https://i.imgur.com/BSClOHx.png)

Then you can select the region, ideally somewhere close to you. After selecting that, you’ll be able to see information related to your instance: 

![ElephantSQL Instance Details](https://i.imgur.com/0zmTqCi.png)

Make a note of your server name, user name, database, and password—you’ll need those later.

Now let’s add some data to your instance. You will download a sample e-commerce database script [here](http://cube.dev/downloads/ecom-dump.sql), and load it into your ElephantSQL instance. To form the command for this, use the following syntax:

```shell
psql -h <server> -U <user> < ecom-dump.sql
```

The `server` should be set to match the server from your instance detail page, which is likely something like `drona.db.elephantsql.com` (`user` can also be found on your instance details page, and should be changed to match your values; the password will be requested when you launch the command).

If it loads correctly, your terminal will show you a bunch of rows, indicating that the data is now loaded on the instance and available to run queries.

![Script Upload Success](https://i.imgur.com/ZRhvyBM.png)

You can check the data directly in the ElephantSQL interface, using the <Btn>Browser</Btn> tab. You should be able to see the tables list using the <Btn>Table queries</Btn> button, and be able to run some SQL queries like `SELECT * FROM "public"."users" LIMIT 100`, as shown below.

![ElephantSQL Browser Screen](https://i.imgur.com/faBQOb3.png)

That completes the first step. Now it’s time to move to Cube Cloud.

### Connect Cube Cloud

As mentioned previously, Cube offers two options: Open-source Cube and Cube Cloud. In this tutorial, you’ll be using **Cube Cloud**, as it comes with a [generous free tier](https://cube.dev/pricing/) to develop and test your application, and requires less setup. 

Start by creating a [Cube account](https://cubecloud.dev/auth).

![Cube Cloud Account](https://i.imgur.com/xACbOu0.png)

Next, create a new deployment. When selecting a region, try to choose the same region you chose for your ElephantSQL instance in order to optimize data transfers.

![Cube New Deployment](https://i.imgur.com/0bcTPjx.png)

Once you’ve gotten familiar with Cube, it’s possible to link your Cube Cloud instance to a GitHub repository, creating powerful CI integration. For now, though, select **Create** to start from an empty project. 

![Cube New Deployment Create](https://i.imgur.com/96aKgSR.png)

It’s time to connect to your backend database. First, select **PostgreSQL** as the database: 

![Select Database Engine](https://i.imgur.com/UTrYNhg.png)

Finally, enter the database credentials from the ElephantSQL instance details screen:

* Server Name
* Database
* Username
* Password

![Enter Database Credentials](https://i.imgur.com/SkyyaG3.png)

Cube will ask you to generate the data schema. This is a Cube concept that will let you associate tables and fields to API objects. In this tutorial, we will generate them using the built-in generator, but it’s also possible to customize them. Take a look at the [documentation](https://cube.dev/docs/schema/getting-started) for more information about how schemas work, and how to generate your own.

![Generate Data Schema](https://i.imgur.com/qfdpqQ9.png)

Give your instance a couple of seconds to spin up, and you’ll be taken to the **Overview**, as shown below:

![Cube Cloud Overview](https://i.imgur.com/e9M2Tto.png)

Here is a brief tour of the left menu:

* **Playground** is the [Developer Playground](https://cube.dev/docs/dev-tools/dev-playground), which will let you play with your data, build test charts, and more. It can also help you to generate code for multiple frameworks. In this tutorial, you’ll use it to generate some of the code for your nivo dashboard.
* **Schema** exposes the generated schema. Each JavaScript file describes a `cube` that is tied to a single SQL query, with specific links to other `cubes` and metrics.
* **Queries** gives you a historical view of the queries handled by Cube (API side and database side)
* **Pre-Aggregations** keeps you up to date about the batch jobs that are building pre-aggregations. It’s a practical solution to reduce the query duration when you have a large database. A good introduction on this topic is available in the [documentation](https://cube.dev/docs/caching/pre-aggregations/getting-started)!

Let’s start building your first chart using the Playground. Select `Users Count` as a measure, `Users City` as a dimension, and a `Bar` chart type. Click **Run**, and Cube will display your first chart.

![Your First Chart](https://i.imgur.com/JL8sbUM.png)

The Playground is the best place to play with the data and get a better idea of the best representation to show a given metric or trend. The only downside is that there’s no way to generate a nivo chart. This won’t stop you from building a nivo dashboard, though!

### Build Your Nivo Dashboard

Bootstrap a new React application using [Create React App](https://create-react-app.dev/):

```shell
npx create-react-app nivo-dashboard
```

You’ll need to add a few packages. `@nivo/*` will allow us to build nivo components. `@cubejs-client/core` is the basic cube library, and `@cubejs-client/react` provides components and hooks that you’ll use later.

```shell
cd nivo-dashboard/
npm add @nivo/core @nivo/bar @nivo/pie @nivo/bump @cubejs-client/core @cubejs-client/react
```

Start your application with the following command, and it will open a browser to `http://localhost:3000` with the default start page:

```shell
npm start
```

Now you need to connect from React to your Cube application. Go back to the **Overview**, and click on the **How to connect your application** link in the **REST API** section, then select the **React** tab. It will give you some code to copy-paste in your application. Be aware that it’s sensitive information, as it contains an API token and the endpoint of your Cube API. Later, you can store this information in dedicated environment variables to avoid pushing it to a Git repository. 

![Connecting to REST API](https://i.imgur.com/7h4GG9X.png)

To start building your dashboard, you’ll build a bar chart, just like the one you built earlier in the Developer Playground. In a new `src/charts/UsersPerCity.js` file, start by creating a simple component:

```jsx
import { ResponsiveBar } from "@nivo/bar";
import { useCubeQuery } from "@cubejs-client/react";

const UsersPerCity = () => {
  // use hook to grab data from Cube
  const { resultSet, isLoading, error, progress } = useCubeQuery({
    measures: ["Users.count"],
    timeDimensions: [],
    order: {
      "Users.count": "desc",
    },
    dimensions: ["Users.city"],
  });

  if (isLoading) {
    return (
      <div>
        {(progress && progress.stage && progress.stage.stage) || "loading"}
      </div>
    );
  }

  if (error) {
    return <div>{error.toString()}</div>;
  }

  if (!resultSet) {
    return null;
  }

  const dataSource = resultSet.tablePivot();

  return (
    <div style={{ height: "250px", width: "100%" }}>
      <ResponsiveBar
        data={dataSource}
        keys={["Users.count"]}
        indexBy="Users.city"
        margin={{ top: 0, bottom: 80, left: 60 }}
        colors={{ scheme: "accent" }}
        axisBottom={{
          tickSize: 5,
          tickPadding: 5,
          tickRotation: 45,
          legendOffset: 32,
        }}
      />
    </div>
  );
};

export default UsersPerCity;
```

This uses the [hook](https://reactjs.org/docs/hooks-intro.html) `useCubeQuery`, provided by Cube, for a specific query: 

```json
{
    measures: ["Users.count"],
    timeDimensions: [],
    order: {
      "Users.count": "desc",
    },
    dimensions: ["Users.city"],
  }
```

You can retrieve this query from the **JSON Query** panel of the Playground:

![Developer Playground: JSON query](https://i.imgur.com/WdIcm8o.png)

The hook lets you easily handle the loading state (`isLoading`) and provides you a `resultSet` object that contains the JSON representation of the data to show on your bar chart.

With the data acquired, you’re simply using the `ResponsiveBar` from nivo to render the bar chart with the `resultSet` object:

```jsx
  const dataSource = resultSet.tablePivot();

  return (
    <div style={{ height: "250px", width: "100%" }}>
      <ResponsiveBar
        data={dataSource}
        keys={["Users.count"]}
        indexBy="Users.city"
        margin={{ top: 0, bottom: 80, left: 60 }}
        colors={{ scheme: "accent" }}
        axisBottom={{
          tickSize: 5,
          tickPadding: 5,
          tickRotation: 45,
          legendOffset: 32,
        }}
      />
    </div>
  );
```

Now we can open `src/App.js` to display the chart. To do that, replace the contents of `src/App.js` with the following:

```jsx
import UsersPerCity from "./charts/UsersPerCity";
import cubejs from "@cubejs-client/core";
import { CubeProvider } from "@cubejs-client/react";

const cubejsApi = cubejs(
  "API_TOKEN",
  {
    apiUrl:
      "API_ENDPOINT",
  }
);

function App() {
  return (
    <CubeProvider cubejsApi={cubejsApi}>
      <UsersPerCity />
    </CubeProvider>
  );
}

export default App;
```

This first initializes the `cubejsApi` with your token and API endpoint. Don’t forget to add your API token and endpoint, which you got from the Cube Overview screen.

Then you’re using `CubeProvider`, which will provide the Cube context to all components below. It’s possible to pass `cubeJsApi` directly to `useCubeQuery`, but doing it for all components at once is much easier when you’re working with more charts.

Finally, you use your brand new `UsersPerCity` component. If everything’s working correctly, `http://localhost:3000` will display a chart like this:

![nivo chart on React app](https://i.imgur.com/XmpS69Z.png)

Congratulations—you’ve made it!

At this point, you can customize your application by making it interactive. For example, if you need to add a filter to show only a specific city on the graph, you can take advantage of the `filter` section in the JSON query, and test it on the **Developer Playground**. Then you can add a new input component in your React application, and set up the `useState` hook to dynamically pass the input value to the Cube query. You can learn more about filtering in the query in the [Cube documentation](https://cube.dev/docs/query-format#filters-format).

Now that you have the basics down, you can continue to add more charts and polish your application. For reference, the complete React app with all four charts, as shown at the beginning of the tutorial, is available in [this GitHub repo](https://github.com/julbrs/cube-nivo-tutorial).

## Get Ready To Learn More

You’ve just scratched the surface of Cube in this tutorial. For example, you haven’t yet spent time customizing [schemas](https://cube.dev/docs/schema/fundamentals/concepts). But when you start modifying the schema of your Cube files, Cube Cloud gives you easy tools to manage that. You can link your instance to a specific GitHub repository (to host schema files), and the **Development Mode** will allow you to test the modification or to deploy a custom branch.

![Development Mode](https://i.imgur.com/kiFYRCJ.png)

You can learn more in the [documentation about the Cube IDE](https://cube.dev/docs/cloud/dev-tools/cube-ide).

## What Have You Learned Today?

Adding Cube to the equation is a quick and easy way to enhance the user experience of your application. Instead of spending developer time to build this kind of chart from scratch, it’s much more efficient to first design them within the Developer Playground, then integrate them into your application with just a few lines of code, like you did in this tutorial.

To continue the journey, you could take a look at the promising new API available with Cube. It allows you to interact with Cube using [GraphQL](https://en.wikipedia.org/wiki/GraphQL) instead of REST. This [blog post](https://cube.dev/blog/introducing-cube-graphql/) explains how this can be a game changer. You can also try out the [SQL API](https://cube.dev/docs/backend/sql). It allows you to use Cube for MySQL-compatible queries, enabling you to connect to [any business intelligence solution that supports SQL](https://cube.dev/blog/introducing-cube-sql/).

Finally, don’t hesitate to ping the Cube team on [Slack](https://slack.cube.dev/)—they’re very responsive, and always happy to help new users.

Julien Bras

Nivo

Building a nivo Dashboard with Cube

[visx](https://airbnb.io/visx) is an open-source collection of expressive, low-level visualization primitives for [React](https://reactjs.org) and is built on top of [D3.js](https://d3js.org/). It can be used to easily build interesting and unique visualizations for your web application. If you’re familiar with D3 and React, you can quickly get started with visx. 

In this article, you’ll learn how to create a visx dashboard in React using [Cube Cloud](https://cube.dev/cloud) as a headless BI and REST API that links your data to your front end. 

[Cube](https://cube.dev) is an open-source headless BI for building data apps and analytical web apps. It has a powerful interface that lets you create various visualizations by loading data from your database. In addition, it can be utilized as an API by all major front-end frameworks. It exposes 3 APIs in total, REST, GraphQL, and SQL.

By the end of this tutorial, you’ll have a completed pie chart that depicts total orders from one date to another. Additionally, as you mouse over each section, you’ll be able to see the exact order number for that particular month. 

![Tutorial project](https://imgur.com/aIGtbp2.png)

You can follow along with this tutorial on [GitHub](https://github.com/Samuel-2626/visx-cube-pie-chart).

## Why visx?

visx is one of many visualization libraries available, but it isn't simply another charting library; it's rather low level and provides you with basic elements that you can mix to create amazing visualizations. For example, to create a pie chart with some text inside you might have several combinations of React components created by visx like a  `pie` component for drawing the pie shape, a `text` component for adding text that can be aligned properly, and so on. 

visx was built by [Airbnb](https://airbnb.com), to combine the power of D3 with React, while also unifying their visualization stack. It's a popular visualization tool that outshines competitors like [Recharts](https://recharts.org) and [nivo](https://nivo.rocks). Some advantages include:

1. It’s modular and the bundle size is small. Because of code-splitting, you don’t have to install the complete visx package. Instead, you only have to install the particular element or component you want. This is in stark contrast to some of its competitors, like [Recharts](https://recharts.org).
2. It allows you to use another library with visx in your React application. It is, in other words, non-opinionated.
3. It includes TypeScript support, which most developers prefer while working on medium to large projects.
4. The [documentation](https://airbnb.io/visx/docs) is fairly good, with plenty of practical examples.
5. It gives you mock data. This can be used to quickly create a proof of concept, since you don’t have to use your own production database.
6. It makes styling simple because it comes pre-packaged.

One of the more difficult aspects of working with visx is that it may take some time to grasp the architecture and learn how to combine the various pieces to produce unique visualizations.

But how do you bring visx and Cube together? Cube is front-end agnostic. As a result, Cube can be used with any front end, including React, Vue, Angular, and even plain vanilla JavaScript. In the next section, you'll learn a little more about Cube and create a Cube deployment.

## Implementing a visx Dashboard with React and Cube

After you set up Cube, you’ll need access to a database. For this tutorial, you’ll be using a preconfigured database containing e-commerce information so that you can visualize total orders for a specific period, view orders by month, and then put this information into a pie chart. 

### Set Up Cube

There are two approaches to configuring Cube. You can configure Cube on your [local machine using Docker](https://cube.dev/docs/getting-started/docker/compose), or you can use Cube Cloud as a hosted version, which is what you’ll be doing here. 

First, sign up for a [Cube Cloud account](https://www.cubecloud.dev/auth/signup) and choose a subdomain:

![Cube cloud subdomain](https://imgur.com/UnEUajW.png)

Then, select **Create Deployments** and give the deployment a name, cloud platform, and region:

![Cube cloud create deployment credentials](https://imgur.com/T6MHXuu.png)

To set up a Cube project from scratch, click on **+ Create**:

![Cube cloud project setup](https://imgur.com/DM0RqfQ.png)

Then select [Postgres](https://www.postgresql.org) as your database of choice and make a connection to it by giving it the credentials below. 

In this tutorial, you’re using a preconfigured database to get your dashboard up and running quickly. Here are the credentials:

* Hostname: `demo-db.cube.dev`
* Port: `5432`
* Database: `ecom`
* Username: `cube`
* Password: `12345`

This can also be seen in the screenshot below:

![Cube cloud database connection](https://imgur.com/on02Hha.png)

Next, generate your data schema:

![Cube cloud generate data schema](https://imgur.com/NWBEqG9.png)

You can consider your data schema as a wrapper for your database, and it ultimately translates to SQL code and is used to interface with your database in a more robust, structured, and efficient manner. 

In a few seconds, Cube Cloud should start up the server for you. Inside Cube, you’ll find a developer playground, which is a web-based tool that’s used to view and edit the generated data schema, execute queries, build dashboards, and much more.

![Cube Cloud playground](https://imgur.com/zJ9I88N.png)

In the next phase, we'll create a new React application and install all of the project's dependencies.

## Getting Started with visx

To get started with visx, you need to create a new React application:

```bash
$ npx create-react-app visx-dashboard-sample
```

Navigate into the folder `visx-dashboard-sample`:

```bash
$ cd visx-dashboard-sample
```

And, install the necessary visx packages:

```bash
$ npm i @visx/shape @visx/group @visx/text
```

Also, install the Cube JavaScript client and React client library:

```bash
$ npm install --save @cubejs-client/core @cubejs-client/react
```

After installation, run the development server using the following command: 

```bash
$ npm start
```

Then, open the folder `visx-dashboard-sample` in a text editor like [Sublime Text](https://www.sublimetext.com):

Once opened, inside the `src/App.js` file, delete the default content. You’ll write your code in this file.

You can find the complete code for this on [GitHub](https://github.com/Samuel-2626/visx-cube-pie-chart). 

First, start with the necessary imports:

```jsx
import { useState } from 'react'
import { Pie } from '@visx/shape'
import { Group } from '@visx/group'
import { Text } from '@visx/text'

import cubejs from "@cubejs-client/core";

import { QueryRenderer } from "@cubejs-client/react";
```

In the code above, you import the dependencies that you need for the application. These include:

* the **`useState` hook**, which is used to store the state of the value which you can mouse over so that the UI displays the correct order for that month.
* **`Pie`**, which is provided by visx and used to draw a pie chart.
* **`Group`**, which is also from visx and used to group elements together.
* **`Text`**, which is used to add text to the shape.
* **`cubejs`** which is used to connect to our server (headless BI REST API) provided by Cube.
* **`QueryRenderer`**  which is a React component that returns the data of a particular query. 

Now, create an instance of the Cube API with the following code:

```js
const cubejsApi = cubejs(
  'CUBEJS_TOKEN',
  { apiUrl: 'API_URL' }
);
```

To get your own Cube credentials, you need to return to Cube Cloud and select **Overview** from the left-hand panel. You should see the link **How to connect your application** located near the top of this section.

![How to connect your appplication](https://imgur.com/7hYGUzh.png)

Select it, and a modal will appear. Then, click on the **React** tab and your credentials will be generated for you. Finally, replace `'CUBEJS_TOKEN' & 'API_URL'` from the code above with your own credentials.

Using those credentials, you can also make a request to Cube using the `QueryRenderer` component that will curate order count on a month-to-month basis. For this database, you want to visualize the total number of orders for the duration of a specific period (`2019-01-01` to `2020-01-01`) as well as an individual month to better understand the e-commerce data. 

To do this, add the following code:

```jsx
function App() {
  return (
    <QueryRenderer
       query={{
         measures: ["Orders.count"],
         timeDimensions: [
           {
             dimension: "Orders.createdAt",
             dateRange: ["2019-01-01", "2020-01-01"],
             granularity: "month"
           }
         ]
       }}
       cubejsApi={cubejsApi}
       render={({ resultSet }) => {
         if (!resultSet) {
           return "Loading...";
         }

         console.log(resultSet)

         return (
           <div>
             <h1>Pie Chart with Visx and Cube</h1>
           </div>
         )
        }}
    />
  )
}
export default App;
```

In the code above, the `QueryRenderer` component has three properties: `query`, `cubejsAPI`, and `render`.

The `query` prop accepts an object which describes what data you want from Cube. Inside the object you’ll find the `measure` key which returns the number of orders in a particular time range. That time range is specified using the `timeDimensions` key.

The second prop is the `cubejsApi` where you need to pass the `cubejsApi` object you created earlier.

The final prop is the `render` function that is responsible for rendering the result. It receives a `resultSet` object that holds the data returned by Cube. Now let’s use the `resultSet` to render the chart.

After the `console.log` function, paste the following code:

```js
let orders = resultSet.loadResponse.results[0].data
```

Here, you are traversing the `resultSet` object to get the result of the query and storing it in a variable called `orders`. Now that you have access to the data, you can begin constructing your pie chart with visx.

Inside the render function prop that returns the text `Pie Chart with Visx and Cube`, replace it with the following code:

```js
 <svg width={width} height={width}>
      <Group top={half} left={half}>
          <Pie
            data={orders}
            pieValue={(data) => data["Orders.count"]}
            outerRadius={half}
            innerRadius={half - 20}
            padAngle={0.01}
          >
          </Pie>
     </Group>
</svg>
```

In the code above, you created an `svg` element and passed it a width and a height parameter. 

Inside the `Group` component provided by visx, you'll find the `Pie` component. This component has many props that will help you configure the pie chart.

The `data` component takes in the orders variable you created earlier, and the `pieValue` prop determines how big each individual element of the pie is. It’s an arrow function that receives the data and returns the `Orders.count` value. This value shows the orders for a particular month and is used here to segregate each pie element. 

You also have the inner and outer radius props to give definition to the pie. Without this prop, nothing will render in the browser. Finally, the `padAngle` prop is used to add padding to each pie element in order to differentiate where each individual section starts and ends.

Before you go back to your browser, define the `width` and the `half` variable that you used inside the `svg` so that the SVG is visible.

Add this code inside the `App` function component at the top:

```js
const width = 400
const half = width / 2 
```

When you visit your browser, you should see something like this: 

![Midway through the appplication](https://imgur.com/B956Vwi.png)

To make the chart interactive, you need to configure each particular pie element by adding color and rendering the correct value (i.e. orders for that month). To do this, first add an array of colors, as seen below, after the definition of the `width` and the `half` variable:

```js
const color = ["yellow", "orange", "green", "black", "red", "purple", "tomato"]
```

Then, inside the `Pie` component add the following code:

```js
{pie => {
  return pie.arcs.map(arc => {
    return <g
              key={arc.data["Orders.createdAt"]}
              onMouseEnter={() => setActive(arc.data)}
              onMouseLeave={() => setActive(null)}
            ><path d={pie.path(arc)} fill={color[~~(Math.random() * color.length)]}></path></g>
  })
}}
```

This code is an arrow function that takes as argument the individual pie element letting you customize each one. You’ll find the individual pie data within the `arc` variable. 

For each pie element, you have an `eventListener` called `onMouseEnter` and `onMouseLeave`. These two functions are used to store the current `Pie` element data in a state variable which you need to create. 

At the top of of the `App` function component add the following code:

```js
let [active, setActive] = useState(null)
```
Now, when you mouse over a particular pie, you store it in your state. Then, you use the fill property in the `<path>` element to add color to each pie element. 

When the mouse hovers over an element, you want to display the orders count corresponding to that element. To do this, you need to see if anything is stored in the `active` state. If there is, the order count will be displayed. 

Inside of the `Group` component and after the `Pie` component, add the following code:

```js
{active ? 
  <>
      <Text textAnchor="middle" dy={-20} fontSize={40}>
        {active["Orders.count"]} 
      </Text>
      <Text textAnchor="middle" dy={20}>
      {active["Orders.createdAt"]} 
      </Text>
  </>
      : 
  <>
      <Text textAnchor="middle" dy={-20} fontSize={40}>
        {orders.reduce((acc, order)=> acc + parseInt(order["Orders.count"]), 0)} 
      </Text>
      <Text textAnchor="middle" dy={20}>
      total orders
      </Text>
  </>
}
```

In the code above, you use the ternary operator to help you render the total orders and the orders for a particular month depending on the `active` variable. Then, to render text, you use the `Text` component in visx which has several props to position the text and set the size.

To calculate the total orders, you utilize a JavaScript higher order function called `reduce`.

![Tutorial project](https://imgur.com/aIGtbp2.png)

## Conclusion

In this tutorial, you learned how to build a data visualization dashboard using Cube, visx, and React. 

Good visualizations can help you understand concepts and analyze data that would otherwise be easily lost in a sea of numbers. However, creating visualizations can be daunting without the help of good tools. 

[Cube](https://cube.dev) is an open-source Headless BI tool that can help you quickly build analytics features and reporting tools on top of your cloud data warehouse. This means you can start quickly creating beneficial and unique visualizations that will add value to your organization. In this tutorial I used the hosted cloud version called [Cube Cloud](https://cube.dev/cloud).

To proceed further, the database you connected still has some unexplored data. Try extending this dashboard by creating a visualization of your own.

I'd love to hear your feedback about using visx with Cube Cloud in the Cube Community Slack. [Click here to join](https://slack.cube.dev/)!

Until next time, stay curious, and have fun coding. Also, feel free to [leave Cube a ⭐ on GitHub](https://github.com/cube-js/cube.js) if you liked this article. ✌️

Samuel Torimiro

React

Building a visx Dashboard with Cube

Great job, developer. You’ve nearly finished your first major React-based project for that new customer. 

But now you’re asked to add a dashboard to show sales revenues or user retention percentage. You know it will take you weeks with traditional methods—computing the data to share, building an endpoint to expose the right data, handling it on the front-end side, presenting it correctly, tweaking the metrics. Isn’t there a more straightforward way? 

Yes, there is.

This tutorial will show you how to build a dashboard using [Recharts](https://recharts.org/), a React library that offers you a set of chart components to speed up the creation of a dashboard, and [Cube](https://cube.dev/), a Headless BI tool that allows you to expose your application database via a set of APIs. The combination will allow you to play with your data and simply copy/paste the generated dashboard code content to your React application. 

Here is the expected result of this tutorial:

![Recharts Dashboard built with Cube](https://i.imgur.com/s7cGBsH.png)

## Introducing Cube

[Cube](https://cube.dev/) positions itself as “Headless BI for building
data applications.” The tool acts as a bridge between the data that is stored, generally in a database (PostgreSQL, MySQL, etc.), and your front-end application that is consuming an API.

![Cube architecture](https://imgur.com/FluGFqo.png)

Cube is available in two flavors: an open-source product, generally named Cube.js, which you must [host yourself](https://cube.dev/docs/getting-started/docker); and Cube Cloud, an enterprise-ready service with [high availability and scalability](https://cube.dev/docs/cloud). Both options provide the same features.

## Introducing Recharts

[Recharts](https://recharts.org/) is a React library designed to help you create nice charts. By providing an expanded set of [pre-existing charts](https://recharts.org/en-US/api/AreaChart), it allows you to present data in the way you need. 

Let’s take the following piece of code, where `data` is a simple JavaScript array containing the data:

```
<BarChart width={730} height={250} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Bar dataKey="pv" fill="#8884d8" />
  <Bar dataKey="uv" fill="#82ca9d" />
</BarChart>
```

It will be shown like this:

![Recharts example](https://i.imgur.com/gw8mMKX.png)

Recharts is a very common solution since it integrates easily in your React environment via the multiple components available. It’s also very customizable to match your requirements: color, style, chart type, etc. You can also specify how to label content, define axis organization, choose the correct shape, and so forth

But because it’s just a front-end library, it needs a `{data}` object with all the content shown on the chart. It’s obvious, but it can be complex to produce this information, for example, if the application is relying on a traditional back end with a classic database system like PostgreSQL or MySQL.

There are also other options for rendering charts on a web application:

* [Charts.js](https://www.chartjs.org/) is a popular solution, but it’s not a React library so you may need to rely on third-party integrations like [this one](https://github.com/reactchartjs/react-chartjs-2). 
* [D3](https://d3js.org/) is also a classic option, but it’s generally much more complex to integrate D3 into a React application, because both libraries will try to access the document object model (DOM).

In this tutorial, you’ll combine [Cube](https://cube.dev/) and Recharts. The good news is that [Cube](https://cube.dev/) supports out-of-the-box Recharts as a charting engine, saving you a lot of time when it’s time to write code.

## Build a Recharts Dashboard with React and Cube

Let’s build the dashboard!

To reproduce the results here, use a sample database available online. You’ll use the MySQL [Employee Sample Database](https://dev.mysql.com/doc/employee/en/). Based on this data, you will build charts to highlight useful metrics:

- Number of employees per department, gender, birth date, etc.
- Average salary per department, gender, hire date, etc.

### Prerequisites

You need to have `docker` and `docker-compose` to use the open-source version of Cube. Since you will spin-up a local MySQL database containing the sample data, you will use Docker to start both a MySQL container and a Cube container. You also need to have `node` and `npm` installed to create the React application for the dashboard. 

With that in place, we can begin.

### Start Cube

To start, you’ll follow the [docker-compose](https://cube.dev/docs/getting-started/docker/compose) steps.

In an empty new folder named `cube`, create a `docker-compose.yml` file:

```
version: '2.2'

services:
  cube:
    image: cubejs/cube:latest
    ports:
      - 4000:4000
    environment:
      - CUBEJS_DEV_MODE=true
    volumes:
      - .:/cube/conf
  database:
    image: genschsa/mysql-employees
    environment:
      - MYSQL_ROOT_PASSWORD=pass
```

It will allow you to define the two containers needed:
- `cubejs/cube` is obviously the Cube image (started in development mode `CUBEJS_DEV_MODE=true` to use the playground, which you’ll see later)
- `genschsa/mysql-employees` is a MySQL server image with the employee sample database already loaded

Then, run the following to start Cube with the database:

```
docker-compose up
```

Both containers will start up and will be able to communicate with each other.

### Start Cube via Cube Cloud

If you want to use Cube Cloud instead, the process is easier than using Docker. The free-tier is [ generous](https://cube.dev/pricing/) for testing the SaaS solution. 

From [Cube Cloud](https://cubecloud.dev/), log in, for example by using your GitHub account. 

![Starting Cube Cloud](https://i.imgur.com/yuffhcP.png)

Then create a deployment: 

![Create a Deployment](https://i.imgur.com/2HVUXav.png)

You can either import an existing project from GitHub, or create a new project from scratch: 

![Create a project](https://i.imgur.com/uKL7fWl.png)

### Connect to the Database

Let’s roll back to the local deployment. Once the containers are up and running, you’ll be able to connect to `http://localhost:4000` via any browser.

![Cube.js playground](https://i.imgur.com/iK1NPGd.png)

The first task is to connect to the database where your data is located. In your case, you need to connect to the employee sample data. So first select MySQL, then configure the connection:

![Configuration of your MySQL database in Cube](https://imgur.com/z7bVhrv.png)

* Hostname: `database`
* Port: `3306`
* Database: `employees`
* Username: `root`
* Password: `pass` 

(Side note: the `root` password is set in the `docker-compose.yml` file as `pass`. Yes, it’s a local deployment. It should not be shipped to your production environment.)

 An `.env` file is generated after this step to store the database credential information.

### Generate a Schema

The important next step is to generate a schema of your database. It will define the API for later interaction. 

Select the tables as shown in the screenshot below and click on **Generate Schema**.

![Cube Schema Generation](https://i.imgur.com/pcq421H.png)

It will create a set of JavaScript files located in the `schema/` folder, next to your `docker-compose.yml` file. Each file describes how to use each table of your database, that is, which fields can be used as a metric (number of employees), a dimension (department name), or what links can be done between tables. The [dedicated section](https://cube.dev/docs/schema/getting-started) of the documentation is a good starting point to get a good foundation of schema in Cube.

Make sure to replace the generated files with the one you can find in [the GitHub repository for this tutorial](https://github.com/julbrs/cube-recharts-tutorial/tree/main/cube/schema). The files here have been carefully designed to let Cube work well with this particular database.

### Start Playing With Your Data

Once your schema is available, you can start experimenting and build your app. 

For example, go to the **Build** section of the app. Select `Employee Count` as the measure, and `Departments Name` as the dimensions, and keep the **Segment**, **Time** and **Filters** empty. Use a **Bar** chart instead of **Line** and click on **Run** in the middle of the screen. You will see this kind of chart:

![First Chart generated via Cube](https://i.imgur.com/rOK1YmL.png)

Take some time to play with this interface. It’s called the playground, after all, so experiment with your data. You can explore measures and dimensions as well as chart styles. 

You can also define the chart engine for your output. In our case, we want to select first **React** then **Recharts**.

![Switch Chart Engine](https://i.imgur.com/nFvYclM.png)

You can also switch between the following:
* **Chart** renders a test chart.
* **JSON Query** shows the JSON data sent to the Cube API.
* **GraphiQL** shows the equivalent information if you want to use the GraphiQL Cube API.
* **Code** generates the code for the current selected engine. (We will use it shortly.)
* **SQL** shows the exact SQL query sent to the database engine.

The screenshot below is of the code screen: 

![Recharts Code](https://i.imgur.com/SvlINg5.png)

This code can be copy-pasted to any React stack app to include the current element of the playground (in our case, a Recharts chart that is built based on the Cube API). If you scroll down, you’ll see the Cube API information:

```
const cubejsApi = cubejs(
  'APIKEY',
  { apiUrl: 'http://localhost:4000/cubejs-api/v1' }
);
```

Here is the query that is sent to the Cube engine:

```
      query={{
  "measures": [
    "Employees.count"
  ],
  "timeDimensions": [],
  "order": {
    "Employees.count": "desc"
  },
  "filters": [],
  "dimensions": [
    "Departments.Name"
  ]
}}
```

And also the graph component from Recharts:

```
  return (
  <CartesianChart resultSet={resultSet} ChartComponent={BarChart}>
    {resultSet.seriesNames().map((series, i) => (
      <Bar
        key={series.key}
        stackId="a"
        dataKey={series.key}
        name={series.title}
        fill={colors[i]}
      />
    ))}
  </CartesianChart>
```

This code saves you hours during dashboard coding. You simply have to organize the elements on the page correctly and define a set of environment variables (Cube API URL, Cube API Token) to have a production-ready dashboard.

### Build Your Recharts Dashboard

The goal of this section is to integrate the various elements generated from the Cube playground into a React application.

Create a new React application using the [Create React App](https://create-react-app.dev/docs/getting-started/) starter:

```
npx create-react-app react-app
```

Add some needed libraries (_Recharts_ for charting, _CubeJs_ for connecting to Cube API, _AntD_ for styling, _Use Deep Compare_ for a React Hook used by the code produced by Cube):

```
cd react-app
npm add @cubejs-client/core @cubejs-client/react antd use-deep-compare recharts
```

Start your development server:

```
npm start
```

Copy-paste the content of the code screen of your first query in a new file in `src/charts/EmployeesPerDept.js`

Remove the last two lines at the end of the file:

```
const rootElement = document.getElementById('root');
ReactDOM.render(<ChartRenderer />, rootElement);
```

Replace the removed code with a classic component export to declare the chart as a React functional component that can be used in the main `src/App.js` file: 

```
export default ChartRenderer;
```

Now, modify the `src/App.js`:

```
import EmployeesPerDept from "./charts/EmployeesPerDept";

function App() {
  return (
    <div className="App">
      <EmployeesPerDept />
    </div>
  );
}

export default App;
```

If you followed all the steps, you should have the chart below on your development server:

![Recharts chart shown on React application](https://i.imgur.com/vkY3Vfz.png)


You’re welcome to explore [this tutorial’s GitHub repository](https://github.com/julbrs/cube-recharts-tutorial/) containing the schema for the Cube application (under `cube/`) and the final React application (under `react-app/`). It contains the Recharts dashboard with the multiple charts you saw at the start of this tutorial.

## Learn More

If you want to learn more about Cube and Recharts, start by working on [query acceleration](https://cube.dev/docs/caching/pre-aggregations/getting-started/). It allows you to speed up the execution of the query by adding pre-aggregation.

There is also a prebuilt Dashboard App that allows you to build your React app directly based on popular templates:

![Cube Dashboard App](https://i.imgur.com/53JOyrZ.png)

You can use the **Add to Dashboard** button to add any query built via the playground directly. It’s even quicker than the process described in this tutorial.

## What Have You Learned Today?

At first, building a custom dashboard integrated into a React application seems like a complex task. But with the right tools, it can be as simple as deciding what to show as a metric and how to present it. The Cube playground handles all the complexity without limiting you to its default values. You can explore the [Cube API documentation](https://cube.dev/docs/) and the [Recharts API documentation](https://recharts.org/en-US/api) to understand how to customize the generated code.

If your project is dealing with analytics, it’s worth trying Cube. Don’t hesitate to ping the team on their [Slack channel](https://slack.cube.dev/). They’re very responsive and helpful, especially if you’re a new player.

Recharts

Building a Recharts Dashboard with Cube

Zara Cooper

Apache ECharts

Building an Apache ECharts Dashboard with Angular and Cube

Osinachi Chukwujama

Building an Apache ECharts dashboard with React and Cube

Ashutosh Singh

Building an Apache ECharts Dashboard with Vue 3 and Cube

In this tutorial, we'll learn how to visualize data with [React Google Charts](https://react-google-charts.com/), a modern, well-maintained, thin, typed, React wrapper for a free charting service and JavaScript library by Google. We'll also use Cube, an open-source API for building data apps, to provide access to the public dataset with The Museum of Modern Art collection data. In the end, we'll have a dashboard with charts that tell all about MoMA's contemporary artworks.

Here's how the end result will look like:

<iframe src="https://codesandbox.io/embed/cube-react-google-charts-dashboard-example-igob6?fontsize=14&hidenavigation=1&theme=dark&view=preview"
  style={{ width: "100%", height: "500px", border: 0, borderRadius: "4px", overflow: "hidden" }}
  title="Cube + React-Google-Charts Dashboard Example"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

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).

![Google Charts](https://cubedev-blog-images.s3.us-east-2.amazonaws.com/e2567875-f039-4230-b414-ac974ac395b1.png)

**Why is it a *charting service*, not a *charting library*?** Indeed, Google Charts provide a JavaScript library that takes the data and renders charts on the web page. However, unlike other data visualization tools, Google Charts don't render all the charts on the client side. Instead, for some of the charts, they pass the data to Google servers, render a chart there, and then display the result on the page.

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.
- The size of the JavaScript library is fixed and doesn't depend on the features used. And it's actually really tiny — less than 20 KB (gzipped).

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](https://developers.google.com/terms). Also, make sure to always check the [Data Policy](https://developers.google.com/chart/interactive/docs/gallery/scatterchart#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](https://awesome.cube.dev/tools/vega) and [Vega-Lite](https://awesome.cube.dev/tools/vega-lite) visual grammars in Google Charts.

![Chart types](https://cubedev-blog-images.s3.us-east-2.amazonaws.com/119c5b45-fca1-4e2f-a592-1ba251b4e3f6.png)

All of these are available in [React-Google-Charts](https://react-google-charts.com/), 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](https://github.com/MuseumofModernArt/collection) 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.

![MoMA dataset](https://cubedev-blog-images.s3.us-east-2.amazonaws.com/c08f5a0c-4940-4ad8-b4e1-1b5506c1985c.png)

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](https://cube.dev) 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.

**Let's spin up an API for the MoMA dataset.** First, please make sure you have [Docker](https://www.docker.com/get-started) installed on your machine. It's [recommended](https://cube.dev/docs/getting-started/docker) to run Cube with Docker or use a managed instance in [Cube Cloud](https://cube.dev/cloud).

Second, let's create a new folder for your Cube app and navigate to it:

```bash
mkdir google-charts-moma
cd google-charts-moma
```

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:

```bash
cat > docker-compose.yml << EOL
version: '2.2'
services:
  cube:
    image: cubejs/cube:latest
    ports:
      - 4000:4000
      - 3000:3000
    env_file: .env
    volumes:
      - .:/cube/conf
EOL
```

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](https://cube.dev/docs/config/databases/postgres) to learn more about connecting Cube to Postgres or any other database.

```bash
cat > .env << EOL
CUBEJS_DB_TYPE=postgres
CUBEJS_DB_HOST=demo-db-examples.cube.dev
CUBEJS_DB_NAME=moma
CUBEJS_DB_USER=cube
CUBEJS_DB_PASS=12345
CUBEJS_API_SECRET=SECRET
CUBEJS_DEV_MODE=true
EOL
```

That is all we need to let Cube connect to Postgres. The last part of configuration is the [data schema](https://cube.dev/docs/schema/getting-started) which declaratively describes the contents of the database. Let's put it under the `schema` folder:

```bash
mkdir schema
touch Artworks.js
```

Please copy and paste this data schema into `Artworks.js`, then follow the comments in the file:

```jsx
cube(`Artworks`, {
  // Cube definition.
  // It says that the data is kept in the "artworks" table.
  // Learn more in the docs: https://cube.dev/docs/schema/getting-started
  sql: `SELECT * FROM public.artworks`,

  // Quantitative information about the data, e.g., count of rows.
  // It makes sense for all rows rather than individual rows
  measures: {
    count: {
      type: `count`,
    },

    minAgeAtAcquisition: {
      type: `number`,
      sql: `MIN(${CUBE.ageAtAcquisition})`
    },

    avgAgeAtAcquisition: {
      type: `number`,
      sql: `SUM(${CUBE.ageAtAcquisition}) / ${CUBE.count}`
    },

    maxAgeAtAcquisition: {
      type: `number`,
      sql: `MAX(${CUBE.ageAtAcquisition})`
    }
  },

  // Qualitative information about the data, e.g., an artwork's title.
  // It makes sense for individual rows of data rather than all rows
  dimensions: {
    title: {
      sql: `${CUBE}."Title"`,
      type: `string`
    },

    artist: {
      sql: `${CUBE}."Artist"`,
      type: `string`
    },

    classification: {
      sql: `${CUBE}."Classification"`,
      type: `string`
    },

    medium: {
      sql: `${CUBE}."Medium"`,
      type: `string`
    },

    // We can use SQL functions here
    year: {
      sql: `SUBSTRING(${CUBE}."Date" FROM '[0-9]{4}')`,
      type: `number`
    },

    date: {
      sql: `${CUBE}."Date"`,
      type: `number`
    },

    dateAcquired: {
      sql: `${CUBE}."DateAcquired"`,
      type: `time`
    },

    yearAcquired: {
      sql: `DATE_PART('year', ${CUBE}."DateAcquired")`,
      type: `number`
    },

    ageAtAcquisition: {
      case: {
        when: [
          {
            sql: `${CUBE.yearAcquired}::INT - ${CUBE.year}::INT > 0`,
            label: { sql: `${CUBE.yearAcquired}::INT - ${CUBE.year}::INT` }
          }
        ],
        else: {
          label: `0`
        }
      },
      type: `number`
    },

    heightCm: {
      sql: `ROUND(${CUBE}."Height (cm)")`,
      type: `number`
    },

    widthCm: {
      sql: `ROUND(${CUBE}."Width (cm)")`,
      type: `number`
    },
  },

  dataSource: `default`
});
```

Whew! Now we're finally ready to run Cube:

```bash
docker compose up
```

**Now, let's review the data in the MoMA dataset.** Cube provides the [Developer Playground](https://cube.dev/docs/dev-tools/dev-playground), a convenient web-based tool that helps explore the data, at [localhost:4000](http://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".

![Developer Playground](https://cubedev-blog-images.s3.us-east-2.amazonaws.com/6408ed85-9b19-4895-a039-0b838773ef26.png)

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 `ArtworkArtistsTable` and `ArtworkYearsChart` components. At the very end of their source code you'll find the `<Chart .../>` component from React Google Charts.

<iframe src="https://codesandbox.io/embed/cube-react-google-charts-basic-example-kvoi8?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=dark"
  style={{ width: "100%", height: "500px", border: 0, borderRadius: "4px", overflow: "hidden" }}
  title="Cube + React-Google-Charts Basic Example"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

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.

<iframe src="https://codesandbox.io/embed/cube-react-google-charts-dashboard-example-igob6?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=dark"
  style={{ width: "100%", height: "500px", border: 0, borderRadius: "4px", overflow: "hidden" }}
  title="Cube + React-Google-Charts Dashboard Example"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

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](https://fivethirtyeight.com/features/a-nerds-guide-to-the-2229-paintings-at-moma/)" by *FiveThirtyEight*, "[MoMA on GitHub](http://research.kraeutli.com/index.php/2015/09/moma-on-github/)" by *YYYY-MM-DD*, and this [tweet](https://twitter.com/lubar/status/626349654830092289) 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](https://www.react-google-charts.com/) and [Google Charts](https://developers.google.com/chart/interactive/docs) are capable of. You'll find even more chart types, configuration options, and advanced features.

**Also, thanks for learning about [Cube](https://cube.dev) 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](https://github.com/cube-js/cube.js) 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! 🎫

Igor Lukanin

Google Charts

React-Google-Charts: Building a Dashboard with a React Wrapper for Google Charts

Google Charts Dashboard: a Tutorial with an Artistic Touch of MoMA

On behalf of the Cube.js team, I'm proud to present an open-source list of awesome data visualization tools that we've built to help you choose the best charting libraries and other tools for your needs. It's available at [awesome.cube.dev](https://awesome.cube.dev) and here's the story behind it.

Have you ever wondered which tool or library to choose to add a chart, a map, or maybe a data grid to your app built with the `%BEST_FRONTEND_FRAMEWORK%` and the `%BEST_PROGRAMMING_LANGUAGE%`?

I know for sure that you have! Every other week someone from the [Cube.js community](https://slack.cube.dev) asks for advice on choosing a dataviz tool. So, I decided to talk to the community and run a [survey](https://dev.to/cubejs/dev-survey-front-end-data-visualization-tools-1f37) that got dozens of replies.

Let me share what I learned.

## Choosing a tool is hard 😬

I discovered that there're two types of criteria that developers evaluate when the need to choose a dataviz tool arise.

**First, you need to check if a particular tool is compatible with the technology stack that you're using,** and by that I mean the front-end framework and the programming language. Obviously, [Recharts](https://recharts.org/en-US/) is a neat tool but there's no way to use it in a Vue app because it's purposefully built for React. Same is true for the language: according to the survey, *2/3 of all developers use TypeScript*, so making sure that the tool has built-in type definitions or something available via [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped) is also crucial.

**It's also nice to check the license.** Discovering that something that you've already built into your app is not open-source and free to use may be painful. In the other case, when you specifically look for a paid tool with enterprise support, checking the license and pricing beforehand is crucial as well. According to the survey, *20 % of all developers use paid tools.*

**Then, you'll see how easy it is to get started, the hard way.** The adoption curve is heavily influenced by the ease of use and available docs and examples. Developers particularly praised the tools that have *readily available "getting started" pages with code examples* as well as the tools with *excessive number of examples.* [D3.js](https://observablehq.com/@d3/gallery) and [ECharts](https://echarts.apache.org/examples/en/index.html) are obvious winners in this category.

**In the end, you might face the sad truth: a tool is rooted in the past.** Your success will depend on the flexibility that a tool can provide for your use cases. And if it can't, soon you'll find yourself checking if there's much activity in the issues and pull requests sections on GitHub. Let's hope you'll find that a tool currently has a vibrant and active community.

## Now, choosing a tool is easy 😎

Equipped with this evidence, we've committed to solve the dataviz tools choice problem once and for all. We've built an open-source list of data visualization tools for software developers that will support you at every step.

In the very beginning, you'll have the chance to pick the front-end framework of your choice and specify if you care about TypeScript support. If you're an open-source aficionado, there's an option for that, too. Also, if you come for something specific (e.g., a data grid), you'll have a filter for that as well.

![Filters](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ylim2ipawsvzbatze6z6.png)

In an instant, you'll see the awesome tools matching your criteria. For those tools that gathered a lot of mentions in the survey results, you'll see badges like "Easy to customize" or "Full-fledged" that you can use to set expectation.

![Cards](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yve18kj4es537noo7s30.png)

Definitely feel free to pick some candidates and deep dive into their pages. You'll be able to build an understanding of what to expect in terms of flexibility and the community dynamics. Checking the last release date and the number of stale issues are also wise things to do.

![Data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0z9v5w6nv65liyc6bsd.png)

Ready to get started? You'll find links to tutorials and guides that, hopefully, will help you get on track. And if you're stuck, there are a few links for that, too.

As the last but not the least resort, you can always come to the [Cube.js community](https://slack.cube.dev) on Slack. It has thousands of developers building apps for which Cube.js serve as the open-source API layer that delivers data to the dataviz tools on the front-end.

![Getting Started and Getting Help](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtmpivikvtad3n1zf621.png)

**Now, it's time to visit [awesome.cube.dev](https://awesome.cube.dev) and see it in action!** If you like it, don't hesitate to share a link with your friends. In any case, leave us a comment in Slack: we'd love to know what you think 😇

*P. S. Just like [Cube.js](https://github.com/cube-js/cube.js), awesome.cube.dev is [open-source](https://github.com/cube-js/awesome-tools). We appreciate your issues, suggestions, and pull requests.*

Data Visualization

Awesome dataviz tools for software developers 📊📈

React Pivot Table with AG Grid and Cube

Data is the new oil, and it's still true in 2021. However, to turn data into insights, we need to analyze and visualize. **So, here's the question: how to pick the right tool? 🛠**

In this post we're going to go through JavaScript frameworks and libraries that you can use to visualize your data. And I'd like to do a bit more than just list a few frameworks — I'm going to divide the list by the type of data or data visualization because "one size" doesn't fit all. There are different kinds of data, and each needs a specific visualization strategy.

We'll go through...
1. 📈 general-purpose charting libraries
2. 📉 low-level and complex charting libraries
3. 🏁 tables and data grids
4. ⏰ timeline charts & time-based tools
5. 🗺 geospatial and mapping tools
6. ⛅️ word clouds
7. 🌎 3D visualization tools

Also, to help you choose the right tool for your project, I'm going to include a brief summary of each framework, i.e.

- 💵 whether it's paid or open-source
- ⭐️ number of stargazers on GitHub, if it's open source
- 📅 when it was last released (as of today)
- 🧱 the size of the bundle (unpacked size on npm), and
- 🔌 whether it's specific for a particular framework (e.g., React) or it can be used in any JavaScript-based project.

I decided to sort the frameworks and libraries by the number of stargazers because it roughly approximates their popularity and community size (but that's debatable).

Also note that you won't find here an extensive list of every data visualization library which can be found on the internet. However, I hope that this post will help you build your own understanding of the ecosystem.

*📊 And the icing on the cake: I'll provide links to guides and tutorials on data visualization tools built by the Cube.js team. [Cube.js](https://cube.dev) helps to create an API over any database with ease, and it's often used as a very performant backend for analytical data visualizations.*

## 1. General-purpose charting libraries

The first category is probably the most popular. Most data can be visualized with charts: either temporal (when you include time values to the plot, e.g., on the X axis), or non-temporal (when you have only numeric values or labels). Those include bar chart, pie chart, line graph, and similar. And because it's the most used type of charts, there are numerous options to choose from.

### [Chart.js](https://www.chartjs.org)

💵 OSS / ⭐️ 51.8K / 📅 19 Oct 2020 / 🧱 1.44 MB / 🔌 universal

*Simple yet flexible JavaScript charting for designers & developers*

The most popular open-source library for building responsive bar, pie, and line charts. I'd say this is the go-to library for most of the projects, as it fits most of the use cases.

*📊 See [Chart.js Example with Dynamic Dataset](https://cube.dev/blog/chart-js-example-with-dynamic-dataset/) to learn how to modify the data being displayed with Chart.js on-the-fly.*

### [Recharts](https://recharts.org/en-US/)

💵 OSS / ⭐️ 15.6K / 📅 13 Jan 2021 / 🧱 11.2 MB / 🔌 React

*A composable charting library built on React components*

As per description, "It was built on top of SVG elements with a lightweight dependency on D3 submodules." It's a good choice for React-based projects, because you can use it natively as a component, e.g.

```jsx
<LineChart width={500} height={300} data={data}>
<XAxis dataKey="name" />
<YAxis />
<CartesianGrid stroke="#eee" strokeDasharray="5 5" />
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
<Line type="monotone" dataKey="pv" stroke="#82ca9d" />
</LineChart>
```

*📊 See [React Dashboard: an Ultimate Guide](https://react-dashboard.cube.dev) to for a comprehensive all-in-one walkthrough exploring how to build a dashboard with Recharts and connect it to a backend.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7o47emtffwpcse61q20j.png)

### [Highcharts](https://www.highcharts.com/blog/products/highcharts/)

💵 Paid & non-commercial licenses / ⭐️ 9.8K / 📅 22 Oct 2020 / 🧱 43.2 MB / 🔌 universal

*Highcharts is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers.*

Highcharts is good for large companies whose products rely heavily on data visualization. You can see the code on GitHub, try and use it for non-commercial purposes. And then you can purchase Highcharts license just for Hightcharts or Highcharts plugin for Stocks, Maps, or Gantt if you'd like to use it for commercial purposes. We'll cover those later in this post as well.

*📊 See [React Highcharts Example with Cube.js](https://cube.dev/blog/react-highcharts-example/) for a practical tutorial on creating a dashboard with numerous Highcharts components.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pwp27nnp2x11ku5e0a90.png)

### [Chartist.js](http://gionkunz.github.io/chartist-js/)

💵 OSS / ⭐️ 12.4K / 📅 11 Sep 2019 / 🧱 535 KB / 🔌 universal

*Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries.*

This library is not as actively maintained as others, however, it still worths a mention because of its size with no dependencies. Less than a megabyte, wow!

Just like others, it uses SVGs, it's flexible and it has clear separation of concerns, i. e., CSS is in CSS and JS is in JS, which may not fit all projects, considering that a lot of projects are using CSS-in-JS approach, yet it still deserves our attention.

### [Victory](https://formidable.com/open-source/victory/)

💵 OSS / ⭐️ 8.6K / 📅 1 Sep 2020 / 🧱 2.81 MB / 🔌 React

*An ecosystem of composable React components for building interactive data visualizations.*

Built by [Formidable Labs](https://formidable.com), a company behind such tools as [urqls](https://formidable.com/open-source/urql/) and [Spectacle](https://formidable.com/open-source/spectacle/). Provides an opinionated, but fully overridable React components to use both in web and mobile ([victory-native](https://github.com/FormidableLabs/victory-native)).

### [React-vis](https://uber.github.io/react-vis/)

💵 OSS / ⭐️ 7.6K / 📅 19 Apr 2019 / 🧱 1.81 MB / 🔌 React

*A collection of React components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, contour plots, hexagon heatmaps, pie and donut charts, sunbursts, radar charts, parallel coordinates, and tree maps.*

This library is React-friendly, high-level and customisable, expressive and industry-strong, because it is backed by Uber, so chances are you'll get your answers in case you bump into an issue.

### [amCharts](https://www.amcharts.com/javascript-charts/)

💵 OSS / ⭐️ 864 / 📅 18 Dec 2020 / 🧱 22.6 MB / 🔌 universal

*A go-to library for data visualization. When you don't have time to learn new technologies.*

This is not as popular as the rest, however, it's actively maintained and claims to be easy to use. It could be a good choice if you'd like to combine it with other data viz library for geo and timeline data. I'll cover those in Geo and Timeline sections.

### [AnyCharts](https://www.anychart.com)

💵 Paid & non-commercial licenses / ⭐️ 284 / 📅 29 Sep 2020 / 🧱 11.9 MB / 🔌 universal

*Interactive JavaScript charts designed to be embedded and integrated into web, desktop, and mobile apps.*

This is a paid library with non-commercial license, which could work well for a company who wants to save time and money on charts development, because a lot of charts pre-configured for you, just insert your data. Even such rear charts as Jump Line Chart, Sunburst Chart, or Circular Gauge.

## 2. Low-level and complex dataviz tools

Here go tools for a more complicated and more advanced way to visualize your data. The main reason to go with this approach is either because none of the simple charts can be used to visualize your data, or you need to have more advanced interactivity on your elements.

This approach requires a more advanced and specific knowledge in the area, e.g., SVG drawing or WebGL. Not everyone has access to such resource, so that's why there are libraries that expose a much simpler API for simple cases.

### [D3.js](https://d3js.org)

💵 OSS / ⭐️ 95.4K / 📅 22 Jan 2021 / 🧱 1 MB / 🔌 universal

*D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas, and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.*

This is probably the most popular low-level data visualization library on the internet. There's a few keys to its popularity: first, its flexibility (many other data visualization tools are based on D3.js, we'll discuss them below); second, it's massive [examples gallery](https://observablehq.com/@d3/gallery) which contains literally every visual you can imagine.

*📊 See [D3 Dashboard Tutorial](https://d3-dashboard.cube.dev) for a good jump-starting point to learn how to use D3.js with a backend.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/07cqexvjwztiegaj3jik.png)

`<d3-based-tools>`

And here are a few D3-based libraries: 

### [Plotly.js](https://plotly.com/javascript/)

💵 OSS / ⭐️ 12.7K / 📅 21 Dec 2020 / 🧱 60.4 MB / 🔌 universal

*Built on top of D3.js and stack.gl, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.*

Plotly allows you to combine the best of two words: simple api and power of a D3.js. It's good for quick prototyping as well as complex projects that require complicated graphs and need to be done in a timely manner.

Plotly also has commercial offerings, but that's more in regard to its end-to-end development & deployment platform, Dash Enterprise.

### [C3.js](https://c3js.org)

💵 OSS / ⭐️ 9K / 📅 8 Aug 2020 / 🧱 1.46 MB / 🔌 universal

*D3-based reusable chart library.*

### [Semiotic](https://semiotic.nteract.io)

💵 OSS / ⭐️ 2.1K / 📅 21 Jan 2021 / 🧱 2.77 MB / 🔌 React

*Semiotic is a data visualization framework combining React & D3*

### [Taucharts](https://taucharts.com)

💵 OSS / ⭐️ 1.9K / 📅 26 Feb 2020 / 🧱 1.54 MB / 🔌 universal

*Taucharts is a data-focused JavaScript charting library based on D3 and designed with passion.*

`</d3-based-tools>`

### [Apache ECharts](https://echarts.apache.org/en/index.html)

💵 OSS / ⭐️ 44.9K / 📅 16 Jan 2021 / 🧱 36.3 MB / 🔌 universal

*A Declarative Framework for Rapid Construction of Web-based Visualizations*

Another open source charting library that has enormous pre-defined charts ready to be used. The reason I put it in this category, is because not only it has simple charts, like line and bar graphs, but also more complicated ones, like 3D globe, 3D lines, Scatter GL and others. Checkout their [example page](https://echarts.apache.org/examples/en/index.html) and prepare to be amazed.

### [Raphaël](https://dmitrybaranovskiy.github.io/raphael/)

💵 OSS / ⭐️ 10.8K / 📅 14 Aug 2019 / 🧱 1.11 MB / 🔌 universal

*Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web*

Raphael is similar in D3.js in a way that it also allows you to draw your own svg graphics in html. E.g.

```js
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");
```

It hasn't been actively maintained and now most of the preference goes to D3.js. Yet it's still relevant and last release wasn't that long ago, so it does deserve a mention in the list.

## 3. Tables and data grids

Some data is tabular and thus belongs to a table. But tables are more framework-specific, so it's hard to collect data tables for every framework in one post. However, here are a few options.

### [ag-Grid](https://www.ag-grid.com)

💵 OSS & paid / ⭐️ 6.9K / 📅 15 Jan 2021 / 🧱 n/a / 🔌 universal

*Advanced Data Grid / Data Table supporting JavaScript / React / AngularJS / Web Components*

Or, as it claims on its website, "The Best JavaScript Grid in the World." It's packed with features and has both OSS and Enterprise versions with bindings for vanilla JS, React, Angular, Vue, and even Polymer.

### [Material UI Data Grid](https://material-ui.com/components/data-grid/)

💵 OSS & paid / ⭐️ 272 / 📅 26 Jan 2021 / 🧱 n/a / 🔌 React

*A fast and extendable data table and data grid for React.*

It's a feature-rich component which is complementary to the whole [Material UI](https://material-ui.com) set of React components. It's available in MIT and commercial versions, too.

There's also some competition here. For the sake of comparison, I should mention the [data table](https://ant.design/components/table/) component of Ant Design library, which is great to use if you need a complete set of UI components.

## 4. Timeline charts & time-based tools

Not all charting libraries include timelines and Gantt charts, they're quite unique in that sense. So if you have some time-based data to plot, then you may be interested in these libraries or plugins.

### [Highcharts Gantt](https://www.highcharts.com/blog/products/gantt/)

Similar to word clouds, you can have Highcharts Gantt plugin provided by the company. Check out out their page to learn more about it.

### [amCharts timeline](https://www.amcharts.com/timeline-chart/)

Similar approach: get the main amCharts library and use additional timeline plugin.

### [vis-timeline](https://github.com/visjs/vis-timeline)

💵 OSS / ⭐️ 3.3K / 📅 3 years ago / 🧱 n/a / 🔌 universal

*Create a fully customisable, interactive timelines and 2d-graphs with items and ranges.*

This is an open-source alternative to the above two libs. It's quite flexible, well-designed, although its last release was about 3 years ago.

## 5. Geospatial and mapping tools

Now we've arrived to geo data, the type of data that has a geographic component to it and should have map-based data visualizations.

### [Leaflet](https://leafletjs.com)

💵 OSS / ⭐️ 30K / 📅 4 Sep 2020 / 🧱 5.96 MB / 🔌 universal

*Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of gzipped JavaScript plus 4 KB of gzipped CSS code, it has all the mapping features most developers ever need.*

Leaflet is lightweight, simple, and flexible, and is probably the most popular open-source mapping library at the moment. Leaflet was developed by Vladimir Agafonkin, who is currently in Mapbox (see below), and OSS community.

There are numerous tutorials and guides on how to work with leaflet. So it's very cost and time efficient to start and keep working with Leaflet.

### [Mapbox](https://www.mapbox.com)

💵 Free-ish & paid / ⭐️ 7.2K / 📅 28 Jan 2021 / 🧱 34 MB / 🔌 universal

*Mapbox is a mapping and location cloud platform for developers.*

These guys provide SDKs and APIs to companies like Foursquare, Lonely Planet, and Facebook. You can do a lot with Mapbox, and their APIs are a pleasure to work with, well-documented, and well-supported. Check out [their examples page](https://docs.mapbox.com/mapbox-gl-js/example/).

Mapbox isn't completely free. It has a free tier for low volume apps. So it's free for up to 25,000 mobile users and 50,000 web loads. Beyond that you'd need to pay per additional requests.

*📊 See [JavaScript Map Data Visualization with Mapbox](https://mapbox-guide.cube.dev) for a complete guide on Mapbox and different kinds of maps, from heatmaps to choropleths.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/btrt0mfvmctmm0cdjgh7.png)

### [Google Maps](https://developers.google.com/maps/documentation/javascript/visualization)

Google Maps can do a lot more than just show places on a map. You can map data across the world, create heatmaps, and even size circles.

Google has a CDN URL you'd need to include in your project or use a framework-specific wrapper, like [`@react-google-maps/api`](https://www.npmjs.com/package/@react-google-maps/api).

### [amCharts maps](https://www.amcharts.com/javascript-maps/)

If your project is already using amCharts, then you might be interested in using amCharts maps. There is no need to install anything extra, the main amCharts package already includes everything needed for creating a map visualization.

## 6. Word clouds

Not all data is quantifiable. Some data can only be illustrated with words. This is a perfect use case scenario for word clouds. A few libraries allow you to do those.

### [d3-cloud](https://www.jasondavies.com/wordcloud/)

💵 OSS / ⭐️ 3.3K / 📅 3 years ago / 🧱 n/a / 🔌 universal

Great library to use if you already have D3.js as a part of your code ecosystem.

### [amCharts word clouds](https://www.amcharts.com/demos/word-cloud/)

This is a plugin for amCharts. See more details about amCharts earlier in this post. To create word cloud you'd need the main library + the `wordCloud` plugin.

### [Highcharts word clouds](https://www.highcharts.com/docs/chart-and-series-types/word-cloud-series)

Similar to amCharts word clouds, if you want to make word clouds with Highcharts, you'd need `modules/wordcloud.js` module.

## 7. 3D visualization tools

While every tool we've observed above was focused on planar, two-dimensional data visualizations, there's one more dimension to it 😀 The following tools help create 3D visuals.

### [Three.js](https://threejs.org)

💵 OSS / ⭐️ 66.6K / 📅 24 Dec 2020 / 🧱 24.4 MB / 🔌 universal

*The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples.*

Three.js is a different take on visualizing data. It's used to create and display animated 3D computer graphics in a web browser using WebGL. Three.js can be used not only visualize data, but also create such pieces of art as [Littlest Tokyo](https://threejs.org/examples/#webgl_animation_keyframes). The data can take ANY form your like. Literary. It's only limited by your creativity.

### [vis-graph3d](https://github.com/visjs/vis-graph3d)

💵 OSS / ⭐️ 44.9K / 📅 16 Jan 2021 / 🧱 36.3 MB / 🔌 universal

*Graph3d is an interactive visualization chart to draw data in a three dimensional graph. You can freely move and zoom in the graph by dragging and scrolling in the window.*

This is a very interesting lightweight alternative to D3.js and Three.js.

## Final remarks

Honestly, it's impossible to include everything in one list. But I hope this post helped you get a better idea about the "big players" and types of data visualizations.

It's worth mentioning that to communicate your data better to your user, it's always a good idea to mix and match different types of data visualizations. Moreover, you can also have a date formatting library (such as [Moment.js](https://momentjs.com)) or number formatting library (such as [numeral.js](http://numeraljs.com)) that could accompany your graphs and highlight any special or outstanding number in your dataset. 

Also, if you need an API to serve data to your charts or data visualization components, please consider to use [Cube.js](https://cube.dev).

If you have any particular recommendation or personal experience with any of the listed libraries to share, please feel free to reach out to me and leave a comment on [Cube.js Slack](https://slack.cube.dev)! 🙌

Nikita Kakuev

Understanding front-end data visualization tools ecosystem in 2021

JavaScript Map Data Visualization with Mapbox

Nakshatra Mukhopadhyay

Tableau-like Charts with MuzeJS, Cube.js, and React

Started as a simple charting tool for monitoring a snow depth near the owner's country house in Norway, Highcharts quickly became one of the most popular visualization libraries. It provides a lot of great built-in interactive features and is easy to use. 

In this tutorial we are going to build a simple e-commerce dashboard with Cube.js and Highcharts. We’ll use the main Highcharts library, as well as Maps, Stock, and Solid Gauge modules.

Please keep in mind that Highcharts libraries are available under different licenses, depending on whether it is intended for commercial/government use, or for personal or non-profit projects. Make sure to check its <a href="https://shop.highsoft.com" target="_blank">license page</a>. 

Below, you can see the demo of the dashboard that we’re going to build.

![Highcharts Demo](https://media.graphcms.com/5o7cMTEST2yICLIt8TCQ)

You can find [a live demo here](https://highcharts-demo.cube.dev/) and [the source code is available on Github](https://github.com/cube-js/cube.js/tree/master/examples/highcharts).

To implement this example, we’ll need:
- Database (we will use PostgreSQL) with sample data
- Cube.js backend to handle communications between our database and the frontend
- The frontend application (we will build one with React)

## Analytics Backend

We’re going to use a PostgreSQL database and an example e-commerce dataset. Use the following commands to download and import the example dataset.

```bash
$ curl http://cube.dev/downloads/ecom-dump.sql > ecom-dump.sql
$ createdb ecom
$ psql --dbname ecom -f ecom-dump.sql
```
Next, let’s install the Cube.js CLI and create a new project.
```bash
$ npm -g install cubejs-cli
$ cubejs create highcharts -d postgres
```
Cube.js uses environment variables inside the `.env` file for configuration. Update the contents of the `.env` file with your own database credentials. 
```bash
CUBEJS_DB_NAME=ecom
CUBEJS_DB_TYPE=postgres
CUBEJS_API_SECRET=SECRET
```
Now, let’s start with the Cube.js backend.
```bash
$ npm run dev
```
At this step, you can find the Cube.js playground at [http://localhost:4000](http://localhost:4000/).

Here, you can see all the tables from our database and we can choose any of them to generate the schema. 

[The Cube.js Data Schema](https://cube.dev/docs/getting-started-cubejs-schema) concept is based on multidimensional analysis and should look familiar to those with experience in OLAP cubes. 

The two main entities are measures and dimensions:
[dimensions](https://cube.dev/docs/dimensions) are ”as is” properties that we get from our database, but [measures](https://cube.dev/docs/measures#top) are results of aggregation operations like count, sum, average, and others. 

In this example, we need an `orders` and `users` table. Please, check it and click “Generate Schema.” Cube.js will then generate `Orders.js` and `Users.js` files inside the `schema` folder.

![Cube.js schema generation](https://media.graphcms.com/k3o6VAoLQh2ljdDoZbv2)

Cube.js data schema is javascript code and can be easily edited. You can also [dynamically generate schema](https://cube.dev/docs/schema-generation), if needed. 

Let’s update the `schema/Users.js` file. 

We’ll keep only `state`, `id` dimensions, and `count` measure because we’ll need to use them in our example.

```js
cube(`Users`, {
  sql: `SELECT * FROM public.users`,
  dimensions: {
    state: {
      sql: `state`,
      type: `string`
    },
    id: {
      sql: `id`,
      type: `number`,
      primaryKey: true
    }
  }
});
```

That’s it for our backend. We’ve configured the database and created the Cube.js. backend. Now, we’re ready to start working on our frontend application.

## Frontend Dashboard with Highcharts
Let’s generate our app with Cube.js templates. Navigate to the Dashboard App tab and select “Create custom application” with React and Ant Design. 

![Create custom app](https://media.graphcms.com/pZKj23M0SHaupHIwWwiJ)

It will take some time to create a dashboard app and install dependencies. Once it is finished, you should see the `dashboard-app` folder inside your project’s folder. 

Next, let’s install the dependencies we’ll need. Run the following commands in the `dashboard-app` folder.

```bash
$ cd dashboard-app
$ npm install --save highcharts highcharts-react-official @highcharts/map-collection
```

The command above installs the following dependencies:
- <a href="https://www.npmjs.com/package/highcharts" target="_blank">Highcharts</a>.
- <a href="https://www.npmjs.com/package/highcharts-react-official" target="_blank">Highcharts React wrapper</a>.
- <a href="https://www.npmjs.com/package/@highcharts/map-collection" target="_blank">Highcharts map collection for our map chart wrapper</a>. 

Feel free to remove all the files inside the `src` folder and the `page` folder, as well as update the `dashboard/index.js` file with the following content.

```js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
 <React.StrictMode>
   <App></App>
 </React.StrictMode>,
 document.getElementById('root')
); 
serviceWorker.unregister();
```

Our application will have the following structure:
- `App` as the main app component
- `Dashboard` component that stores data and manages the app state
- `Map`,  `Line`,  `Stock`, and other chart components that manage chart render according to applications data and state.

Let’s create the `<Dashboard />` component in the `dashboard-app/src/components/Dashboard.js` file with the following content. (We’ll create the `<Map />` component later):

```jsx
import React from 'react';
import { Layout } from 'antd';
import { useCubeQuery } from '@cubejs-client/react';
import Map from './Map';
const Dashboard = () => {
 const { resultSet } = useCubeQuery({
   measures: ['Orders.count'],
   dimensions: ['Users.state'],
   timeDimensions: [
     {
       dimension: 'Orders.createdAt',
       dateRange: 'last year',
     },
   ],
 });
if (!resultSet) {
  return “Loading…”;
}
 const data = regions.tablePivot().map(item => [item['Users.state'], parseInt(item['Orders.count'])])
 return (
   <Layout>
     <Map data={data} />
   </Layout>
 );
};
export default Dashboard;
```

In the above snippet, we did several things. We imported [useCubeQuery](https://cube.dev/docs/@cubejs-client-react#use-cube-query) React hook first.
```jsx
import { useCubeQuery } from "@cubejs-client/react";
```
Next, to render the amount of orders in each state, we need to change the data into Highcharts’ format, where the first element is the state key and the second element is the value.

```js
[
    ["us-ca",967],
    ["us-ny",283],
    ["us-wa",239],
    ["us-il",205],
    ["us-tx",190]
]
```

We’re using [resultSet.tablePivot()](https://cube.dev/docs/@cubejs-client-core#result-set-table-pivot) to access data returned from the backend and to prepare it for rendering.

```jsx
const data = regions.tablePivot().map(item => [item['Users.state'], parseInt(item['Orders.count'])])
```

Now, we’re ready to pass our data to the Map chart. Let’s create a new `dashboard-app/src/components/Map.js` file with the following content.

```jsx
import React, { useState, useEffect } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import highchartsMap from 'highcharts/modules/map';
import mapDataIE from '@highcharts/map-collection/countries/us/us-all.geo.json';
highchartsMap(Highcharts);
const staticOptions = {
 chart: {
   styledMode: true,
 },
 credits: {
   enabled: false,
 },
 title: {
   text: 'Orders by region<small>Highcharts Map API</small>',
   useHTML: true,
 },
 colorAxis: {
   min: 0,
 },
 tooltip: {
   headerFormat: '',
   pointFormat: `
     <b>{point.name}</b>: {point.value}`,
 },
 colorAxis: {
   minColor: '#FFEAE4',
   maxColor: '#FF6492',
 },
 series: [
   {
     name: 'Basemap',
     mapData: mapDataIE,
     borderColor: '#FFC3BA',
     borderWidth: 0.5,
     nullColor: '#FFEAE4',
     showInLegend: false,
     allowPointSelect: true,
     dataLabels: {
       enabled: true,
       format: '{point.name}',
       color: '#000',
     },
     states: {
       select: {
         borderColor: '#B5ACFF',
         color: '#7A77FF',
       },
     },
   },
 ],
};
export default ({ data }) => {
 const [options, setOptions] = useState({});
 useEffect(() => {
   setOptions({
     ...staticOptions,
     series: [
       {
         ...staticOptions.series[0],
         data: data,
       },
     ],
   });
 }, [data]);
 return (
   <HighchartsReact
     highcharts={Highcharts}
     constructorType={'mapChart'}
     options={options}
   />
 );
};
```

Inside the `Map.js` file, we imported `useState`, `useEffect` hooks, and a bunch of Highcharts components. Then, we defined chart options based on <a href="https://www.highcharts.com/demo/maps" target="_blank">Highcharts Map API</a> specs.
In `staticOptions`, we can set map styling, source, data, event handlers, and other options.

Highcharts has a wide selection of <a href="https://code.highcharts.com/mapdata/" target="_blank">SVG maps</a> to use. We’ve picked <a href="https://jsfiddle.net/gh/get/jquery/1.11.0/highslide-software/highcharts.com/tree/master/samples/mapdata/countries/us/us-all" target="_blank">this one</a>.

Lastly, we merged our `staticOptions` and `props.data` and then passed it to the Highcharts component.

That’s all for our `<Map/>` component.

Now, we just need to update the ‘dashboard-app/App.js’ to include the `<Dashboard />` component:

```diff
+ import Dashboard from './components/Dashboard';
- <Header />
- <Layout.Content>{children}</Layout.Content>
+ <Dashboard />
```

...and we’re ready to check out our first chart! 

Navigate to [http://localhost:3000](http://localhost:3000) in your browser, and you should be able to see the map chart that we’ve just built.

A similar workflow can be used to create other chart types, as in the GIF below.

![Highcharts Demo](https://media.graphcms.com/5o7cMTEST2yICLIt8TCQ)

- Define the static chart options, according to Highcharts API <a href="https://api.highcharts.com/highcharts/" target="_blank">documentation</a>. 
- Add data to options.series.
- Pass options to the Highcharts component.

The full source code of the above dashboard is [available on Github](https://github.com/cube-js/cube.js/tree/master/examples/highcharts), and you can check [the live demo here](https://highcharts-demo.cube.dev/).

I hope you’ve found this tutorial helpful. If you have any questions or any kind of feedback, please let us know in this [Slack channel](http://slack.cube.dev/).

Yulia Kotova

React Highcharts Example with Cube.js

Artyom Keydunov

Amazon Athena

Building an Open Source Web Analytics Platform

I've already covered building a static dashboard with [Cube.js](https://github.com/cube-js/cube.js) and Chart.js in [this tutorial](https://cube.dev/blog/node-express-analytics-dashboard-with-cubejs/). Now, I’m going to show you how to dynamically change the underlying chart’s data based on the user’s input.

We’ll let the user pick a date range and based on that, reload the chart. When a user picks a new set of dates, a new request will be sent to the Cube.js API. The Cube.js server will generate new SQL code, execute it against the database, and send the result back to the client. And finally, the client re-renders a chart with the new data.

Here is a [CodeSandbox demo](https://codesandbox.io/s/chartjs-example-with-dynamic-dataset-w40tb) of what we are going to build. You can click "Open in Editor" to check the source code.

<iframe src="https://codesandbox.io/embed/youthful-stonebraker-w40tb?fontsize=14&hidenavigation=1&theme=dark"
        style={{ width: '100%', height: 500, border: 0, borderRadius: 4, overflow: 'hidden' }}
        title="Chart.js Example with Dynamic Dataset"
        allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
        sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

## Setting up an API

We're going to create a new Cube.js app and connect it to a cloud-based Postgres dataset.

First, make sure you have [Docker](https://www.docker.com/get-started) installed on your machine. You can also get started using [Node.js](https://cube.dev/docs/getting-started).

Second, create new a folder for your Cube.js app and navigate to it:

```bash
mkdir chartjs-dynamic-data
cd chartjs-dynamic-data
mkdir schema
```

Then, create a new `docker-compose.yml` file with Cube.js configuration. We'll use environment variables for configuration and instruct Cube.js to connect to a publicly available cloud-based Postgres dataset:

```bash
cat > docker-compose.yml << EOL

version: '2.2'

services:
  cube:
    image: cubejs/cube:latest
    ports:
      - 4000:4000  # Cube.js API and Developer Playground
      - 3000:3000  # Dashboard app, if created
    environment:
      - CUBEJS_DB_TYPE=postgres
      - CUBEJS_DB_HOST=demo-db.cube.dev
      - CUBEJS_DB_USER=cube
      - CUBEJS_DB_PASS=12345
      - CUBEJS_DB_NAME=ecom

      - CUBEJS_API_SECRET=SECRET
      - CUBEJS_DEV_MODE=true
    volumes:
      - .:/cube/conf
EOL
```

The last step is to run Cube.js:

```bash
docker compose up
````

Now you can open [localhost:4000](http://localhost:4000) in your browser. You will see [Developer Playground](https://cube.dev/docs/dev-tools/dev-playground), a companion tool that will help you develop your Cube.js app.

We're going to use it to generate the data schema for the database. Please navigate to the Schema tab, select the `public` schema, and click "Generate Schema". Great! Now you can navigate to the Build tab to play around with the data:

![Developer Playground](https://cubedev-blog-images.s3.us-east-2.amazonaws.com/86598a68-2468-414a-b841-b5b95194bc2e.png)

There are multiple ways to [deploy Cube.js apps](https://cube.dev/docs/deployment). In this tutorial, we are going to use the Cube.js API deployed to [Cube Cloud](https://cube.dev/cloud) at `https://awesome-ecom.gcp-us-central1.cubecloudapp.dev/cubejs-api/v1`.

## Simple Chart

We'll use [CodeSandbox](https://codesandbox.io), an online editor for rapid web development, to build the front-end app. You can check out the final [source code](https://codesandbox.io/s/chartjs-example-with-dynamic-dataset-w40tb) and the demo app. Feel free to fork it and play around.

We are going to use the Vanilla template from CodeSandbox. To keep things simple, we'll not add any framework, such as React or Vue.

![CodeSandbox](https://cubedev-blog-images.s3.us-east-2.amazonaws.com/218e6fd4-d2d6-4087-a478-cec51e7e7a90.png)

The first step is to include the Cube.js client and Chart.js libraries. Insert the following code inside the `dependencies` key of the `package.json` file. It should look like this:

```json
// ...

  "dependencies": {
    "@cubejs-client/core": "0.27.15",
    "chart.js": "3.2.1",
    "moment": "2.29.1",
    "parcel-bundler": "^1.6.1"
  },

// ...
```

To initialize the Cube.js client, we need to pass an API URL along with the secret. We'll also import the libraries we've just added. Add these lines to the `index.js` file:

```javascript
import cubejs from "@cubejs-client/core";
import Chart from "chart.js/auto";
import moment from "moment";

const cubejsApi = cubejs(
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE1OTQ2NjY4OTR9.0fdi5cuDZ2t3OSrPOMoc3B1_pwhnWj4ZmM3FHEX7Aus",
  { apiUrl: "https://awesome-ecom.gcp-us-central1.cubecloudapp.dev/cubejs-api/v1" }
);
```

Once the client is initialized, we can request data from the API and visualize it. The `load` function accepts a query, which is a plain JavaScript object, and returns a promise. You can learn more about the [query format](https://cube.dev/docs/query-format) in the docs.

```javascript
cubejsApi
  .load({
    measures: ["Orders.count"],
    timeDimensions: [ {
      dimension: "Orders.createdAt",
      granularity: `day`,
      dateRange: [`08/01/2020`,`09/01/2020`]
    } ]
  })
  .then(resultSet => {
    new Chart(document.getElementById("chart"), {
      type: "line",
      options: {},
      data: chartJsData(resultSet)
    });
  });
```

We are loading `Orders.count`, which is grouped by the created day to plot as a line chart. To make this code work, we need to make a couple of things. First, add the `<canvas>` tag to the inside the `<body>` in the `index.html` file:

```html
<canvas id="chart"></canvas>
```

Next, we need to define the `chartJsData` function, which should accept a [resultSet](https://cube.dev/docs/@cubejs-client-core#result-set) returned from Cube.js and format it for Chart.js. Add this to the `index.js` file:

```javascript
var chartJsData = function (resultSet) {
  return {
    datasets: [
      {
        label: "Orders Count",
        data: resultSet.chartPivot().map(function (r) {
          return r["Orders.count"];
        }),
        backgroundColor: "rgb(255, 99, 132)"
      }
    ],
    labels: resultSet.categories().map(function (c) {
      return moment(c.x).format("DD MMM");
    })
  };
};
```

That is all we need to load the data and visualize it as a static line chart:

![Static Chart](https://cubedev-blog-images.s3.us-east-2.amazonaws.com/734dc84e-91de-4770-ac7b-527c8727107f.png)

## Dynamic Data

Next, we’re going to add a date range picker and load data dynamically based on the date range selected by the user.

Let's add the `flatpickr` dependency we'll be using as a lightweight date picker in the `package.json` file. It should look like this:

```json
// ...

  "dependencies": {
    "@cubejs-client/core": "0.27.15",
    "chart.js": "3.2.1",
    "moment": "2.29.1",
    "flatpickr": "4.6.9",
    "parcel-bundler": "^1.6.1"
  },

// ...
```

Next, let's import this library in the `index.js` file:

```
import flatpickr from "flatpickr";
```

Next, let’s wrap the code to render a chart into the `drawChart` function, which is going to accept two arguments: start date and end date.

```javascript
let chart;

var drawChart = function (startDate, endDate) {
  cubejsApi
    .load({
      measures: ["Orders.count"],
      timeDimensions: [
        {
          dimension: "Orders.createdAt",
          granularity: `day`,
          dateRange: [startDate, endDate]
        }
      ]
    })
    .then((resultSet) => {
      if (chart) {
        chart.data = chartJsData(resultSet);
        chart.update();
      } else {
        chart = new Chart(document.getElementById("chart"), {
          type: "line",
          options: {},
          data: chartJsData(resultSet)
        });
      }
    });
};
```

Besides making the `dateRange` dynamic, we’re also saving the current chart into the global variable `chart` so we can update it later when we need to re-render the chart.

Finally, we can add an input to the `index.html` file and make it a date range picker. Let's add a CSS import inside the `head` and an input inside the `body`:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

/// ...

<input id="dates" style="font-size: 20pt;" />
```

In the `index.js` file, after the `drawChart` function:

```javascript
const MIN_DATE = "2020-08-01";
const MAX_DATE = "2020-09-01";

flatpickr("#dates", {
  mode: "range",
  dateFormat: "Y-m-d",
  defaultDate: [MIN_DATE, MAX_DATE],

  onChange: function (selectedDates) {
    if (selectedDates.length === 2) {
      drawChart(selectedDates[0], selectedDates[1]);
    }
  }
});

drawChart(MIN_DATE, MAX_DATE);
```

That is it! Now we have a fully working dynamic and interactive chart.

![Dynamic Chart](https://cubedev-blog-images.s3.us-east-2.amazonaws.com/afb35c47-7dde-4170-8232-15705cdb6711.png)

And here's an interactive CodeSandbox that we've built. You can select different dates from the date picker and see how the chart is changing.

<iframe src="https://codesandbox.io/embed/youthful-stonebraker-w40tb?fontsize=14&hidenavigation=1&theme=dark&view=preview"
        style={{ width: '100%', height: 500, border: 0, borderRadius: 4, overflow: 'hidden' }}
        title="Chart.js Example with Dynamic Dataset"
        allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
        sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

If you have any questions about this tutorial or about [Cube.js](https://cube.dev) in general, feel free to ask them in [Slack](https://slack.cube.dev).

Chart.js

Chart.js Example with Dynamic Dataset

While working on [Cube.js](https://github.com/cube-js/cube.js), we’re seeing a lot of different visualization libraries. Given that Cube.js provides an API layer for analytics on top of an SQL database and doesn’t play on the visualization field, any charting library can be used to build dashboards with it. That’s why we’re always on a search for a nice and developer-friendly visualization library.

The list below is for React-specific libraries. I’ll try to build almost the same stacked bar chart with axes formatting, legend and tooltip using every one of it. For the data backend, we’ll use Cube.js hosted on Heroku. I’ll also use [Cube.js React binding](https://cube.dev/docs/@cubejs-client-react), which uses the [render props](https://reactjs.org/docs/render-props.html) technique and doesn’t render anything itself, letting us build whatever we want with any charting library.

Along the way, I’ll also use two very handy libraries—`moment.js` and `numeral.js` for dates and numbers formatting, respectively.

As a data input, we are going to use the [resultSet.chartPivot()](https://cube.dev/docs/@cubejs-client-core#result-set-chart-pivot) method from the Cube.js Javascript client. It returns an array of data, and in our case, it looks like this:

```javascript
[
  {
    "x": "2017-01-01T00:00:00.000",
    "completed, Orders.count": 208,
    "processing, Orders.count": 252,
    "shipped, Orders.count": 233
  },
  {
    "x": "2017-02-01T00:00:00.000",
    "completed, Orders.count": 188,
    "processing, Orders.count": 209,
    "shipped, Orders.count": 222
  },
  …
]
```

Now, let’s jump to the list.

_If you don’t see your favorite library or just want me to add one more—just ping me in [this Public Slack Community](https://cubejs-community.herokuapp.com/). I’m happy to add as many libraries as I can to the list._


## Recharts

[Recharts](http://recharts.org) provides a set of modular charting components and does a great job by letting you mix those components together to easily build things like a [composed line and bar chart](http://recharts.org/en-US/examples/LineBarAreaComposedChart).

It is the most popular library to date. It has more than 11k stars on Github, but a huge number (600 to date) of open issues as well. 

The documentation is quite extensive but lacks details in some parts. You can find a bunch of examples at [Rechart’s website](http://recharts.org), which could be a good starting point to building your own charts.

Recharts has a bunch of options for customization. Besides that, it allows low-level customization via custom SVG elements.

Here is how to build our stacked bar chart in Recharts:

_In this and all the following examples I'm using `colors`, `dateFormatter`, and `numberFormatter` variables. Here is how they are defined:_

```jsx
const numberFormatter = item => numeral(item).format("0,0");
const dateFormatter = item => moment(item).format("MMM YY");
const colors = ["#7DB3FF", "#49457B", "#FF7C78"];
```

```jsx
export default ({ resultSet, colors, dateFormatter, numberFormatter }) => (
  <ResponsiveContainer width="100%" height={300}>
    <BarChart data={resultSet.chartPivot()}>
      <XAxis tickFormatter={dateFormatter} dataKey="x" />
      <YAxis tickFormatter={numberFormatter} />
      {resultSet.seriesNames().map((series, i) => (
        <Bar
          stackId="a"
          dataKey={series}
          name={series.split(",")[0]}
          fill={colors[i]}
        />
      ))}
      <Legend />
      <Tooltip labelFormatter={dateFormatter} formatter={numberFormatter} />
    </BarChart>
  </ResponsiveContainer>
);
```

<iframe src="https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/recharts" title="React Visualization Libraries" css="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

## Victory

[Victory](https://formidable.com/open-source/victory/) follows the same composable pattern as Recharts. It is developed by [Formidable](https://formidable.com), which has other solid open-source libraries besides Victory as well. It is the only library on the list that also works with React Native.

It’s the second most popular library after Recharts with more than 7K stars on Github, but has 5 times less open issues than Recharts. Victory has a [community chat on Spectrum](https://spectrum.chat/victory).

It is [well documented](https://formidable.com/open-source/victory/docs/) and has an [examples gallery](https://formidable.com/open-source/victory/gallery/). 

Victory comes with two themes: grayscale and material, and allows you to create customer themes to have a consistent look across all the charts. 

Below you can see the code for our stacked bar chart with Victory:

```jsx
const transformResult = (series, resultSet) =>
  resultSet.chartPivot().map(element => ({ x: element.x, y: element[series] }));

export default ({ resultSet, dateFormatter, colors, numberFormatter }) => (
  <div height={300}>
    <VictoryChart
      containerComponent={
        <VictoryVoronoiContainer
          voronoiDimension="x"
          labels={(d, i) => `${resultSet.seriesNames()[i]}: ${d.y}`}
          labelComponent={
            <VictoryTooltip cornerRadius={0} flyoutStyle={{ fill: "white" }} />
          }
        />
      }
      domainPadding={{ x: 20, y: [0, 20] }}
    >
      <VictoryLegend
        colorScale={colors}
        data={resultSet.seriesNames().map(series => ({
          name: series.split(",")[0]
        }))}
        orientation="horizontal"
        y={275}
        x={130}
      />
      <VictoryAxis tickFormat={dateFormatter} tickCount={8} />
      <VictoryAxis dependentAxis />
      <VictoryStack colorScale={colors}>
        {resultSet.seriesNames().map((series, i) => (
          <VictoryBar key={i} data={transformResult(series, resultSet)} />
        ))}
      </VictoryStack>
    </VictoryChart>
  </div>
);
```

<iframe src="https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/victory" title="React Visualization Libraries" css="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

## Nivo

As well as Recharts and Victory, [Nivo](https://nivo.rocks/) is built on top of D3 and is React-specific. But unlike previous libraries it is not composable. It provides one component per chart type and this component is configured via multiple props. Nivo is distributed as a set of packages for specific chart types, for example, `@nivo/bar`. So, one needs to install a specific package to use a specific chart type. 

The project itself is quite active; it has more than 5k stars on Github and almost 300 members in the [community chat](https://discordapp.com/invite/n7Ft74f).

It has interactive documentation, where you can build config for your chart.  Although it is nice, It lacks a good old text API reference and search option.  It also has a [Storybook with examples](https://nivo.rocks/storybook/). It helped me a lot to shortcut the time to build the first chart. Same as Victory, Nivo lets you create your own theme to have a consistent look across all the charts. 

We’re going to use the `@nivo/bar` package for our stack bar chart; you can find a code sample and CodeSandbox demo below.

```jsx
//https://github.com/plouc/nivo/issues/138#issuecomment-373015114
const ticksFormmater = (ticksCount, value, data, dateFormatter) => {
  const valueIndex = data.map(i => i.x).indexOf(value);
  if (valueIndex % Math.floor(data.length / ticksCount) === 0) {
    return dateFormatter(value);
  }

  return "";
};

export default ({ resultSet, colors, dateFormatter, numberFormatter }) => (
  <div style={{ height: 300 }}>
    <ResponsiveBar
      enableLabel={false}
      colors={colors}
      data={resultSet.chartPivot()}
      keys={resultSet.seriesNames()}
      indexBy="x"
      enableGridY={false}
      padding={0.3}
      margin={{ top: 60, right: 80, bottom: 60, left: 40 }}
      axisLeft={{
        format: numberFormatter
      }}
      axisBottom={{
        format: value =>
          ticksFormmater(8, value, resultSet.chartPivot(), dateFormatter)
      }}
      tooltip={({ id, value, color }) => (
        <strong style={{ color }}>
          {id.split(",")[0]}: {numberFormatter(value)}
        </strong>
      )}
      legends={[
        {
          anchor: "bottom",
          direction: "row",
          translateY: 50,
          itemsSpacing: 2,
          itemWidth: 150,
          itemHeight: 20,
          itemDirection: "left-to-right"
        }
      ]}
    />
  </div>
);
```

<iframe src="https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/nivo" title="React Visualization Libraries" css="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>


## BizCharts

[BizCharts](https://bizcharts.net/products/bizCharts) is React-specific visualization library based on [G2](https://github.com/antvis/g2), a visualization grammar. It is backed by Alibaba and plays nicely with Ant Design Framework. 

It has almost 4k stars on Github, but the majority of development is in Chinese, same for most of the documentation. I think the team is doing a great job of translating the docs, but it is still a work in progress.

Though, it lacks documentation in English the API is pretty straightforward. The only hard thing is to re-format the data into the specific format for the stacked chart.

```jsx
const stackedChartData = resultSet => {
  const data = resultSet
    .pivot()
    .map(({ xValues, yValuesArray }) =>
      yValuesArray.map(([yValues, m]) => ({
        x: resultSet.axisValuesString(xValues, ", "),
        color: resultSet.axisValuesString(yValues, ", "),
        measure: m && Number.parseFloat(m)
      }))
    )
    .reduce((a, b) => a.concat(b));

  return data;
};

export default ({ resultSet, dateFormatter, colors, numberFormatter }) => (
      <Chart
        scale={{ x: { tickCount: 10 } }}
        height={400}
        data={stackedChartData(resultSet)}
        forceFit
      >
        <Axis name="x" label={{ formatter: dateFormatter }} />
        <Axis label={{ formatter: numberFormatter }} name="measure" />
        <Tooltip />
        <Geom
          type="intervalStack"
          position={`x*measure`}
          color={["color", colors]}
        />
        <Legend itemFormatter={item => item.split(",")[0]} />
      </Chart>
    )}
  />
);
```

<iframe src="https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/bizcharts" title="React Visualization Libraries" css="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>


## React-vis

[React-vis](https://uber.github.io/react-vis/) is being developed by Uber and seems quite active with 5.4k Github stars, 150 open issues, and a lot of recent commits. It is modular, like most of the libraries on the list. It comes with some nice default styles, which should be imported separately as CSS files.

Same as Nivo, it has Storybook with examples. The components API is also well documented. On the customization side you can control the look and feel via custom CSS styles. React-vis also provides a specific component for building custom SVG charts—[CustomSVGSeries](https://uber.github.io/react-vis/documentation/series-reference/custom-svg-series).

The API is similar to Victory's. You can see I'm using almost the same `transformResult` from Victory's snippet.

```jsx
const transformResult = (series, resultSet, dateFormatter) =>
  resultSet
    .chartPivot()
    .map(element => ({ x: Date.parse(element.x), y: element[series] }));

export default ({ resultSet, dateFormatter, colors, numberFormatter }) => (
  <XYPlot xType="time" height={300} width={500} stackBy="y">
    <XAxis tickFormat={dateFormatter} tickSize={8} />
    <YAxis />
    {resultSet.seriesNames().map((series, i) => (
      <VerticalBarSeries
        cluster="stack 1"
        key={i}
        color={colors[i]}
        data={transformResult(series, resultSet, dateFormatter)}
      />
    ))}
    <DiscreteColorLegend
      colors={colors}
      items={resultSet.seriesNames().map(i => i.split(",")[0])}
      orientation="horizontal"
      style={{ position: "absolute", left: 130, bottom: -30 }}
    />
  </XYPlot>
);
``` 

<iframe src="https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/react-vis" title="React Visualization Libraries" css="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>


_If you don’t see your favorite library or just want me to add one more—just ping me in [this Public Slack Community](https://cubejs-community.herokuapp.com/). I’m happy to add as many libraries as I can to the list._

React Visualization Libraries in 2019