New York Tech Journal
Tech news from the Big Apple

#D3, #React and #Clustergrams

Posted on February 22nd, 2016


02/22/2016 @ Pivotal, 625 6th Ave, NY

20160222_192712[1] 20160222_194948[1] 20160222_200736[1] 20160222_200909[1]

Two speakers talked about combining the functionality of D3 + React and taking advantage of the power of D3 to create graphic displays for data analysis.

In the first presentation, Pan Wangperawong @_panw talked about how to integrate the power of D3 for graphics and React for dynamic updating of the DOM. Both D3 and React espouse functional programming and both want to manipulate the DOM, but only one can do this without conflict. React creates a virtual DOM to efficiently changes in the display. So, to utilize this facility, React should manipulate the DOM. This means that D3 does the math and creates objects that are passed to React, but D3 cannot directly access the DOM.

Pan illustrated this by walking through code behind an example application: The details are on Github.

An overview is that React creates DOM elements and takes responsibility for interactive manipulations. D3 is called within a single function to set up these elements. The D3 calls start in line 27 of his code.

In the second presentation, Nicolas Fernandez introduced clustergrams (heat maps with rows and columns of the matrix ordered by a cluster analysis) and talked about how D3 gave him the programming tools to create interactive displays of clustergrams and related data analysis pictures.

He talked about related methods for displaying data including force-directed graphs, adjacency matrices, and raw item by characteristic matrices. He illustrated each using with a matrix of characters and which chapters they appeared in Les Miserable. The matrix can be colored when a character (column) appears in a chapter (row). The number of overlapping chapter appearances can be converted to a similarity measure which can be plotted as a adjacency matrix, force-directed graph, etc.

For each of these, Nicolas demonstrated how an interactive graph helps us better understand the structure of the book.

Next he talked about how Python (using the SciPy tool) and D3 gives him the tools to make the interactive plots. Specifically, he talked about how D3 object constancy makes it possible to zoom in with the following effects:

  1. remove labels for rows that will fall off the end of the page
  2. reposition the remaining labels to cover the height of the page
  3. expand the matrix to vertically fill the page


He also illustrated other effects made easy to implement in D3.

His code is available on



posted in:  applications, d3.js, data analysis, Programming    / leave comments:   No comments yet