Slight Graphs — Flexible and Powerful

  • Name
    Colman Humphrey
  • Name
    Léo Bernard
Published on

We recently deployed our graph feature. Check out some early examples on our free public data version of slight — or create your own! Here's a quick video on making a graph in Slight.

We want Slight apps to be easy to use with any graph or chart tool. So much so we even considered not having graphs in Slight, and instead staying focused on data and apps. We realized this would be too much friction for our users, and that we had an opportunity:

  • A lot of graphing solutions are too complex, or too inflexible.
  • We needed a way to avoid "death by a thousand clicks".
  • We wanted charts that were closer to the data, to SQL. We wanted more control on when changing a variable would trigger a re-run. We also wanted a nice way to work with our app variables from the graphs.
  • We wanted to extend our API to the graphs, as well as gain the flexibility of embedding the graphs.

To make this happen, our graphs are built on top of a fantastic open source project, Vega-Lite. We've built a combined GUI and code based solution. You can quickly build many graphs without having to know much about Vega-Lite, but you can also harness its full power if you know Vega-Lite and its spec.

One note: every graph in Slight starts with an app. Let's dive in.

OK First Show Me An Example

We'll first look at an example of what we can build without using any knowledge of Vega-Lite or its spec. It's built with the GUI, or the "graph builder". In fact, we have a video showing how we made this one as part of a video creating the underlying app.

The app we'll build on calculates a funnel analysis using example website data. The app takes dates as input and optionally subsets to a specific browser. This graph based on it uses an area chart, with step on the x-axis, and count on the y-axis, with the areas split by color using browser. Finally it adds a tooltip showing all data. We recommend you check the graph to use the tooltip, but without the tooltip that gives:

Go to Graph
Graph showing a funnel analysis by browser. The steps are (in order)
  'Land on Homepage', 'Click on Product Page', 'Add to Cart', 'Navigate to
  Checkout', 'Complete Purchase' and 'Initiate Return'. The browsers are 'Chrome',
'Edge', 'Firefox', 'Opera', 'Other' and 'Safari'. The count on the first step is
a combined 10,000, which drop all the way to just over 2,000 for 'Add to Cart',
the biggest drop step (except 'Initiate Return').

The graph builder for this is straight–forward. We've expanded the x-channel below to show where the x-axis sorting is added. You can also see this in the graph's Playground tab.

Go to Graph
A screenshot of a webpage section that is
a version of a form. It is the graph builder for the funnel graph. The 'x'
step is expanded to show that 'step_number' has been put in the 'Sort By' field.

If you follow the graph link you'll see you can adjust the variable values and re-run the underlying app. We'll discuss that more below.

Flexibility: GUI 🤝 Code

Our GUI can build many different graphs, and will get more powerful over time. In the meantime, Vega-Lite is very powerful if you know its spec.

Most graph solutions either do one or the other, GUI or code. If they support both, they're mutually exclusive: once you edit the spec, you can't go back to the GUI. That's frustrating. We wanted the best of both worlds: the GUI where it's suitable, and the spec to cover the last few pieces.

An Example: Axes Angles

From the funnel analysis in the previous section, you might decide the 90 degree labels on the x-axis are awkward to read. We don't yet support editing the label angle in the GUI, but it's possible in Vega-Lite's spec. We add "axis": {"labelAngle": -45} to the x-encoding, to make it read:

    "x": {
      "field": "step",
      "type": "nominal",
      "sort": {
        "field": "step_number"
      "axis": {
        "labelAngle": -45

This results in the following version of the graph:

Go to Graph
Same graph as the funnel analysis above,
but with the x-axis labels tilted at 45 degrees instead of 90.

We can now continue editing in the graph builder if we wish after adding this. We get to keep our spec customization without having to lose the ease and speed of the GUI.

Another Example: Changing Color Schemes

Let's take this graph showing 311 Service Requests in San Francisco, which plots service calls made per month and category. This graph was built with just the GUI, no spec needed.

The colors are reasonable, but we might decide they're not clear enough (try increasing the category count) or interesting enough, or maybe we need to use our brand colors. Our GUI doesn't yet support this customization, but Vega-Lite's spec does. We can go to the Vega Editor (try it now in the playground for that graph!), and edit the color block, adding "scale": {"scheme": "plasma"} to give:

    "color": {
      "field": "category",
      "type": "nominal",
      "title": "Category",
      "scale": {
        "scheme": "plasma"

This gives us the following graph (compare it to the original from the link):

Go to Graph
Screenshot of the graph discussed above, the SF
311 requests, but with a different color scheme than in the graph. It's
got a set of hues from purple to yellow. The graph itself shows that
'Street and Sidewalk Cleaning' is the most prominent category, and is growing

Again this was a simple change, but what's worth noting is that like the above example, we can go right back to editing in the GUI if we'd like.

You Only Click Once

In BI tools such as Tableau, you can create exceptionally powerful graphs. You have to work for it though, click by click. That's all fine, until the next day you need to do a similar set of clicks on a new dataset. Rough.

Because Slight's graphs use the spec as the source of truth, your clicking efforts won't be wasted. You can just copy the generated spec and paste it in for your next graph, and all the same GUI settings will appear. If this new graph needs a few tweaks, you can pick up right where you left off.

Using the App's Variables

As noted in our funnel analysis graph, our graphs can use the underlying app's variables. There are two choices for each variable:

  • Allow the app variable to pass through to the graph. This lets graph users edit the value and re-run the app. These variables need a default value, but it doesn't have to be the same as the app's.
  • Set a fixed value for the variable. Maybe the graph only works with specific values of the variables, or you're just setting what you want your users to see.

This is powerful because it means you can directly update the data that generates the app in exactly the same way as the underlying app does. So the graphs can, for example, take advantage of variables that even swap out which columns get returned.

Fully Spec-Based Graphs

Eventually you can create graphs that are too complex for our graph builder. The good news is we still allow you to make use of all features of Vega-Lite through the spec.

This next graph shows the gap between remote job supply and demand, using Hacker News jobs threads. It's built with Vega-Lite's Layers, which are beyond what we're supporting in this early version of the graph builder. The red vertical line is the start of the pandemic:

Go to Graph
Screenshot from the graph discussed above,
showing the gap between remote jop supply and demand (from hacker news). Until
the start of the pandemic, we see a huge gap, where 90% of job seekers seem
interested in a remote role but only 25% of jobs offer it. The gap
rapidly shrinks after the start of the pandemic, and now it shows
the demand is still really high, and supply has nearly caught up, at about 85%.

For a final example, we'll look at this NYC Citibike graph. Our GUI can recognize most of the spec as you can see in the playground, but it uses many parts of Vega-Lite's spec that we haven't yet built out, including projections. This screenshot includes a tooltip. Try playing with the gender variable to see different biking destinations.

Go to Graph
Screenshot from the bike graph, showing a grid
over NYC, colored by how many rides ended in each. It's mostly
Manhattan, with some parts of north-west Brooklyn, and some rides
ending in New Jersey. The cursor is hovering over the most ride-heavy
block, in Midtown. The tooltip shows 778,126 rides, with '6 Ave & W 33 St'
as an example station in that grid.

Future Work

API and Embedding

As mentioned early on, we will soon extend our API to graphs. This means you can generate graphs programmatically, and for example send them anywhere on a schedule, alone or within a report. Or you can generate them on request in situations where you don't want to offer direct access to Slight, for example to external clients.

Embedding will come along in the near future. This will allow you to embed an up-to-date Slight graph on your website.

Graph Parameters

Currently, the only variables in the graph come from the underlying app. We want to support parameters that only affect the graph, not the underlying data. The big advantage is that such parameters can adjust the graph very fast (they won't cause the app to re-run), and can be used flexibly within the spec.

In fact you can already make use of Vega-Lite's parameters in the spec, but we want to support them in the graph builder (and API) too.

Functions of the Data

Vega-Lite allows for a broad range of functions of your data. You could generate a new column that wasn't present in the app for example. This is already possible if you know the spec, and we'll extend this to work in the GUI too.

Related Articles