interactiveinfographc

Interactive Infographic

Client: Consulting Agency

Scope: Develop a standalone interactive infographic interface that returns comparative results via PHP and AJAX/jQuery.

Skills Required: HTML5, CSS3, jQuery, PHP

See the working example here: http://jondaydesign.net/interactiveinfographic/

Project Details: This is a standalone package consisting of an html file, a jquery file, a php script and a csv file. This can be installed on any server, as the csv data is automatically scraped by the php script. The results are returned via AJAX in the form of percentages of a whole. After the user enters their choices in the displayed form, the data is compared to the csv file to make calculations.

Each selection represents a piece of criteria that must be met to be counted toward the percentage. As more selections are made, the results are narrowed down further, resulting in a smaller percentage. The data is returned to the front-end interface, and displays are animated into view that show the results. I used a “counter” style animation for the percentages. The user is also automatically scrolled to the animation as it occurs, which happens in sequence (total of two…in the form of two blocks of two).