Data Visualization Tools
A selection of tools, libraries, and APIs for creating interactive and dynamic data visualizations.
Hacking Xbox Kinect—Interactive Puppet Prototype
It has been only a few short weeks since the Xbox Kinect was released, but already you can find a number of people hacking the Kinect to create really interesting experiences and prototypes. This interactive puppet prototype was put together in one day by the talented Emily Gobeille and Theo Watson of Design I/O. This Kinect prototype uses the opensource packages openFrameworks and OpenKinect.
See these other amazing Kinect hacks…
- Body Dysmorphic Disorder by Robert Hodgin (flight404) using the Cinder library
- DepthJS Chrome Extension using DepthJS
- 3D Drawing using ofxKinect
- NES Super Mario Kinect using OpenKinect
- Kinect Piano (Tom Hanks’ Big style) using OpenKinect
New Safari Features in iPhone & iPad 4.2
With the recent 4.2 update for the iPad and iPhone Apple quietly added a number of new features to mobile Safari. Mobile Safari now has direct support for the accelerometer, gyroscope, HTML5 web sockets, updated HTML5 form support, new Javascript data types, updated DOM events, and enhanced SVG and Canvas support.
Also it appears that mobile Safari now has far better support for @font-face switching from preferring SVG fonts to TTF fonts. This one change now opens up the door to using Google Fonts on the iPad without crashing the browser. With some initial testing it looks like I’ll be able to update the Inspire Well theme to re-enable the use of Google Fonts on the iPad.
From the comments:
@font-face has worked for a long time on iOS given some specific caveats. However, the new news on web fonts in 4.2 is that iOS now prefers the TTF version of a font over the SVG version (formerly SVG was the only format supported.)
The other nice thing about web fonts on 4.2 is that they now work in offline webapps. This was a big deal for me and I only discovered it by luck. Still; this will be a pretty handy feature for a lot of folks I think.
Fluid 1140px CSS Grid System
Great looking CSS grid framework by Andy Taylor that is designed for 1280px wide monitors, but scales all the way down to mobile resolutions. Don’t be surprised if this ends up in a future Style Hatch premium Tumblr theme.
Next week I’ll post more details about several of the upcoming themes that’ll be launching soon. Lots of exciting projects in the works!
Maki - Pixel Perfect Design to Build Tool
Overlay your design comp on the HTML and CSS build to make sure your site is pixel perfect.
Ultimate CSS Gradient Generator
Fantastic! Bookmark this tool.
Reblogged from Jacob
umbruUI - CSS3 Checkboxes
Elegantly developed CSS3 checkboxes that requires no JavaScript. Although it seems that they only work perfectly in Safari. Designed by Mike Bernardo and coded by simurai—the same guy behind the BonBon CSS3 Buttons.
Tweet Nest
Developed by Andy Graulund, Tweet Nest is “a browsable, searchable and easily customizable archive and backup for your tweets”. The easy self-hosted installation requires PHP 5.2 or higher and MySQL 4.1 or higher. Once it’s installed you can easily setup automated jobs to import your tweets every hour or day. Although Tweet Nest is pretty slick as-is with a bit of customization and extension you could easily come up with something amazing.
I setup a test installation at http://tweetnest.newezra.com/. Tweet Nest does a great job graphing tweets, replies and retweets for each month. Adding in rendering for image services like twitpic and @anywhere integration for Twitter profile cards are both nice touches.
Follow me on Twitter (@newezra) if you aren’t already.
Lettering.js
A useful jQuery plugin developed by Dave Rupert and Trent Walton for the forthcoming Operation Condor, that splits an HTML element into its component letters, words or lines for easier CSS styling. From the announcement:
We developed a really simple, lightweight, easy to use jQuery plugin, we’re calling it “Lettering Dot JS”, and we’re releasing it today for free over on Github. Let me demo it for you:
</stevejobs>
Reblogged from Matthew Buchanan
Biolab Disaster - Pure HTML5 & JavaScript
Dominic Szablewski put together an incredibly impressive demonstration of what he’s able to pull of with pure HTML5 and JavaScript with the game Biolab Disaster. Although the graphics and gameplay are on par with what you’d expect out of the NES in the early 1990s it still shows the bright future for in-browser games and applications.
Read more about Biolab Disaster and the Impact HTML5 Game engine on Dominic’s blog.
BonBon Buttons
I first spotted the experimental CSS3 buttons on Dribbble last week, and now the interactive designer, simurai, posted a demo of the buttons on his site. Overall the implementation is well done and all it needs is a few hacks to get it working on older browsers and IE. The buttons also feature Drew Wilson’s font-face icon set Pictos.
Pictos @font-face Icon Font
Pictos by Drew Wilson is one of my favorite sets of icons that have made their way into virtually every design project over the last several months—including the Inspire Well theme. Converting the icon set into a font file seems like a genius move that lets you embed the icons as @font-face type. This allows the designer to have far more control over size, color and appearance of the icons with CSS text styling. The only downside I can think of would be random letters used for the icon font throughout your HTML.
Reblogged from Cameron Moll
How to View Source in Safari on the iPad
Incredibly useful tip. Thanks @soupenvy!
ShopStyle - Sencha Touch Demo
Excellent demo from the Sencha team showing off a perfect example of an HTML based iPad application. Great work guys!
The latest demo app for Sencha Touch is ShopStyle, based on the popular lifestyle native app for iPhone and iPad. Our web app showcases an “infinite carousel”, a new feature of our carousel component. The major feature of the infinite carousel is active DOM management that keeps the web app within the iPad’s memory limits.
Check out our mini-site dedicated to the ShopStyle app, and if you’re in a WebKit browser or reading on your iPad, take the app for a spin!
ScriptSrc
Quickly copy the script path to the Google hosted code for the most popular Javascript libraries.
