Nick Sieger: RubyConf: Graphics with Ruby tag:blog.nicksieger.com,2005:Typo Typo 2007-08-31T16:50:37+00:00 Nick Sieger urn:uuid:c4cb7cde-ff0f-4760-aefe-71d6461b89b3 2006-10-20T20:18:00+00:00 2007-08-31T16:50:37+00:00 RubyConf: 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&#8217;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 &#8211; SVG graphs, no dependencies (i.e., RMagick)</li> <li>GNUPlot &#8211; the old standby</li> <li>MRPlot &#8211; scientific plots</li> <li>PNG &#8211; line and font drawing in pure ruby from Seattle.rb</li> <li>Gruff &#8211; depends on RMagick</li> <li>Sparklines &#8211; 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 &#8211; plotting bars on a timeline showing happy hours in Portland</li> <li>&#8220;Scene graph&#8221; &#8211; rendering multiple layers of images/icons on the filesystem into a composite graphics &#8220;scene&#8221;</li> <li>BillMonk.com &#8211; 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 &#8211; show two competing trendlines on a graph</li> <li>Multivariate analysis &#8211; stockhive.com stock chart rendering</li> <li>Content is king &#8211; be judicious</li> </ul>