#D3, #React and #Clustergrams
Posted on February 22nd, 2016
02/22/2016 @ Pivotal, 625 6th Ave, NY
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: http://starwars.meteor.com/. 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:
- remove labels for rows that will fall off the end of the page
- reposition the remaining labels to cover the height of the page
- expand the matrix to vertically fill the page
He also illustrated other effects made easy to implement in D3.
His code is available on
Responsible #DataVisualization & Becoming a #D3 ninja
Posted on November 23rd, 2015
11/23/2015 @ Pivotal Labs, 625 6th ave, NY
In the first presentation, Amanda Chung @DockYard spoke about Responsible Data Visualization.
She opened with a side illustrating a data representation from the art world: http://www.arthurbuxton.com/2011/06/matisse-visualisation.html
Amanda described responsible design as one which does the following
- Form – Choose the right type of graph to match the purpose of the graphic: comparison , relationship, composition, distribution
- Integrity – pie chart should add to 100%, bubbles are accurately sized (size by area, not radius), don’t truncate axes – start axes at zero. See Darrell Huff’s book on “how to lie with statistics”
- Efficiency – readability, use legend, inline labels that appear when we hover. User should do as little work as possible
- Performance – (speed to load) – some css declaration are faster, consider transitions. See Laura Hogan book “Designing for Performance“
- Accessibility – design the site to help people with disabilities (visual, motor, auditory, cognitive),
- Spectrum is a Chrome extension to show how a site would look like for someone with color blindness.
- Semantic HTML – input to screen readers
- Keyboard navigation – need signifier to tell you were you on the site (like gameboy). Also keyboard shortcuts
- Sharing a visualization – information in a ‘get’ can be emailed easily
- Responsiveness – hover rollover needs to be translated to mobile devices that have fewer pixels to use as a target
- Maintainability –
- flexible dimensions – responsive
- dynamic data– can you add more data points
- don’t repeat yourself – easy for scripting
SVG may have scalability problems for large numbers of data points. Instead use canvas
In the second presentation, Karl Sluis @Pandora’sNextBigSound spoke about “What I Wish I Knew Two Years Ago: A Designer’s Guide to D3”
He said that Scott Murray’s web pages were an excellent intro to D3
He also said that his slides are posted on @karlsluis on twitter.
Karl broke his advice into three areas.
- Tools –
- to avoid “XMLHttpRequest cannot load” – install node.js and npm install http-server –g so anywhere you can type ‘http-server’
- open the inspector to see how the code was written
- see bost.ocks.org/mike/
- see Mr.Data Converter – creates inputs to a JSON file
- Getting started – tips for D3
- <g> – what is that? = an SVG group – encapsulate when you can
- Data join
- $0.__data__ to see if the data is joined with the element = inspect the element
- Better to group items and then append the attributes
- Add a class name to make it easy to specify a group
- SVG starts top left. D3 margin convention – append it to a <g> and move to the left
- Write it out (an outline), then code it
- Data – (also great advise for any scripting language)
- Use a callback functions to get data
- Reformat data using a forEach loop
- Use functions
- Use console.log() to see what is going on
- Build slowly and incrementally
Posted on November 24th, 2014
George Murphy @georgeLmurphy @Nomi
11/24/2014 @Pivotal, 625 6th Ave, NY
Two presentations. One by George Murphy showing how he used d3 routines to create interactive web graphics. The second by Sebastian Gutierrez was a beginner tutorial on d3. My notes do not cover that presentation.
George presented four case studies
- Behavior timelines showed time lines for individual shoppers including the sequence and time spent on various activities in the store.
- Occupancy by hour showed when people are sitting at specific seats in a restaurant. The site showed the occupancy of seats on a floor plan and individuals hours can be clicked to show the percent occupancy and which seats are occupied at that time.
- Nomi, his current company, placed 250 large “eggs” at various points in Manhattan. Each egg had a beacon so smart phone users could “collect” eggs. George showed a site where one can query by location, accumulated visits and select eggs by common themes.
- A site for exploring the trick-by-trick elements in a head-to-head skateboard competition. Tricks were synced to videos and results could be viewed in many ways: by elimination round winners, tricks successful/failed by individual, round, etc. offensive/defense and keyed to the videos.
George mentioned the following useful resources on visualization
Bret Victor – Ladder of Abstraction
Books: “Visualize This” by Nathan Yao
Books – “Align Left” by Scott Murray
Posted on October 28th, 2014
10/27/2014 @Pivotal, 625 6th Ave, NY
Two presentations showed how #d3 is used to create #interactiveGraphics.
In the first presentation, Paul Levande, originally from #Westport, CT, showed an interactive tool he developed to display the presidential voting preferences of the 23 towns in Fairfield county CT. Taking town-by-town voting records since the 1924 elections, he created a two panel display. The left display was a scatter plot comparing the percentage of voters voting for the Democratic presidential candidate for any two elections. The years of the x and y axes were selected by dropdown menus. The right display was a line graph showing the percent voting Democrat from 1924 to 2012 with each town represented as a separate line. Data for each election and town appears when points are clicked and lines for each town can be highlighted by clicking on the line
The second presentation was presented by several speakers from @Objectlab, a boutique consulting firm. They used d3 to create a monitoring tool showing #Sony music’s #digitalSupplyChain. The #graph is a real time monitoring visualization with aggregated history – number of packages that are in the pipeline. Green is good and red shows a delay in the process. The right side shows production over the last 60 minutes at 1 minute intervals. The left side shows 1 and 2 hour aggregations. They also presented the code and described the backend architecture that served the data. The code is available at https://github.com/objectlab/TimeseriesVisualization.