Looker Community

How to Make Custom Visualizations (3.16+, Requires Javascript, Self-Hosting)

Looker’s Visualization API provides a simple JavaScript interface to creating powerful, customizable visualizations that seamlessly integrate into your data applications. :bar_chart: :chart_with_downwards_trend: :chart_with_upwards_trend:

You can get started with custom visualizations by following the guide and API documentation here:

6 Likes

It would be useful to have documentation on the various elements to this, such as error handling, object properties for the various functions (handleErrors, create, update). There is a lot of digging around here for developers.

3 Likes

Thanks for the feedback!

I will talk to product/engineering about documentation.

I would also like to see some deeper documentation on this feature. Has anything additional been published since December?

Thanks!

Where/how do we pull in the javascript libraries we need? I need d3.v4 but I don’t see anything describing how it’s done.

HOW TO USE YOUR OWN VERSION OF D3 WITHOUT BREAKING LOOKER VISUALIZATIONS

I found one can just put any javascript library into /plugins/visualizations folder, but IFF you want to use a never version of D3 you will break the existing looker visualizations. To get around that I simply modified the D3V4 library slightly so that it uses ‘d3v4’ instead of ‘d3’ as it’s variable name.

This is all I do for my own custom visualizations that rely on D3 version 4:

  1. At the very top of the d3.v4.js file, I simply made this change:

Original:
// https://d3js.org Version 4.4.0. Copyright 2016 Mike Bostock.
(function (global, factory) {
typeof exports === ‘object’ && typeof module !== ‘undefined’ ? factory(exports) :
typeof define === ‘function’ && define.amd ? define([‘exports’], factory) :
(factory((global.d3 = global.d3 || {})));

Updated:
// https://d3js.org Version 4.4.0. Copyright 2016 Mike Bostock.

(function (global, factory) {
typeof exports === ‘object’ && typeof module !== ‘undefined’ ? factory(exports) :
typeof define === ‘function’ && define.amd ? define([‘exports’], factory) :
(factory((global.d3v4 = global.d3v4 || {})));

And then simply add this line at the top of any plugin where I wish to use d3v4:

(function() {
var d3 = d3v4;
looker.plugins.visualizations.add({

1 Like

FYI: when adding a new custom vis you might want to clear your browser cache to have it show up (at least in Chrome we had that problem, FireFox seemed to work right away)

1 Like

I want to use D3 Indented Tree , Can you please guide me in this

I want to you D3 Indented Tree , not sure how to proceed can you please guide me in that

Hi Rahul,

We don’t support indented tree natively nor do we have any examples of it. Any custom visualization examples that we do have would be here: https://github.com/llooker/custom_visualizations