Protobi

← All blog posts View post

<img src="/uploads/images/image-open-vis-conf-2013-2024-08-30-03-38-44.png" alt="" style="max-width: 400px"/>
<p>The <a href="http://openvisconf.com/">OpenVisConf</a> hosted by <a href="http://openvisconf.com/">Bocoup</a> at the Boston Science Museum on May 16-17, 2013 was that rare conference that was amazingly worth attending.  The speakers were the very people who create those awesome works we've all  admired and forwarded, or wish we'd known about.  Let alone the attendees.  Here are my key takeways.</p>
<p><h2><strong>Data vis is art designed to communicate</strong></h2>
Exploratory data has a role, but at some point you need to convey key insights and aha moments to an audience.  To engage them and excite them.  To move them to action.</p>
<p>It's not about standardized approaches, it's about spending hours, perhaps months or even a year of effort to design.  How do you communicate the news?  Or get people to understand the impact of gun deaths? Or empathize with neanderthal humans?</p>
<p>Amanda Cox of the NYTimes graphics department showed the incredible journey of a <a href="http://www.nytimes.com/interactive/2013/02/19/movies/awardsseason/oscar-trailers.html?_r=0">quantitative analysis of movie trailers </a>from initial sketches literally drawn on the normally figurative napkin to the final form.</p>
<p>Juan Velasco showed how data visualization goes way beyond Javascript, to physical models, maps, dioramas and film.</p>
<p>That theme was touched on by most of the presenters.</p>
<blockquote>"The most effective data visualization tool?  A pencil"  - Juan Velasco, National Geographic</blockquote>
<span style="font-size:13px;line-height:19px;">It's not (just) about the visual sophistication:</span>
<blockquote>"Good art should elicit ‘Huh? Wow!’ rather than ‘Wow! huh?’” -- Amanda Cox, NYTimes

"Data visualization: 'Now I understand.' Infographic: 'Cool! What is it?'"--  <a href="https://twitter.com/datamarket">@DataMarket tweet</a></blockquote>
<h2><strong>But visual sophistication has a role</strong></h2>
<blockquote>"How do you signal that something is important?  Use the scarce resource.  Which right now is technical programming skills" -- Amanda Cox, NYTimes</blockquote>
The craft matters.
<blockquote>"Hire seasoned web developers ..  you’ll be doing a lot more web development than data visualization" -- Shawn Allen, Stamen Design</blockquote>
Miguel Rios spoke about the nuances of choosing CSS, SVG, HTML5, WebGL, all of which subtly depend on your precise goals, number of elements, target devices.  You still have really consider programming as the medium.

Abe Stanway presented the aggressively distributed release process at Etsy.com, and the visualization methods to gronk it.
<h2>Responsive design</h2>
Smartphones are about not just size, but portability, availability, touch, location aware, accelerometer, connectivity, attention time.
<blockquote>"Responsive design is to create data visualization that is <em>of</em> every device [i.e. not just on it], using the same source code." -- Gabriel Flort, BostonGlobe.com</blockquote>
<blockquote>“At this point, either you cheat everybody out of something, or you cheat some people out of everything.” -- Gabriel Florit, BostonGlobe.com</blockquote>
<h2>Accessible design</h2>
Holy smokes.  Have you ever read a web page as a blind person would experience it?  Try it. Now.  Doug Schepers of the W3C showed how with a good web design, the speech synthesis says what you need to know.  With a thoughtless one, it reads so pedantically it drives you crazy.  Now how do you write your HTML so a blind person can read your D3.js scatterplot?  Actually, with a little thoughtfulness, it's not that hard.
<blockquote>"When we first implemented curb cutouts in Boston, we all thought it was for people with wheelchairs.  It turns out that was useful for older people, people with bad knees, for bicyclists, for people pushing shopping carts ..." -- Conference attendee at lunch

"Design for the cognitively challenged .. that's actually most of your user base" - Doug Schepers, W3C</blockquote>
<h2>D3.js</h2>
<blockquote>"It's the jQuery of datavis" -- Alex Graul, The Guardian</blockquote>
Actually, that's not quite fair.  Data vis is uniquely complex.  Alex Graul pointed out the incredibly large number of libraries to help with charting and we're still not standardized.   That's because charting cannot ever be standardized.  It's about conveying your point, to this audience, now, with this dataset.  You will always need that edge feature, because it's critical to your project.  That's why D3.js is uniquely useful.

Jim Vallandingham showed cool riffs on force directed layout with D3, including hex-grids and subway maps.
<h1>Quotes</h1>
<blockquote>“Some statistician somewhere has decided what you get to see and how you see it...” -- Kim Rees, Periscopic</blockquote>
<blockquote>“Statisticians are like your spouse on Valentine's day. They think they know you and are giving you what you want, ... but not really...” --Kim Rees, Periscopic</blockquote>
<blockquote>“Using Git Hub has totally changed the way I think about code .. writing it sharing it teaching it, modularizing it …” -- Shawn Allen, Stamen Design</blockquote>

<blockquote>"Use Cheltenham as the typeface you use when a single number is supposed to be important " -- Amanda Cox, NYTimes (quip)</blockquote>

<blockquote>“If you want [your slide show] to look profesional, back it with music from <a href="http://www.explosionsinthesky.com/">Explosions in the sky</a>” -- Amanda Cox, NYTimes (quip)</blockquote>

<p><blockquote>"Read Kirby Ferguson's blog on <a href="http://everythingisaremix.info/watch-the-series">Everything is a Remix"</a> -- Jim Vallandingham</blockquote></p>
<p><h1>Links</h1></p>
<ul>
    <li><a href="http://www.nytimes.com/interactive/2012/11/11/sunday-review/counties-moving.html">NYTimes Visualizing the winds of political change</a> (Amanda Cox , NYTimes.com)</li>
    <li><a href="http://www.bostonglobe.com/2013/03/31/main/gidBB678PiMS5YMMEAhdpL/story.html">Evolution of a tycoon</a><span style="font-size:13px;line-height:19px;"> (Gabriel Florit, BostonGlobe.com)</span></li>
    <li><a href="http://www.guardian.co.uk/global/interactive/2008/dec/09/climatechange-carbonemissions">Climate Change: The carbon atlas</a></li>
    <li><a href="https://election.twitter.com/map/">Political engagement map via Twitter</a></li>
    <li><a href="http://guns.periscopic.com/">US Gun Deaths</a><span style="font-size:13px;line-height:19px;"> (Kim Rees, Periscopic.com)</span></li>
    <li><a href="https://www.youtube.com/watch?v=SybWjN9pKQk">Visualization of tweets after Japan earthquake</a><span style="font-size:13px;line-height:19px;"> (Shawn Allen, </span><a href="stamen.com">Stamen Design</a><span style="font-size:13px;line-height:19px;">)</span></li>
    <li><a href="http://content.stamen.com/vpro">Netherlands from above</a><span style="font-size:13px;line-height:19px;"> (Shawn Allen, </span><a href="http://stamen.com">Stamen Design</a><span style="font-size:13px;line-height:19px;">)</span></li>
    <li><a href="http://www.chesapeakebay.net/visualization/baygrasses/">Chesapeake Bay Grasses</a></li>
    <li><a href="http://www.economist.com/blogs/graphicdetail/2012/11/fifty-shades-data-visualisations">Fifty Shades of Gray plot points</a><span style="font-size:13px;line-height:19px;"> (Economist.com)</span></li>
    <li><a href="http://www.carbonvisuals.com/work/new-yorks-carbon-emissions-in-real-time">Visualizing CO2 emissions of NYC as big blue spheres</a></li>
    <li><a href="http://vis.stanford.edu/papers/narrative">http://vis.stanford.edu/papers/narrative</a><span style="font-size:13px;line-height:19px;"> / </span><a href="http://vis.stanford.edu/files/2010-Narrative-InfoVis.pdf">http://vis.stanford.edu/files/2010-Narrative-InfoVis.pdf</a></li>
    <li><a href="http://pullman.fathom.info/topovsgeo">Visualizing subway layouts at Fathom.info</a></li>
    <li><a href="http://video.nationalgeographic.com/video/places/culture-places/local-life/sweden_sami/">National Geopraphic: The Sami people</a></li>
    <li><a href="http://www.npr.org/books/titles/138387221/pride-and-prejudice">Jane Austen as a comic</a></li>
    <li><a href="http://www.michaeljkramer.net/issuesindigitalhistory/blog/?p=1185">Sonification of the Dow Jones Index</a></li>
    <li><a href="http://research.microsoft.com/en-us/um/redmond/groups/cue/publications/ITS2012-TouchWave.pdf">Touchwave</a> -- stacked charts</li>
</ul>
<strong style="font-size:2em;line-height:19px;">Tools</strong>
<ul>
    <li><a href="http://MisoProject.com">MisoProject.com</a> -- how did I ever live without this??</li>
    <li><a href="http://processingjs.org/">http://processingjs.org/</a></li>
    <li><a href="https://github.com/shawnbot/aight">https://github.com/shawnbot/aight</a></li>
    <li><a href="http://www.senchalabs.org/philogl/">PhiloGL</a></li>
    <li><a href="https://github.com/ifandelse/machina.js/">Machina.js</a>  ("Probably the coolest" -- Alex Graul, The Guardian)</li>
    <li><a href="http://modestmaps.com/">http://modestmaps.com/</a></li>
    <li><a href="http://learnlayout.com/">http://learnlayout.com/</a><span style="font-size:13px;line-height:19px;"> </span></li>
</ul>
<h1>Observations</h1>
<ul>
    <li>People in the audience weren't writing presentations using PowerPoint, but javascript presentations like Reveal.js</li>
    <li>Journalists and designers are reinventing data analysis in ways statisticians would never have imagined</li>
    <li>R.  No one mentioned SAS or SPSS or Excel.</li>
</ul>

Date

Status

Slug edit

Thumbnail

Categories Manage