background preloader

Envision - demos

Envision - demos

Flot: Attractive JavaScript plotting for jQuery 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?

Cube Time Series Data Collection & Analysis Cube is a system for collecting timestamped events and deriving metrics. By collecting events rather than metrics, Cube lets you compute aggregate statistics post hoc. It also enables richer analysis, such as quantiles and histograms of arbitrary event sets. Cube is built on MongoDB and available under the Apache License on GitHub. Collecting Data An event in Cube is simply a JSON object with a type, time, and arbitrary data. Cube’s collector receives events and saves them to MongoDB. Querying Events Cube defines a simple language for querying events. You can intersect filters and customize which event fields are returned. request(browser).gt(duration, 250).lt(duration, 500) Cube supports both HTTP GET and WebSockets for retrieving events. Querying Metrics You can also use Cube to group events by time, map to derived values, and reduce to aggregate metrics. The first few results of which appear as: sum(request.eq(path, "/search")) sum(request(duration))

Cubism Mike Bostock Square, Inc. * for monitoring of production systems How do we use visualization? Anomaly detection - observe abnormal activity Capacity planning - extrapolate non-linear trends Crisis diagnosis - see interactions between services System design - don’t guess; decide empirically What are the benefits of visualization? Faster diagnosis - reduce impact Discovery of unexpected behavior - prevent downtime Increased situational awareness - make better decisions Or: The strengths & weaknesses of human perception. Why is visualization hard? Data is not information - transform data to make it meaningful Some visual channels are less effective - favor position Integrality is hard to avoid - three dimensions max. Aspect ratios matter. Stacking makes middle layers hard to read. Garish colors can be hard to see. Load and render data incrementally. Make better use of modern browsers. Combine position and color to reduce vertical space. A small library, not a system. Why a context? CPU (10s) Network (10s)

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

gka/chroma.js Gephi, an open source graph visualization and manipulation software API Design One of the development tasks I do most often is designing the API for a reusable component. The components are usually for iOS (though sometimes they’re for OS X), and are invariably GUI controls or views of some kind. I’ve designed literally dozens of component APIs over the years, including for clients like Apple, and I’ve learned quite a bit about the process. I periodically release open source components too, and the feedback I’ve had has helped me put together a set of guidelines for API design that I’d like to share with you. This is an important topic, whether you’re an open source contributor, or working as part of a team on a large app, or just creating your own software. Just like the first launch experience of an app, your API is part of the first impression that a developer will have with your code, and will have a huge impact on whether they use it or throw it away. APIs are UX for developers. Desirable qualities IntuitiveForgivingFrictionless The developer interface It’s fine.

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.

Raphaël—JavaScript Library SVG Graphics Library for JavaScript HTML5 :jsDraw2DX

Related: