Skip to content

Instantly share code, notes, and snippets.

@cristianpb
Last active September 12, 2018 20:10
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save cristianpb/f623461c406020eef068c1e4ecc6313f to your computer and use it in GitHub Desktop.
license: gpl-3.0
height: 800
scrolling: yes
border: no

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
#number-records-nd {
font-size: 55px;
}
.dc-chart g.row text {
fill: black;
}
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment