Created a login form with an SVG avatar that responds to the input in the email field. Used the GSAP TweenMax library + GSAP's MorphSVG plugin for the animating.
Email validation is very simple and crude just for the purposes of getting this prototype working.
| (function(){ | |
| var canvas = document.getElementById('hexmap'); | |
| var hexHeight, | |
| hexRadius, | |
| hexRectangleHeight, | |
| hexRectangleWidth, | |
| hexagonAngle = 0.523598776, // 30 degrees in radians | |
| sideLength = 36, | |
| boardWidth = 10, |
The first 15 seconds of the D3 show reel. See full video at http://vimeo.com/29862153. Includes seamless transitions between the following visualization types:
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .country { | |
| fill: #b8b8b8; | |
| stroke: #fff; | |
| stroke-width: .5px; | |
| stroke-linejoin: round; | |
| } |
| <!DOCTYPE html> | |
| <!-- Helpful things to keep in your <head/> | |
| // Brian Blakely, 360i | |
| // http://twitter.com/brianblakely/ | |
| --> | |
| <head> | |
| <!-- Disable automatic DNS prefetching. | |
| // original (http://html5shiv.googlecode.com/svn/trunk/html5.js) | |
| (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,figure,figcaption,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})() | |
| // kangax version (29 characters less, yay!) | |
| /*@cc_on(function(e,i){i=e.length;while(i--)document.createElement(e[i])})("abbr,article,aside,audio,canvas,datalist,details,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','))@*/ |
| /* | |
| * Copyright (c) 2010 Tobias Schneider | |
| * This script is freely distributable under the terms of the MIT license. | |
| */ | |
| (function(){ | |
| var UPC_SET = { | |
| "3211": '0', | |
| "2221": '1', | |
| "2122": '2', |
| //detect Internet Explorer and version number through injected conditional comments (no UA detect, no need for cond. compilation / jscript check) | |
| //version arg is for IE version (optional) | |
| //comparison arg supports 'lte', 'gte', etc (optional) | |
| var isIE = (function(doc, undefined){ | |
| var cache = {}, | |
| elem; | |
| /* Optimized Script for loading User Voice Script | |
| * Based on idea by kangax @ http://gist.github.com/381634 | |
| */ | |
| var uservoiceOptions = { | |
| /* ... */ | |
| }; | |
| //Using `self` rather than `window` to prevent cross-domain issues when used in iframe | |
| self.onload = (function (w, d, t) { | |
| var _loadUserVoice = function () { |