One Big Graph

This template makes it easy to turn Bigquery result sets into simple interactive metric charts.

prerequisites

1. you'll need node.js installed on your computer.
2. once you've gotten node.js, you'll need degit. Run npm install -g degit
3. this project assumes you also have GCP credentials on your machine, and you can use the various Bigquery APIs locally. I can't help you with this part – you'll have to talk to Ops or your IT department.

how to get started

Get the template and set it up:

degit hamilton/one-big-graph#main my-graphs
cd my-graphs
npm install

Everything you will need is in /public, which has three directories:

1. /public/sql – put your sql file here.
2. /public/config – put your chart configuration here (see below for the API).
3. /public/data – this is where your data goes.

sql to fetch the data from Bigquery

Let's say you have a sql query in a file called first-chart.sql in /public/sql. Run this command to fetch the data:

node cache public/sql/first-chart.sql

This will fetch your result set and put it into /public/data.

config set up your chart

Now that you've fetched the data, you will need a chart config. We will add it to /public/config/index.js.

export const plots = [
  {
    // 'key' is the unique slug in the url that pulls up the graph.
    // It needs to be unique!
    key: "first-example",

    // source is the file in /public/data/. Right now it has to be json,
    // which is what the cache.js script returns.
    // In theory, you can put any tidy-formatted JSON filee in
    // /public/data/ and serve it.
    source: "first-chart.json",

    title: "Here's one big chart", // the display title
    shorthand: "Big Chart", // (optional)
    subtitle: "Shows stock prices from 2015-2020", // (optional) the information under the title
    supertitle: "The stock market", // (optional) the all-caps part above the title
    x: "date", // the column that maps to the x positional dimension

    // 'y': the column(s) that map to the y position dimensions. If you're only selecting
    // a single column, just wrap a single string in an array for now like ["value01"].
    // I'll fix this soon
    y: ["value01", "value02"],

    // 'group': the group field splits the data into groups by values in the column
    // denoted by this field value.
    // If there are multiple ys, you will get each y column value per group.
    group: "country",

    // 'facet': the facet field splits the data into groups (like the group field) but creates
    // a separate graph per facet field value. group and y will function as before on each graph.
    facet: "app",

    // formatters
    // a formatter is a string pattern specified in a format used by d3-format or d3-time-format. See:
    // https://github.com/d3/d3-format
    // https://github.com/d3/d3-time-format
    xAxisFormat: undefined,
    yAxisFormat: undefined,
    yMouseoverFormat: undefined,
  },
];