It is built on top of the D3.js visualization library and can render stack or line graphs. The graphs are interactive, respond to hovering them or their legends, items in the stack can be re-ordered with drag 'n' drops and more. There is a good margin for customization: colors, sizes, interpolation and functionality in general with the modular/extendable structure of the toolkit.
Ice (or Ice.js) is an implementation of change tracking for any content-editable element on the Web. It can track changes (inserts, deletes) from multiple users, and has some optional plugins for converting "smart" quotes and creating em-dashes. Hands-on experience is probably the best way to get an idea what Ice.js can do. The current demo shows a plain content-editable element with Ice.js as well as a TinyMCE instance using Ice.js as a plugin. The TinyMCE demo includes buttons for accept, accept all, reject and reject all. Curtain.js – Create a page with multiple fixed panels that unroll with an amusing effect.
Drag an mp3 over and watch the 3D graphic equalizer style visualization liven up your browser window. It’s mesmerizing and quite performant. Analog or digital. You may have noticed that we’re fond of a bit of retro, so it was hard to resist this pixelated music video from Wildlife Control… from their blog: We were tinkering around with the SoundCloud API late one night several weeks ago and realized we could use the timing events and track comments to make something cool.
At the time, we were thinking it would be a quick little animated ASCII thing. Web-Drawing Throwdown: Paper.js Vs. Processing.js Vs. Raphael. Advertisement Before drawing anything in a browser, ask yourself three questions: Do you need to support older browsers?
If the answer is yes, then your only choice is Raphaël. It handles browsers all the way back to IE 7 and Firefox 3. Braaains! I’m letting out my inner zombie, and I think you should, too!
It’s an online, collaborative, multiplayer music making toy made by Dinahmoe. It uses Node.js and WebSockets to create an multi-user “chatroom” but instead of entering text to have a chat, the interface generates music! Pulsating circles are generated by moving the mouse over a <canvas> element. Trigger Rally – online edition. Trigger Rally is a fast-paced open source racing game for Linux, maintained by a small but dedicated team of developers.
The game itself adheres to the same open principals as the operating system it was originally built for, using creatively licensed art, audio and 3D assets. And it’s now available to play online through this WebGL port by jareiko. WebGL and Three.JS power the graphics. "Input/Output" by Instrument. From the Author: Launch the particle from the input to the output in this HTML5 game developed for Google I/O 2012.
Heatmap instances contain a store in order to colorize the heatmap based on relative data, which means if you’re adding only a single datapoint to the store it will be displayed as the hottest(red) spot, then adding another point with a higher count, it will dynamically recalculate. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready. SlabText – a jQuery plugin for creating big, bold & responsive headlines. I’ve been wanting to attempt a port of Erik Loyer’s slabtype algorithm for quite some time now and seeing Paravel’s fittext jQuery plugin, in combination with a gloriously hassle-free lunch hour gave me the impetus to attempt it. This is the result – resize the browser viewport to see the effect in action. So what does the script do again? Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space.
Blur Any Web Element Easily – Blur.js. Blur.js is a flexible jQuery plugin for implementing blur effect to any web element. It actually works by creating and placing psuedo-transparent blurred elements over the targeted ones and makes use of the StackBlur algorithm. The source of the blurred item (it can use the background of body or other HTML elements), radius of the effect and it is positioning can be defined with ease. There is built-in caching for re-using the blurred image and there is support for making the item where the effect is applied to be draggable (requreis jQuery UI). JS1K Speech Synthesizer. When you think of your computer talking to you it’s usually space aged computers and robots, or maybe Siri if you’re less imaginative. You probably don’t think of it happening in your browser, and especially not something made for JS1K. Showing up the other sound generating entries, Mathieu Henri created this JS1K Speech Synthesizer for the contest.
It’s a super simple speech synthesizer that “says” what you’re typing as you type, and then the whole line once you hit enter. While it’s pretty amazing to see this done in your browser and at such a small file size, you’re not going to be able to use this for your next round of prank calls: To go under 1K, I had to limit the synthesizer to two format filters using either a sawtooth or noise and discard plosive sounds.