Nick Sieger: RubyConf: Graphics with Rubytag:blog.nicksieger.com,2005:TypoTypo2010-11-22T18:06:39+00:00Nick Siegerurn:uuid:c4cb7cde-ff0f-4760-aefe-71d6461b89b32006-10-20T20:18:00+00:002010-11-22T18:06:39+00:00RubyConf: Graphics with Ruby<p>Geoff Grosenbach is waxing on pagefuls of numbers condensed into a small, tidy graph that increases the amount of information you can communicate on a page.</p>
<p><a href="http://www.flickr.com/photos/nicksieger/279242427/" title="Photo Sharing"><img src="http://static.flickr.com/107/279242427_32770c5081_m.jpg" width="240" height="160" alt="Topfunky fox" /></a><br/>
<em>The cartoon fox makes his second appearance of the day in one of Geoff’s sparklines</em></p>
<p>It is in our hands, the hands of the programmer, to show designers what the range of visual representation capabilities are.</p>
<h2>Libraries</h2>
<ul>
<li>Scruffy -- SVG graphs, no dependencies (i.e., RMagick)</li>
<li>GNUPlot -- the old standby</li>
<li>MRPlot -- scientific plots</li>
<li>PNG -- line and font drawing in pure ruby from Seattle.rb</li>
<li>Gruff -- depends on RMagick</li>
<li>Sparklines -- depends on RMagick</li>
<li>[Ploticus and RRD were mentioned during the talk as well]</li>
</ul>
<h2>Applications</h2>
<ul>
<li>Automatically generating image mastheads with a font mask, a gradient and a cloud image showing through the mask</li>
<li>UrbanDrinks.com -- plotting bars on a timeline showing happy hours in Portland</li>
<li>“Scene graph” -- rendering multiple layers of images/icons on the filesystem into a composite graphics “scene”</li>
<li>BillMonk.com -- rendered image with multiple components that allows you to circumvent cross-site or crippled javascript issues</li>
<li>In a Rails controller:
<ul>
<li>Generate and cache (with <code>caches_page</code>) an image with text</li>
<li>Register a new mime type and use <code>responds_to {|type| type.jpg { ... } }</code></li>
</ul></li>
<li>Requisite reference to Edward Tufte</li>
</ul>
<h2>Techniques</h2>
<ul>
<li>Comparisons -- show two competing trendlines on a graph</li>
<li>Multivariate analysis -- stockhive.com stock chart rendering</li>
<li>Content is king -- be judicious</li>
</ul>