Looking back at 2013 with data visualization resources. Interactive projects, infographic galleries, blog posts and videos about the year that just ended.
Still recovering from a dashing holiday season, today we’ll repeat what we did last year, by compiling the most interesting 2013 retrospectives published online. We begin by mentioning two of the major Internet companies, who’ve been playing a decisive role – each one on its own way – in the spreading of all kinds of information – including news. Twitter and Google have been pulling together yearly recaps for a while now, and this year wasn’t different. Google Zeitgeist 2013 | Google (image: Google) 2013 on Twitter | Twitter (image: Twitter) Other impressive interactive works: 2013, year in review | National Geographic (image: National Geographic) Interactive timeline: 2013 in review | Al Jazeera (image: Al Jazeera) Who and what shaped 2013? (image: Channel 4) The 200 people most frequently mentioned in 2013 | Zeit.
Assorted CSS Animations. Device Loop Animation View the device loop A device loop animation that I created for the new slid.es home page. Flexing Pagination View Flexing Pagination A UI experiment with pagination arrows that "flex" when you hover or press them. Assorted CSS Animations I've been having a lot of fun creating these small CSS-only animations lately. View Cloud Animation View Spinner Animation View Hole Animation Ladda Open Ladda A UI concept which merges loading indicators into the action that invoked them.
Slides Try Slides I'm happy to announce the release of Slides - an easy way to create and share presentations. The app has been rewritten from the ground up to provide the solid foundation we need to be able to iterate faster than what was possible with rvl.io. Kontext Open Kontext A context-shift transition inspired by iOS. Sketch Toy. 20 examples of SVG that will make your jaw drop. SVG (or Scalable Vector Graphics) is an XML-based file format that enables developers and designers to create high quality, dynamic graphics and graphical applications with a great level of precision.All modern browsers support rendering SVG: however, for older browsers like IE6, 7 and 8 without native support, you can fall back on polyfills such as SVG Web that use Flash for rendering content.
This enables you to easily target the majority of users online without worrying about compatibility issues. For mobile web developers wondering about compatibility, I'm happy to report that iOS 3.2+, Opera Mini 5+, Opera Mobile 10+ and Android 3+ also support rendering SVG graphics out of the box. As there are a few similarities between what the <canvas> element and SVG have to offer, developers often wonder which of these they should opt to use.
The answer to this concern is actually both. Read all our web design articles here 01. 02. 30 Inspiring WebGL (Chrome) Experiments. Behold, for a great tool with great promises is coming to your eyes.
It is fast and smooth. It renders 3D, and with integration it animates, guess what it is? HTML5? CSS3? No, it’s called WebGL, a software library that extends the capability of the JavaScript to generate interactive 3D graphics, and yes, without any plugins! In this showcase, we don’t want to show you the regular things. More related posts: You are strongly recommended to view these demos using the latest version of Developer version of Google Chrome. 3 Dreams of Black Authored by Google Data Arts Team, 3 Dreams of Black brings you into 3 dream worlds constructed through a combination of rich 2D drawings and animations interwoven with interactive 3D sequences.
Animated Volume Particles This one is really artistic – animated animals constructed by 3D particles using float textures and frame buffer objects. Aquarium Simulate an underwater environment? Azathioprine Probably the most epic WebGL demo, enough said. Attractors Trip. Getting Started with Three.js. Introduction I have used Three.js for some of my experiments, and it does a really great job of abstracting away the headaches of getting going with 3D in the browser.
With it you can create cameras, objects, lights, materials and more, and you have a choice of renderer, which means you can decide if you want your scene to be drawn using HTML 5's canvas, WebGL or SVG. And since it's open source you could even get involved with the project. But right now I'll focus on what I've learned by playing with it as an engine, and talk you through some of the basics. For all the awesomeness of Three.js, there can be times where you might struggle. 1. I will assume that you have at least a passing knowledge of 3D, and reasonable proficiency with JavaScript. In our 3D world we will have some of the following, which I will guide you through the process of creating: A scene A renderer A camera An object or two (with materials) 2. Just a quick note on support in the browsers. 3. Not too tricky, really! WebGL eBooks.
Dear Esther.