About me
Find me in:  github  medium  twitter  linkedin  kaggle  google  researchgate

Interactive data exploration using Dc.js

⏳ 1 mins read time

Interactive visualizations are a great alternative to static figures for data analysis. The reader is able to define his own story by making its own explorations and get its own conclusions. In this post I show a simple way to get interactive visualization using javascript functions dc.js.

The code can be found at the following gist and the visualization is available at this link. The visualization have to main files:

  • index.html that contains the front end of the visualization
  • graph.js that contains all javascript that runs the interactive components


I used bulma.io css framework to set the differents charts in a responsive way. This framework provides a tiles disposition to create a grid of content.

The structure of the grid in terms of bulma instructions is the following:

tile is-ancestor
β”œβ”€β”€β”€tile is-vertical is-8
|   |
|   β”œβ”€β”€β”€tile
|   |   |
|   |   β”œβ”€β”€β”€tile is-parent is-vertical
|   |   |   β”œβ”€β”€β”€tile is-child
|   |   |   └───tile is-child
|   |   |
|   |   └───tile is-parent
|   |       └───tile is-child
|   |
|   └───tile is-parent
|       └───tile is-child
    β”œβ”€β”€β”€tile is-parent
    |   └───tile is-child
    └───tile is-parent
        └───tile is-child


The div elements that are inside the tiles are created using the graph.js file. This file uses d3.queue to load the json file ./df.json using d3.json function and wait until it finish to execute the function makeGraphs.

The function makeGraphs:

  • Parses date time data
  • Creates a crossfilter and add the records. A filter represents a multidimensional dataset.
  • Definition of the dimension of the crossfilter.
  • Groups data on each dimension.
  • Define the charts and the id to be used in the html file.
  • Update the heatmap if any dc chart get filtered

The barplots are made using standard dc.js api. They are connected through crossfilter.js so when each dimension each filter, the results can be see in the other dimensions. In addition, the Leaflet map is connected to the charts so when one chart is filtered, the results are shown in the heatmap.


The final interactive visualization is available in this block link

In relation with 🏷️ d3.js, dc.js, bulma, leaflet:

Interactive dashboard using Google Analytics, Github Actions and Dc.js

This article shows how to use google analytics api to build a customized dashboard using javascript library dc.js and deploy them using Github Actions

Algolia search engine in Jekyll static pages

This article shows how to implementent Algolia searching engine in a static website and update the entries using Github Actions.

Static AMP website creation with Bulma and Jekyll

This posts shows how to include bulma css classes inside a jekyll website but keeping good performance from AMP websites

Marathon training program analysis using python and chartjs

A marathon needs to be prepared for at least 3 months. This post shows my preparation training and a prediction of my time for the Metz Marathon 2017

Subscribe to my newsletter πŸ“°

and share it with your friends: