InfoActives - Interactive Infographics with ZIM JavaScript Canvas Framework - zimjs.com

Dr. Abstract explains and defines generative art for the HTML Canvas with JavaScript, CreateJS and ZIMjs interactive media framework

Infoactives are interactive infographics. This is a relatively new field with lots of potential. See how we distinguish this from an information site by pressing the MORE button!

History

Here are some examples of traditional infographics - images that generally show sectioned data with icons, charts, etc. in a nicely designed and friendly story-like manner.

InfoActive

Now imagine an infographic where the charts, statistics, characters, etc. are animated. This might get a little busy or visually complicated. So instead, make the infographic interactive. On a simple level, we could let the viewer chose a section to animate. But more engaging interactivity goes beyond selection. Here is a scale of interactivity:

Opportunity

This is really just Interactive Media. We have been doing this since the days of CD-ROMs where a page has all sorts of little things to activate or play with. Infographics are beautiful - so nicely designed, so magical. They feel NEW. Using interactivity with this same aesthetic provides opportunity to build careers and help humanity.

rolling over or pressing provides a little animation
SEE arrows and toggles can reveal different information
SEE sliders and dials can change data
dragging items to targets shows related statistics
SEE repeated interaction can simulate time
SEE emitters can recreate data

None of the ZIM examples is quite an infoactive. They do let people interact with and experience information but they are not in the cute concise format visualized. Frank Los is heading this way and makes good use of scaling. Bigger sliding pages that offer more freedom have been around for a while and may ultimately make more sense but it would be good to try working on the tighter infographic scale.

Scrolling

Animating while scrolling or swiping is an excellent way to dynamically show information. This can also be achieved with a slider, dial, mouse position on a page for non-mobile and tilt for mobile. Microsoft does a nice job on their By the Numbers story information but it is primarily decorative.

The Holiday Card and Scroll Parallax show possibilities with ZIM and scroll parallax as do the Frank Los Parallax Banners.

Education

The ZIM Learn section has all you need to know to learn about coding with ZIM. Many of the Interactive Examples can be applied to infoactives. View the source (CTRL U) most are commented. You can paste the source into Docs Customizer to get a documentation list of all the commands in the code. Try using: