Interactieve infographics

Als anonieme onderaannemer van een gerenommeerd internetbureau ontwikkelde ik een aantal interactieve infographics. Het grafisch ontwerp voor de infographics is aangeleverd door de opdrachtgever en door mij omgezet in HTML(5), CSS(3) en jQuery.

Infographic 1

De eerste infographic is ontwikkeld voor een zorginstituut en bestaat uit een online enquete formulier in de vorm van een dynamische infographic. De infographic bestaat uit veertien fullscreen verticaal scrollende slides. In iedere slide wordt een meerkeuzevraag gesteld via maatwerk vormgegeven radiobuttons. Na beantwoording van een vraag kan via een knop naar een volgende of vorige slide worden genavigeerd. Hierbij crossfaden de slides en scrollen zij in verticale richting m.b.v. de jQuery scrollTo plugin. Bij het beantwoorden van een vraag worden diverse jQuery animaties afgespeeld, waaronder:

  1. Roterende cirkeldiagrammen
    In diverse slides wordt na het beantwoorden van een vraag een geanimeerd cirkeldiagram getoond. Deze diagrammen genereer ik via een maatwerk jQuery script dat gebruik maakt van de HTML5 canvas api. Ondersteuning van het canvas element in IE8 wordt gerealiseerd via de jQuery Explorer Canvas plugin.
  2. iPad compatible drag & drop zorginstellingen
    In een bepaalde slide kunnen zorginstellingen via drag & drop naar een provincie op de Nederlandse kaart worden gesleept. De "drop" activeert een provincie en animeert een cirkeldiagram. Het geheel is opgezet m.b.v. jQuery UI en jQuery UI Touch Punch zodat het ook op mobile devices werkt.
  3. Dynamische wolken
    In een aantal slides drijven wolken van rechts naar links over het scherm. Deze wolken en hun positie en snelheid genereer ik willekeurig via een maatwerk jQuery script.

Bekijk deze interactieve infographic online
(I.v.m. discretie naar de klant is de infographic geanonimiseerd).

Infographic 2

De tweede interactieve infographic is ontwikkeld voor een internationale verzekeringsmakelaar en bestaat uit een elftal verticaal scrollende slides met diverse animaties, waaronder:

  1. Een aantal veiling weegschalen waarbij de wijzer d.m.v. een maatwerk jQuery script en de HTML5 canvas api wordt geanimeerd.
  2. Horizontale sliders die:
    1. De kleur van planten wijzigen van groen naar grijs en vice versa.
    2. De leeftijd van een persoon in een avatar wijzigen van jong naar oud en vice versa.
    3. Zaden op een akker laten vallen waarbij de kleurverhouding tussen de zaden wordt bepaald a.d.h.v. de positie van twee sliders.
  3. Onweer bestaande uit voorbij drijvende wolken, regen en bliksem effecten.


Bekijk deze interactieve infographic online
(I.v.m. discretie naar de klant is de infographic geanonimiseerd).

Infographic 3

De derde interactieve infographic is voor hetzelfde zorginstituut ontwikkeld als de eerste infographic en bestaat ook weer uit een aantal verticaal scrollende fullscreen slides met een groot aantal animaties, waaronder:

  1. Een "muiscursor oog"
    D.w.z. een "oog" dat de positie van de muiscursor volgt wanneer deze over het scherm wordt bewogen, uitgewerkt via een maatwerk jQuery script.
  2. Een stad in vogelvlucht
    De plattegrond van een stad in vogelvlucht gevuld met dynamische elementen, waaronder:
    1. Rijdende ambulances met knipperende lichten.
    2. Draaiende windmolens.
    3. Voorbij drijvende wolken.
    4. Popups met teksten.
    5. Iconen met bounce animatie.
    De afbeelding van de stad neemt altijd honderd procent van de breedte van de browser in en zoomt in een bepaalde slide in. Hierbij worden de positie en afmetingen van de dynamische elementen herberekend.

Bekijk deze interactieve infographic online
(I.v.m. discretie naar de klant is de infographic geanonimiseerd).