Interactive visualization using DC.js
Front
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
|
├───tile is-parent
| └───tile is-child
|
└───tile is-parent
└───tile is-child
Back
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
