Grafl - an online tool to create charts, graphs and plots

Over the last few years we’ve had a number of projects that required some pretty heavy lifting in the visualisation department.

One of our ‘go to’ packages is Plotly. It offers some pretty awesome tools for developers to produce all sorts of plots and visualisations. From scatter to sankey, scientific to financial – Plotly seems to do it all.

So why Grafl?

Here at Cursive, we felt that all this plotting goodness could be made more accessible to a wider audience, and not just aimed Python or JavaScript developers.

So that’s how Grafl.io was born, with the aim creating great looking and functional interactive charts, graphs and plots with ease. It’s a simple concept really, if you want to turn data into a graph or visualisation, Grafl can help.

Plots are defined using simple JSON format so you can get started quickly. With ~70 different types to choose from, you’ll have the power and flexibility to generate some amazing interactive visualisations.

Take the hard work out of visualizing your data

— grafl.io

Getting started

There are a few different ways of using Grafl. If you need a one off plot – say for a presentation, a social media post or to add to an email, you can design your plot using the Grafl editor which generates a unique self-contained Grafl URL, with all plot parameters and data included. By changing a few lines of code in the editor, it’s possible to generate SVG or PNG representations of the plots, that can be downloaded.

But it gets better... for live, dynamic plots, you can post data to the service and receive a self contained plot embedded into your website. This means your plot will automatically update as your data changes.

For fellow Wagtail lovers, we’ve built a Wagtail integration called wagtail-grafl. This is our first integration for Grafl but it won’t be the last.

The Grafl website comes with a whole bunch of example plots (about 70 so far) that can be used as a starting point for your own creations. It’s as easy as pie!

Basic plots

Bar, Bubble, Dot, Icicle, Line, Pie, Scatter, Sankey, Sunburst, Treemap

Statistical

Box, Error Bars, Histogram, Histogram 2D, Histogram 2D Contour, Parallel Categories, Scatterplot Matrix (Splom), Violin

Scientific

Barpolar, Carpet, Contour, Heatmap, Parallel Coordinates, Scatter Polar, Scatter Smith, Scatter Ternary

Everybody loves a Sankey diagram

There is something about Sankey diagrams that makes them pleasing to the eye. With Grafl, the world of Sankey diagrams, as well as many other visualisations, are made available in a few lines of config. You can even make them interactive so you can reorganise the data points. Give it a whirl!

{
  "figure": {
    "plots": [
      {
        "traces": [
          {
            "data": {
              "type": "sankey",
              "node": {
                "label": [
                  "In1", "In2", "Process1", 
                  "Process2", "Out1", "Out2"]
              },
              "link": {
                "color": "rgba(200, 200, 200, 0.5)",
                "source": [0, 1, 0, 2, 3, 3, 1, 2],
                "target": [2, 3, 3, 4, 4, 5, 2, 5],
                "value":  [3, 1, 2, 3, 1, 2, 2, 2]
              }
            }
          }
        ]
      }
    ]
  }
}

The Grafl API can be used directly to generate plots in your browser in real time which means you can include them in emails, documents and presentations. This example Sankey diagram is generated by sending the plot parameters to Grafl. The Grafl service processes the order, draws the graph and sends it back to the website fully-formed in the blink of an eye.

Financial

Funnel, Funnel Area, Candlestick, OHLC (open, high, low and close), Waterfall

Maps

Choropleth, Choropleth Mapbox, Scatter Geo, Scatter Mapbox

3D

Cone, Mesh 3D, Scatter 3D, Streamtube, Surface

Grafl in action

We put Grafl to the test when we made a new website for a company specialising in video effects for the film and television industry.

As part of their B Corp accreditation they have a requirement to publish their carbon emission data, amongst other things.

Grafl allows their content team to quickly and easily publish their data online and in-keeping with their brand. Grafl puts them fully in control of how their data is presented. Their website, their data, their house style.

Plot showing cumulative carbon emissions by Scope per month.