New York Tech Journal
Tech news from the Big Apple

Responsible #DataVisualization & Becoming a #D3 ninja

Posted on November 23rd, 2015

11/23/2015 @ Pivotal Labs, 625 6th ave, NY

20151123_192319[1] 20151123_202423[1] 20151123_202635[1] 20151123_202805[1] 20151123_202930[1]

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:

Amanda described responsible design as one which does the following

  1. Form – Choose the right type of graph to match the purpose of the graphic: comparison , relationship, composition, distribution
  2. 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”
  3. Efficiency – readability, use legend, inline labels that appear when we hover. User should do as little work as possible
  4. Performance – (speed to load) – some css declaration are faster, consider transitions. See Laura Hogan book “Designing for Performance
  5. Accessibility – design the site to help people with disabilities (visual, motor, auditory, cognitive),
    1. Spectrum is a Chrome extension to show how a site would look like for someone with color blindness.
    2. Semantic HTML – input to screen readers
    3. Keyboard navigation – need signifier to tell you were you on the site (like gameboy). Also keyboard shortcuts
    4. Sharing a visualization – information in a ‘get’ can be emailed easily
    5. Responsiveness – hover rollover needs to be translated to mobile devices that have fewer pixels to use as a target
  6. Maintainability –
    1. flexible dimensions – responsive
    2. dynamic data– can you add more data points
    3. 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.

  1. Tools –
    1. to avoid “XMLHttpRequest cannot load” – install node.js and npm install http-server –g so anywhere you can type ‘http-server’
    2. open the inspector to see how the code was written
    3. see
    4. see Mr.Data Converter – creates inputs to a JSON file
  2. Getting started – tips for D3
    1. <g> – what is that? = an SVG group – encapsulate when you can
    2. Data join
    3. $0.__data__ to see if the data is joined with the element = inspect the element
    4. Better to group items and then append the attributes
    5. Add a class name to make it easy to specify a group
    6. SVG starts top left. D3 margin convention – append it to a <g> and move to the left
    7. Write it out (an outline), then code it
  3. Data – (also great advise for any scripting language)
    1. Use a callback functions to get data
    2. Reformat data using a forEach loop
    3. Use functions
    4. Use console.log() to see what is going on
    5. Build slowly and incrementally

posted in:  d3.js, Programming, UX    / leave comments:   No comments yet