Protovis
Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify construction. Protovis is free and open-source, provided under the BSD License. Protovis is no longer under active development.The final release of Protovis was v3.3.1 (4.7 MB). This project was led by Mike Bostock and Jeff Heer of the Stanford Visualization Group, with significant help from Vadim Ogievetsky. Updates June 28, 2011 - Protovis is no longer under active development. September 17, 2010 - Release 3.3 is available on GitHub. May 28, 2010 - ZOMG! October 1, 2009 - Release 3.1 is available, including minor bug fixes. September 19, 2009 - Release 3.0 is available, including major performance improvments, bug fixes, and handy utilities such as scales and layouts. Getting Started How does Protovis work?
Data Visualization Software Lab - Data visualization JavasScript library for adding interactive touch-screen driven charts and graphs to your web site (Javascript and HTML5 SDK)
anvaka/VivaGraphJS
Regexp::Grammars - Add grammatical parsing features to Perl 5.10 regexes
Regexp::Grammars - Add grammatical parsing features to Perl 5.10 regexes This document describes Regexp::Grammars version 1.033 In your program... Defining and using named grammars... Defining rules in your grammar... Matching rules in your grammar... In your grammar's code blocks... Directives... This module adds a small number of new regex constructs that can be used within Perl 5.10 patterns to implement complete recursive-descent parsing. Perl 5.10 already supports recursive=descent matching, via the new (? This technique makes it possible to use regexes to recognize complex, hierarchical--and even recursive--textual structures. An additional problem when using Perl 5.10 regexes to match complex data formats is that you have to make sure you remember to insert whitespace-matching constructs (such as \s*) at every possible position where the data might contain ignorable whitespace. The Regexp::Grammars module solves both those problems. Setting up the module Just add: to any lexical scope.
Cubism.js
Time Series Visualization foo7.6 bar−6.2 foo + bar1.4 foo - bar14 Cubism.js is a D3 plugin for visualizing time series. Scalable Cubism fetches time series data incrementally: after the initial display, Cubism reduces server load by polling only the most recent values. Effective Cubism also scales in terms of perception: small multiples aligned by time facilitate rapid comparison. Area (120px)7.6 Area (30px)7.6 In contrast, horizon charts reduce vertical space without losing resolution. Horizon, 1-band (120px)7.6 Horizon, 2-band (60px)7.6 Horizon, 3-band (40px)7.6 Horizon, 4-band (30px)7.6 By combining position and color, horizon charts improve perception: position is highly effective at discriminating small changes, while color differentiates large changes. Flexible Cubism is data-source agnostic. Want to learn more?
Sparklines
News 15 June 2013 - Version 2.1.2 Relased This release adds support for jQuery 1.10.0 and other bug fixes and minor improvements. See the full changelog for details of all changes. 26 January 2013 - Version 2.1.1 Relased This release adds support for jQuery 1.9.0 along with a couple of other bug fixes. If you're using a version of jQuery later than 1.8, be extra sure you're not rendering your page in quirks mode to avoid breaking tooltips for IE users. See the full changelog for details of all changes. 15 October 2012 - Version 2.1 Released This release is primarily a bug-fix release, but also adds support for Internet Explorer 10. See the full changelog for details of all changes. 29 April 2012 - Version 2.0 Released This release represents a significant code update. Customizable mouseover tooltips and interaction including highlighting of moused-over values. It should be fully backwards compatible with the 1.x versions with the following exceptions: There's a few non-code updates as well: eg.
Flare | Data Visualization for the Web
HTML5 canvas - an introduction to it
by Richard Heyes, RGraph author Introduction <canvas> is a new HTML tag which is part of the HTML5 standard. The <canvas> tag uses a "fire and forget" drawing methodology - there is no DOM that is maintained, so if you want to alter something you'll probably (but not necessarily) have to redraw the entire canvas. Other uses for <canvas> include providing a control panel to your users and using it to create games. History of the tag HTML5 canvas was originally introduced by Apple in 2004 for use in Mac OS X WebKit to power dashboard applications and their Safari web browser. A usage example The example to the right is a very simple example of drawing a few primitives on the canvas. The <canvas> tag itself is defined with just width, height and id attributes. <canvas id="cvs" width="600" height="250" style="border: 1px solid gray">[No canvas support]<canvas> The content in between the tags is not shown if the browser supports canvas, and is if the browser doesn't. Javascript & web charts
J Home
Speeding Up D3.js: A Checklist | Safari Blog
A guest post by Peter Le Bek, founder of RethinkUI, an frontend development agency based in Glasgow, UK. He tweets at @_lebek and writes code at github.com/lebek. D3.js is a bit like the C of visualization frameworks. Programmers are often surprised to learn that D3.js doesn’t include high-level charting functions (e.g. plot(), bar(), or line()). In my last post I showed you how to build responsive visualizations with D3.js. Does your code generate many SVG elements? SVG performance varies across browsers and devices, but they all have their limits. Solution: Remove non-essential elements (e.g. group elements) Group elements (<g></g>) are useful when a set of elements need to share some properties. points = svg.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function(d) { return "translate(" + d[0] + "," + d[1] + ")"; }); points.append("circle").attr("r", 5); points.append("text").text("label"); Alternative solution: Use a canvas element instead of SVG Conclusion
Peity • progressive <canvas> pie charts
Peity (sounds like deity) is a jQuery plugin that converts an element's content into a <svg> mini pie 2/5 donut 5,2,3 line 5,3,9,6,5,9,7,3,5,2 or bar chart 5,3,9,6,5,9,7,3,5,2 and is compatible with any browser that supports <svg>: Chrome, Firefox, IE9+, Opera, Safari. Download version 3.2.1 Uncompressed 8.7Kb jquery.peity.js Minified 3.6Kb (+gzipped 1.7Kb) jquery.peity.min.js Source github.com/benpickles/peity Pie Charts Call peity("pie") on a jQuery selection. You can also pass delimiter, fill, height, radius and width options. <span class="pie">1/5</span><span class="pie">226/360</span><span class="pie">0.52/1.561</span><span class="pie">1,4</span><span class="pie">226,134</span><span class="pie">0.52,1.041</span><span class="pie">1,2,3,2,2</span> JavaScript $("span.pie").peity("pie") Donut Charts Donut charts are the same as pie charts and take the same options with an added innerRadius option which defaults to half the radius. $('.donut').peity('donut') Line Charts $(".line").peity("line") Events
