Zoomooz.js. Zoomooz is: 6KB gzipped and 18KB minified. This includes everything but jQuery. Make any web page zoom. Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details.
Quirky transformations You can zoom to elements that have been translated, scaled and skewed, and they will morph correctly. Try by clicking on these: Skew Scale Rotate There is some interesting stuff happening in the background to make the morphings work. Adding Zoomooz to your web page Just add this to your web page head and you should be up and running with Zoomooz: The easy way to zoom Simply add "zoomTarget" to the element you want to zoom to when clicked on: <div class="zoomTarget">This element zooms when clicked on.
You can also add some additional attributes for tuning the animation as data fields of the element: Here is a demo, click on the elements: Demos. Modern HTML Presentations. Breakpoints.JS - Use real world context clues to adjust your sites content and layout - XOXCO.com. Sigma.js | a lightweight JavaScript graph drawing library. Morris.js. Getting started Add morris.js and its dependencies (jQuery & Raphaël) to your page. 1 <link rel="stylesheet" href=" <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>3 <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>4 <script src=" If you don’t want to use the CDN-hosted assets, then you can extract them from the zip bundle and upload them to your own site.
Your first chart Start by adding a <div> to your page that will contain your chart. Note: in order to display something, you’ll need to have given the div some dimensions. Next add a <script> block to the end of your page, containing the following javascript code: Assuming everything’s working correctly, you should see the following chart on your page: What Next? Check out the rest of the documentation: License Simplified BSD License: Scroll kit. Capture your world in 3D. Planetary.js - des globes en 3D via D3.js. Sometimes you just need to see some code to get an idea started; here are a few examples of what you can build with Planetary.js. Basic Globe It doesn't get any simpler than this: just a static globe, built using built-in plugins with nothing up our sleeves!
Plugins: earthd3: projections Rotating Globe with Pings If there's one thing that's better than a globe, it's a globe that rotates. Plugins: earth, pings, drag, zoomcustom pluginsd3: projections 2013 Seismic Activity Visualization A visualization of 2013 seismic activity. Plugins: earth, pings, drag, zoomcustom pluginsd3: projections, scales, selections, events, external data. Snap.svg - faciliter le SVG animé. Bilan de la datavisualisation en 2013. 2013 was another exciting year for visualization. Between many new developments in data storytelling, a new wave of news graphics, new visualization blogs, better automated infographics, and visuals designed to hit you hard, it is difficult to decide what was most important. Here is a look back, and some ideas about where we’re going.
Storytelling If there was a topic that clearly left its mark on 2013, it’s storytelling. Coming from me, this may not be a big surprise – after all, I predicted this at the beginning of the year. But if you’re a doubter, 2013 gave you lots of reason to doubt your, um, doubts. First, the academic world. Will this continue? Then, there are the conferences. 2013 saw the first Tapestry conference, a conference specific to storytelling with data; its second incarnation is just over a month away. And finally, products. Automated Infographics An idea that I first saw a few years ago really took off in 2013: automated infographics. News Graphics 2014 And Beyond. Un bel outil de parallaxe en JS.