background preloader

Progressive <canvas> pie charts

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

Flot: Attractive JavaScript plotting for jQuery jStat : a JavaScript statistical library allynbauer/statuspanic untitled Top 13 HTML5 – CSS3 frameworks to spice up your projects HTML5 and CSS3 represent the near future of the web. The last versions of all major browsers support many of the new features introduced by these versions. If you want to try the new HTML5 properties (Canvas, Geolocalization, …) or new CSS3 rules (media queries, …) you can also use the frameworks examined in this article. These frameworks are used to create your HTML5/CSS3 templates, to develop your mobile applications, to draw graphs easily and much more. Read on to choose your next framework. 52Framework 52Framework is a new framework built specifically for utilizing HTML5 and CSS3 in a cross-browser, standards-compliant manner. HTML5 Use of all the most useful current html5 tags including: header, nav, section, article, footer, and more to come soon (with styling)Use of the all new <! Link: Baseline Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Link: Sproutcore jo

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.

arbor.js Measure Anything, Measure Everything Measure Anything, Measure Everything Posted by Ian Malpass | Filed under data, engineering, infrastructure If Engineering at Etsy has a religion, it’s the Church of Graphs. If it moves, we track it. Application metrics are usually the hardest, yet most important, of the three. Meet StatsD StatsD is a simple NodeJS daemon (and by “simple” I really mean simple — NodeJS makes event-based systems like this ridiculously easy to write) that listens for messages on a UDP port. We like graphite for a number of reasons: it’s very easy to use, and has very powerful graphing and data manipulation capabilities. Not only is it super easy to start capturing the rate or speed of something, but it’s very easy to view, share, and brag about them. Why UDP? So, why do we use UDP to send data to StatsD? Measure Anything Here’s how we do it using our PHP StatsD library: StatsD::increment("grue.dinners"); That’s it. Time Anything Too In addition to plain counters, we can track times too: Sampling Your Data

jQuery: The Write Less, Do More, JavaScript Library Tous des gros cons ? Il y a quelques jours, je me faisais interpeller sur Twitter : Oui, je sais, il y a un gros mot dans ce tweet... Mais ne vous arrêtez pas à ça car c'est un moyen comme un autre d'attirer l'attention et sur le fond il a peut être raison... En effet, si on se réfère à la vision basique qu'ont les gens sur le téléchargement illégal, il y a 2 catégories de personnes... A la bonne époque, celle d'eMule et de Bittorrent, c'était le partage qui était à l'honneur. Mais avec l'arrivée de la loi Hadopi, la donne a changé... du peer 2 peer, une majorité de gens sont passés au téléchargement direct : Megaupload, Rapidshare, dl.free.fr, Fileserve, Gigaup...etc. Je reviens sur le concept de pirate... Des gens qui achètent légalementDes irréductibles pirates qui ne lachent pas un centime pour une oeuvreDes pirates qui payent pour télécharger illégalement Ces derniers sont-ils plus pigeons que les premiers (ou des "gros cons" comme le dit dabYo) ? Tout le monde est fautif... [Photo]

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?

envision - demos Envision.js is a library for creating fast, dynamic and interactive HTML5 visualizations. Real-Time: TimeSeries template with real-time data. This demo features animation of the selection when new data arrives. TimeSeries: HTML5 time series chart. Finance: HTML5 financial chart. Ajax: August 19, 2004 March 4, 2010 AJAX driven financial chart. Custom - Fractal: A custom built visualization which draws a fractal. Dashing - The exceptionally handsome dashboard framework. JavaScript Garden Function Declarations and Expressions Functions in JavaScript are first class objects. That means they can be passed around like any other value. One common use of this feature is to pass an anonymous function as a callback to another, possibly an asynchronous function. The function Declaration function foo() {} The above function gets hoisted before the execution of the program starts; thus, it is available everywhere in the scope it was defined, even if called before the actual definition in the source. foo(); // Works because foo was created before this code runsfunction foo() {} The function Expression var foo = function() {}; This example assigns the unnamed and anonymous function to the variable foo. foo; // 'undefined'foo(); // this raises a TypeErrorvar foo = function() {}; Due to the fact that var is a declaration that hoists the variable name foo before the actual execution of the code starts, foo is already declared when the script gets executed. Named Function Expression How this Works

Related: