How to create dashboards & widgets with CartoDB

Last weeks I have been working with DeepInsights.js, the “new” CartoDB’s Javascript library that allows you to create dashboards. This technology is so powerful that can be intimidating. But in this blog post I am going to demonstrate how easy is to create dashboards, widgets and add customized elements. Let’s start!

First, download the last version from this Github repository. Then within your <head>  tag call both DI’s Javascript library and CSS stylesheet.  Secondly, create a map with the CartoDB Editor. Copy the viz.json of your visualization (I highly recommend adding this Chrome extension and this Sublime Text plugin to work viz.json formats), change the url from v2 to v3 and declare a string variable such as this one:

Third, time to create the main dashboard. In CartoDB.js and Leaflet.js, we were used to build our applications within “maps” divs. But, in this case we are going to do it in a dashboard div:

And now the funny part:

You can get your map and layers objects very easy. This the method:

Then you have to define the parameters of your widgets. This is an example of the parameters needed in order to create a histogram:

Finally, use createHistogramWidget (but there is also TimeSeries, Formula and Category widgets) using these parameters:

Voilá! How many lines of code have we used? Very few indeed. If you want to go further, have a look at this list. You can create dashboards with two layers, time series widget, style customized  widgets, layer selectors and so on. As you can see, creating dashboards and doing spatial analysis are an easy task thanks to CartoDB.

GIS Analyst. Working at @CARTO and @ongawa4d.


  1. Simon Ducournau

    Hi !
    I’ve been trying to do this with one of my json config file but it didn’t work.
    It appears the data couldn’t be loaded.
    That’s what was printed in the console:

    cartodb.js 4.0.0-alpha.1
    Failed to load resource: the server responded with a status of 400 (Bad Request)
    Error creating the map instance on Windshaft: Missing sql for layer 0 options”

    I should be obliged if you would help me !

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *