background preloader

SeuratJS - A Raphaël plugin for creating beautiful pointillized animations.

SeuratJS - A Raphaël plugin for creating beautiful pointillized animations.
Related:  Node.js | Graphics

Sketch.js - Simple Canvas-based Drawing for jQuery Sketch.js has been tested on Chrome (OS X), Firefox (OS X), Safari (OS X), Android Browser (Honeycomb 3.1). It suffers significant performance degradation on mobile browsers due to general HTML5 Canvas performance issues. Copyright (C) 2011 by Michael Bleigh and Intridea, Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

Unheap - A tidy repository of jQuery plugins sole/tween.js JavaScript object creation: Learning to live without "new" In this article, I'm going to discuss object creation in JavaScript using prototypal inheritance as an alternative to the new operator. One significant aspect of JavaScript is that there is rarely a single right way to do any particular task. JavaScript is a loosely-typed, dynamic, and expressive language, which means that there are usually many different ways to accomplish the same task. I'm not saying that the methods described here to create objects are the only correct ways to do so or even the best ways, but I do feel that they are closer to the true nature of the language and will help you to understand what's going on under the covers if you choose to use other methods. To help you better understand these concepts, this article describes the creation of a basic particle system with multiple rendering targets. The crux of this article is the creation of JavaScript objects. Personally, I see this as a bit of a misguided effort. Embracing prototypal inheritance Adding extend and init

Polymaps Building a Spotify App On Wednesday November 30, Spotify announced their Spotify Apps platform that will let developers create Spotify-powered music apps that run inside the Spotify App. I like Spotify and I like writing music apps so I thought I would spend a little time kicking the tires and write about my experience. First thing, the Spotify Apps are not part of the official Spotify client, so you need to get the Spotify Apps Preview Version. This version works just like the version of Spotify except that it includes an APPS section in the left-hand navigator. If you click on the App Finder you are presented with a dozen or so Spotify Apps including, Rolling Stones, We are Hunted and Pitchfork. A Spotify App is essentially a web app run inside a sandboxed web browser within Spotify. To get started you need to have your Spotify account enabled as a ‘developer’. Under the hood, Spotify Apps is based on Chromium so those that are familiar with Chrome and Safari will feel right at home debugging apps.

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?

Beginner HTML5, JavaScript, jQuery, Backbone, and CSS3 Resources A Beginner's Journey I was recently approached by someone at a .NET User Group about how to get started in HTML5, JavaScript, jQuery, CSS3, etc... The developer's primary background was writing thick client Windows applications. I figured the best place to start is to focus on the bare essentials and then work up to more advanced concepts and resources. I started to respond to the developer in an e-mail, but then I remembered what Scott Hanselman said in a recent post and video ... "Instead, consider writing a blog post or adding to a wiki with your keystrokes, then emailing the link to the original emailer." So, I decided to make this blog post for the developer and also for anyone else who may be interested in similar resources. So, it is pretty obvious that you are going to need to learn HTML5 if you are doing to do front-end web development. Resources JavaScript Even if you think you know JavaScript it might behoove you to go back and learn it from the beginning. jQuery Backbone.js

Rickshaw: A JavaScript toolkit for creating interactive time-series graphs Graphing Toolkit Rickshaw provides the elements you need to create interactive graphs: renderers, legends, hovers, range selectors, etc. You put the pieces together. See Demo → Built on d3.js It's all based on d3 underneath, so graphs are drawn with standard SVG and styled with CSS. Open Source Rickshaw is free and open source, available under the MIT license. Getting Started Here's a minimal but complete working example. Area Graphs Lines Bars Scatterplot Interactive Legend Add a basic legend: Add functionality to toggle series' visibility on and off: Highlight each series on hover within the legend: Add drag-and-drop functionality to re-order the stack (requires jQueryUI): Interactive Hover Details Show the series value and formatted date and time on hover: Specify formatting callbacks to customize output: See the custom formatter and subclass examples for more. Annotations Add toggleable annotations: annotator.add(timestamp, message);annotator.update(); Range Slider Graphs & Data via AJAX / JSONP Tutorial

Details | Adaptive Images Limitations I think this is one of the most flexible, future-proof, retro-fittable, and easy to use solutions available today. But, there are problems with this approach as there are with all of the one’s I’ve seen so far. In the case of Adaptive Images they are these: This is a PHP solution. I wish I was smarter and knew some fancy modern languages the cool kids discuss at parties, but I don’t. Content Delivery Networks. Adaptive Images relies on the server being able to intercept requests for images, do some logic, and then send one of a given number of responses. A minor but interesting Cookie setting issue. As Yoav Veiss pointed out in his article Pre-loaders, Cookies, and race-conditions there is no way to guarantee that a cookie will be set before images are requested - even though the JavaScript that sets the cookie is loaded by the browser before it finds any <img> tags. Adaptive Images checks the User Agent String for the presence of 'mobile'. The Future

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?

Single page apps in depth (new free book)