Create a Plotly Visualization

Creating a Plotly visualization is simply a matter of configuring one or more layers. You can use existing base type templates or create your own figure templates, as well.

Here is an example of making a bar chart using Plotly:

  1. Add a <config> section and make it dependent on the base type template for a Plotly bar chart:

    {
    	"depends_on" : [ "bar-template"],
    	"height": 450
    }
  2. Add a query to your layer file to acquire the data:

    <query name="myquery">
    SELECT * FROM mytable
    </query>
  3. Add a step to your <pipeline> to execute the query:

    {
    	"steps" : [
    	    {
    	        "action" : "bigquery_query",
    	        "query_name" : "myquery"
    	    }
    	]
    }
  4. Add rules to your <mappings> for all the required attributes for the bar chart base type using columns from your query results:

    {
    	"rules" : [
    	    {
    	        "attribute" : "xaxis",
    	        "column_name" : "state"
    	    },
    	    {
    	        "attribute" : "yaxis",
    	        "column_name" : "total"
    	    }
    	]
    }
  5. Add the visualization tag to your HTML page.

Creating or Editing Figure Templates

You can create or modify your own <figure> templates in your layer file, as well. An example Plotly figure looks like this:

{
    "data": [
        {
            "type": "bar",
            "marker" : {
                "color" : "#99a7e0"
            }
        }
    ],
    "layout" : {
        "showlegend": false,
        "plot_bgcolor" : "rgba(0,0,0,0)",
        "paper_bgcolor" : "rgba(0,0,0,0)",
        "font" : {
            "color" : "gray"
        },
        "xaxis" : {
            "tickfont" : {
                "size" : 10
            },
            "color" : "white"
        },
        "yaxis" : {
            "tickfont" : {
                "size" : 11
            },
            "color" : "white"
        },
        "margin" : {
          "l" : 50,
          "r" : 50,
          "t":0,
          "b":100
       }
    }
}

The reference for these attributes can be found in the Plotly documentation. You can use any option that you find in this specification and map data columns and values into the figure as it’s rendered. Reference: https://plot.ly/python/reference/