1 Interactieve infographics met Illustrator en CSS3 Je eigen bewegende infographic met uitgebreide uitleg! Door Daniel de Kruijf Voorkennis: de allere...
Interactieve infographics met Illustrator en CSS3 Je eigen bewegende infographic met uitgebreide uitleg! Door Daniel de Kruijf Voorkennis: de allereerste basis van HTML. Opmerking: in deze storial, een combinatie van story en tutorial, wordt verwezen naar een website met videomateriaal en links naar interessante websites. Ga hiervoor naar http://infographicstorial.wordpress.com.
Illustrator: infographics maken ................................................................................... 6 Achtergrond & gradients .................................................................................................................................7 Ontwerp de diagrammen ................................................................................................................................8 Toelichting bij de vormen ...............................................................................................................................9
Inleiding Er is in de wereld al veel geschreven over infographics: afbeeldingen met aantrekkelijk en grafisch gepresenteerde informatie. Infographics worden geschaard onder het specialisme “datavisualisatie”. Datavisualisatie is het grafisch weergeven van informatie in het algemeen. De term datavisualisatie is dus de overkoepelende term voor grafische informatie. Infographics presenteren informatie en geven toelichting bij die informatie. De term infographic is veel breder dan wordt gedacht. Vaak wordt gedacht aan infographics die tegenwoordig veel op internet te zien zijn: felle en aantrekkelijke afbeeldingen met diagrammen, figuren, objecten en alles wat de afbeelding tot één geheel maakt. Infographics en vooral datavisualisatie gaan veel verder dan dat. Wanneer je denkt aan grafisch gepresenteerde informatie, vallen veel meer uitingen onder datavisualisatie: denk alleen maar aan tekens, borden, plattegronden of illustraties. Een infographic is data gepresenteerd in een visueel schrift, in een afbeelding. Infographics kunnen heel belangrijk zijn: het biedt direct een inzicht en een ander perspectief op een dataset die niet op het eerste gezicht te doorgronden is. Het verandert de manier waarop mensen iets beleven, vooral nu het veel op internet wordt gebruikt om tekstuele informatie te ondersteunen. Infographics bieden een nieuwe kijk op de wereld van data en zetten deze complexe data om in een aantrekkelijke afbeelding. Infographics worden vaak gebruikt om patronen te ontdekken. Het sorteert en presenteert informatie op zo’n manier dat het ontdekken van patronen in data veel makkelijker gaat dan in een droge dataset. Een dergelijke illustratie vertelt een verhaal en doet dat vaak op een aantrekkelijke manier. Dat trekt een kijker om naar de data te kijken en het te begrijpen.
Geschiedenis Infographics kennen een geschiedenis. Grotschilderingen uit de oertijd zijn al een vorm van infographics of datavisualisatie omdat zij zonder woorden objecten in de omgeving beschreven. Het zelfde geldt voor de Egyptische hiëroglyfen waarin verhalen werden verteld van werk en religie. De moderne
2
infographics vinden hun oorsprong bij William Playfair. In 1786 publiceerde hij The Commercial and Political Atlas waarin veel diagrammen stonden die de economie in Engeland representeerden (Gray Funkhouser, 1937). In 1801 publiceerde hij de eerste taartdiagrammen en gebiedsdiagrammen. Ook de bekende Engelse zuster Florence Nightingale gebruikte in 1857 infographics om de koningin Victoria over te halen de militaire ziekenhuis te verbeteren. Haar diagrammen bevatten de doodsoorzaken tijdens de oorlog: voorkombare ziektes in blauw, wonden in rood, en andere oorzaken in zwart. In 1933 maakte Harry Beck de eerste plattegrond van de Londense metro, de Tube. Daarin stonden alleen lijnen en punten om de routes van de metro’s en de locaties van de stations weer te geven. Het was een belangrijke ontwikkeling omdat het de infographics naar het alledaagse leven bracht. In 1972 kwamen infographics op zoals we die nu kennen. Otl Aicher maakte een set van pictogrammen voor de Olympische Spelen waarin menselijke figuren voorkwamen. Deze infographics werden heel populair en beïnvloedden vele grafische publicaties, zelfs tot de huidige tijd. Met de opkomst van software zoals Microsoft Office, waarin een toegankelijke optie verwerkt is om diagrammen te maken, is het voor iedereen mogelijk infographics in de oude zin van het woord te maken. Tegenwoordig is er zelfs veel software beschikbaar die aantrekkelijke en interactieve infographics genereert op basis van een ingegeven dataset (Brunelli, 2010). Infographics op het internet bevatten veelal andere kenmerken dan infographics van voor het digitale tijdperk. De basis is natuurlijk de data of de informatie. Deze data wordt gepresenteerd met lijnen, vierkanten, pijlen en vele andere symbolen. Ze bevatten een bepaalde duiding zoals tekst die de infographic begrijpelijk maakt. Er zijn drie categorieën in de inhoud van infographics: de tekst, de afbeeldingen (zoals illustraties, foto’s of combinaties van beide) en verschillende vormen zoals pijlen die iets aanwijzen (Mol, 2011). Het doel van infographics is het verduidelijken van informatie in kleine visuele pakketjes. Infographic-‐goeroe Nigel Holmes beschrijft het zo: ‘we’re not trying to simplify things, but to clarify’. De data bepaalt nog daarbij altijd de kwaliteit van een infographic; het design en de vorm van interactie ondersteunen daarbij alleen.
3
Eigenschappen van datavisualisatie Datavisualisatie
is
interdisciplinair.
Het
combineert
concepten
uit
informatiekunde, dataverzamelen, cognitieve wetenschap en grafisch ontwerp, waarbij elk aspect een bepaald deel van de datatransformatie voor zijn rekening neemt (Mol, 2011). De mogelijkheden om data te verzamelen en het te beheren zijn constant aan het vernieuwen, maar de mogelijkheid van mensen om het te begrijpen blijft constant. Daarom is datavisualisatie zo interessant. Het gaat er van uit dat visuele representaties en interactietechnieken het zien-‐zintuig gebruiken om mensen grote hoeveelheden data te laten begrijpen. Het focust op de mogelijkheden om abstracte informatie op intuïtieve manieren over te brengen (Thomas & Cook, 2004). Datavisualisatie is nodig om de volgende redenen (Ware, 1999): -‐
Visualisatie creëert de mogelijkheid grote hoeveelheden data te begrijpen. De belangrijkste informatie uit de dataset is in één keer toegankelijk.
-‐
Visualisatie zorgt voor het tevoorschijn halen van niet-‐verwachte conclusies.
-‐
Visualisatie maakt het ook mogelijk fouten in de dataset te zien.
-‐
Visualisatie gaat zowel op kleine als op grote aspecten van de data in.
Er zijn vier stappen in visualisatie (Ware, 1999): eerst de data zelf verzamelen en opslaan, dan het concept ontwerpen waarin data kan worden begrepen, als derde is er hardware nodig en algoritmes om iets visueels te creëren en als laatste is de mens er voor nodig om de visualisatie te begrijpen met zijn zintuigen en cognitie.
Interactieve infographics
Naast de vele statische vormen van infographics is de laatste jaren de interactieve inforgraphic sterk in populariteit gestegen. Dit komt mede door de opkomst van tablets zoals de iPad. Interactiviteit in de strikte zin van het woord komt neer op het uitwisselen van informatie tussen de gebruiker en de infographic. De gebruiker ziet de mogelijkheden van de applicatie, voert een actie uit en de infographic voorziet de gebruiker van een reactie. Er zijn drie soorten online interactie: instructie, manipulatie en exploratie (Cairo, 2008). De instructie is de simpelste vorm: het bedienen van buttons die een linair narratief
4
bedienen. Instructie is het meest voorkomende model. Bij manipulatie kunnen infographics op een hoger niveau bestuurd worden. De gebruiker kan de hele configuratie van de infographic aanpassen. Exploratie is een vorm van interactie die bij infographics minder bekend is. Het doel hierbij is het volbrengen van taken die steeds lastiger worden. Daarmee kan immersie worden gestimuleerd: het gevoel dat je helemaal bent opgenomen in een medium. De beste interactieve infographics worden gemaakt met Flash of het nieuwere HTML5. In HTML5 is de Canvas-‐tag verwerkt die het mogelijk maakt vectorafbeeldingen vorm te geven binnen HTML. Dit gebeurt met behulp van JavaScript. Het nadeel hiervan is dat je, tenzij je professional bent, geen Illustrator meer kunt gebruiken om je infographics te maken. De interactieve infographic die in deze storial wordt gecreëerd bevat de meest vereenvoudigde vorm van interactie waarbij het wel mogelijk is om al eerder gemaakte Illustrator-‐afbeeldingen te animeren. Dit is dus een bewuste keuze en het creëert toch een interactieve ervaring, ondanks dat het lang niet alle mogelijkheden tot interactie biedt.
5
Illustrator: infographics maken We beginnen deze tutorial met Adobe Illustrator. Dit is een programma dat door ontwerpers wordt gebruikt voor het maken van vectorafbeeldingen. Een vectorafbeelding houdt in dat de afbeelding uit vectoren is opgebouwd en niet uit pixels. Daarom kunnen
vectoren
oneindig
vergroot
worden
zonder
kwaliteitsverlies. Wanneer Illustrator geopend wordt, is een bijna leeg scherm zichtbaar. Links in beeld is een toolbox aanwezig. Deze toolbox is te zien in de afbeelding. Ik ga nu niet alle opties langs, maar de belangrijkste functies die we nodig hebben in deze tutorial zal ik kort toelichten. De twee pijltjes bovenin zijn de selectietools. De zwarte is de gewone selectietool en de witte is de directe selectietool. De zwarte T op de derde rij is de teksttool. Hiermee kan een tekstvak worden gemaakt en kan dus tekst in de afbeelding worden geplaatst. Het vierkant daaronder is de Rectangle tool: met dit gereedschap worden vierkanten gecreëerd. Wanneer je deze knop even in houdt, verschijnt er een nieuw menu waarin andere vormen geselecteerd kunnen worden. Een stuk verder naar onder is de diagramtool aanwezig. Deze is als enige donkergrijs in de afbeelding. Met dit gereedschap kunnen diagrams gemaakt worden. Ook hier geldt weer dat er meerdere vormen beschikbaar zijn onder het uitklapmenu. Twee knoppen naar boven is de gradient tool, waarmee een kleurverloop in een vorm kan worden toegepast. De button laat eigenlijk al zien welk effect het heeft. Verder is het vergrootglas, twee knoppen onder de diagramtool, ook erg handig. Hiermee kan op het canvas (het witte vlak waarin je tekent) worden ingezoomd. Belangrijk: uitzoomen kan met dezelfde tool, maar dan moet de alt-knop worden ingehouden. We beginnen nu met een nieuwe illustratie. Daarvoor moet eerst een nieuw document worden aangemaakt. Dit kan met de optie ‘New..’ onder het menu ‘File’. Een venster met keuzemogelijkheden komt te voorschijn. Deze
6
mogelijkheden zijn nu even niet belangrijk, het gaat om de afmetingen die je het canvas geeft. In dit geval kiezen we voor 1000*1000 pixels. Wanneer je nu op OK klikt, komt er een maagdelijk wit vierkant in beeld. Dit is het vlak waarin de infographic wordt gecreëerd.
Achtergrond & gradients
Een infographic met een witte achtergrond valt niet op en is niet zo aantrekkelijk. Daarom beginnen we met een gekleurde achtergrond. Hiervoor gebruiken we de eerder genoemde gradient tool. Met een uitklapmenu
kan
een
verloop
worden gekozen. Ik kies nu voor ‘Pink Radial’. Een kleurverloop kan echter niet zomaar aan de achtergrond worden toegevoegd, er moet eerst een object zijn dat een kleur kan krijgen. Daarom creëren we een vierkant met de Rectangle Tool ter grootte van de achtergrond. Tip: er verschijnen groene aanwijzingen wanneer je met de muis precies op de lijn of de hoek van een document zit. Wacht dus op de melding ‘intersect’ wanneer je je vierkant precies zo groot als de achtergrond wil maken. Het gemaakte vierkant krijgt nu automatisch gradient.
de
Deze
Pink is
Radial
niet
zo
aantrekkelijk. Om het kleurverloop aan te passen kun je dubbelklikken op de gradient tool. Er verschijnt een menu waarmee de sterkte en de kleuren worden aangepast. Het verloop wordt aangepast met de
7
witte en roze schuifjes. Speel hier wat mee totdat je een mooi verloop hebt gevonden. De kleur wordt aangepast door dubbel te klikken op de witte en roze vierkantjes die aan de sliders zitten. Pas nu eventueel weer het verloop aan. Om de infographic een titel te geven gebruik we de teksttool. Sleep met ingedrukte muisknop totdat er een vierkant ontstaat. Je kunt nu meteen beginnen met typen. Na het typen pas je het lettertype, de letterkleur en de lettergrootte aan door middel van de werkbalk boven in het scherm. Met de escapeknop op je toetsenbord ga je uit de type-‐modus naar de selectiemodus en wordt de tekst als object geselecteerd. Je kunt nu de afmetingen van het tekstvak nog aanpassen. Ik geef de infographic de titel ‘PNM 2012 TWITTER ANALYSE’. Tip: gebruik guidelines (richtlijnen) om alle content op de juiste plek te zetten. Zie hiervoor de videotutorial op de website.
Ontwerp de diagrammen
Laten we nu maar meteen beginnen met de diagrammen. Deze worden gemaakt met de diagram tool. Deze tutorial demonstreert twee soorten: de taartdiagram (met de Pie Chart Tool in het uitklapmenu) en de staafdiagram (met de Column Graph Tool). Klik op de Column Graph Tool en maak weer een vierkant. Er verschijn een zwart vlak en een tabel die op Excel lijkt. Hierin wordt de data ingevoerd. We gebruiken hiervoor de bovenste horizontale rij. Stel dat je vijf kolommen in de diagram wil hebben, dan vul je vijf tabelvakken met de vijf waarden die de kolommen moeten hebben. Dit mogen gewoon absolute getallen zijn en geen procenten. Klik daarna op het vinkje rechtsboven. Er vormt zich een saaie grijze tabel zoals te zien in de afbeelding.
8
Sluit de tabel en gebruik de selectie tool. Als we onderdelen willen verwijderen, zoals de assen of de cijfers, moeten we de tabel eerst ‘ungroupen’. De tabel staat nu namelijk als losse elementen bij elkaar in een groep elementen. Klik hiervoor op het menu ‘Object’ bovenin het scherm en daarna op ‘Ungroup’. Er komt nu een melding dat de data in de grafiek niet meer aangepast kan worden. Dat zij dan maar zo, dus klik op ‘OK’. Wanneer je nu even de escapetoets gebruikt zodat alles gedeselecteerd wordt, kun je de elementen afzonderlijk selecteren. Gebruik daarna de delete-‐ of backspacetoets op je toetsenbord om ze te verwijderen. We houden nu vijf vierkanten over met elk een zwarte omlijning. Deze kan ook bovenin beeld worden weggehaald door ‘Stroke’ op 0 pixels te zetten in plaats van 1 pixels. Klik nu dubbel op de diagram en daarna één keer op de linkse kolom. De kleur kan boven in beeld worden aangepast in hetzelfde soort menu als waarin je de kleur van de gradient voor de achtergrond hebt aangepast. Wanneer je dit met alle kolommen doet, verschijnt er een veelkleurige en versimpelde versie van de grafiek die je als eerste kreeg toen je de data invoerde. Dit is ook een kenmerk van een infographic ten opzichte van een grafiek in Word: data wordt aantrekkelijk gepresenteerd.
Toelichting bij de vormen Omdat we de as met getallen weg hebben gehaald, is het nu niet meer duidelijk wat de waardes zijn van de kolommen. Alleen de onderlinge verhoudingen zijn zichtbaar. We gaan daarom de waardes boven de kolommen zetten. Zoom hiervoor in op de bovenkant van een kolom en gebruik de teksttool om een tekstvak te maken dat precies zo breed is als één kolom. Deze plaats je op de bovenkant van de eerste kolom en je typt ‘62’. De ‘Paragraph’-‐waarde bovenin beeld zet je op ‘Align center’ zodat de tekst in het midden komt te staan. Om de waardes voor de andere kolommen op dezelfde afstand van de kolom te houden, kopiëren we dit tekstvak vier keer en plaatsen we het bij de andere kolommen. Wacht steeds weer op de groene lijnen die zeggen dat je op de goede positie zit. Natuurlijk moet je wel even de waardes aanpassen. In de videotutorial wordt deze stap duidelijker gedemonstreerd.
9
Een taartdiagram werkt eigenlijk op dezelfde manier als een diagram met kolommen. Teken een vierkant waarin de diagram moet komen, vul de waarden in, ungroup de diagram, verwijder de onnodige delen en geef het wat kleur. Een diagram met alleen getallen erboven zegt natuurlijk niets. Een tekstvak moet toelichting geven wat de getallen betekenen. Deze tekst kun je gewoon onder de diagram op de oranje achtergrond zetten. Je kunt er ook voor kiezen een gekleurd vierkant of een andere getekende vorm als tekstachtergrond te gebruiken. Een andere mogelijkheid is het downloaden van standaard tekstballonnen op internet. Deze plak je als afbeeldingen in Illustrator waarna je de tekst er overheen typt. Opmerking: de videotutorial op de website stopt hier. We gaan nu verder met HTML en CSS.
HTML/CSS Ik kies er in deze tutorial voor om de toelichtende tekst niet in Illustrator te typen maar in het HTML/CSS gedeelte. Het idee is dat de infographic op het eerste gezicht alleen afbeeldingen bevat, maar wanneer je er met je muis overheen gaat, komt er toelichting te voorschijn bij de diagrammen. Deze tekst is dan te selecteren en te kopiëren met de muis in plaats van dat het tekst in een afbeelding is. Dit is beter voor SEO (zoekmachineoptimalisatie) en contentmarketing. Daarom heb ik twee versies nodig van de diagrammen: een aantrekkelijke standaardafbeelding en een duidelijke versie met de informatie. Voor de standaardafbeelding heb ik elementen van Twitter gebruikt: het logo in het midden van de taartdiagram en een apenstaartje die een deel van de staafdiagrammen weghaalt. Daarbij is het niet zomaar een kwestie van het Twitterlogo in Illustrator plakken: dan verliest het zijn transparantie. De truc is om het logo met een transparante achtergrond in Photoshop als .psd-‐bestand op te slaan en deze in Illustrator te importeren via de functie ‘Place’ onder het menu ‘File’. Geef deze afbeeldingen dezelfde kleur als de achtergrond en transparantie lijkt geboren. Bij deze versies heb ik overigens de getallen ook weggehaald.
10
De volgorde is nu: eerst de afbeelding opdelen in vlakken zodat elk diagram een aparte afbeelding is, waarna je deze aparte afbeeldingen opslaat. Daarna vervang je de diagrammen voor de passieve varianten met logo en apenstaartje en je slaat weer de aparte afbeeldingen op. Deze volgorde (eerst opdelen, dan vervangen) is belangrijk omdat de twee versies van elke diagram dan precies even groot zijn. Het opdelen van de infographic kan met de slice tool: deze zit in de toolbox onder de diagramtool. Deel de afbeelding op in vlakken: de titel, de tussenkopjes en de (in mijn geval) drie diagrammen. Sla dit op via ‘Save for Web & Devices’ onder het menu ‘File’. Je krijgt nu een html bestand dat er voor zorgt dat alle losse afbeeldingen op de goede volgorde staan en alsnog een geheel vormen. Wanneer je dit hebt gedaan, kun je de slices laten staan en pas je de afbeeldingen aan naar de andere versie voor wanneer de muis er overheen gaat. Ook dit sla je weer op voor web & devices. Het HTML-‐bestand ziet er nu zo uit:
Deze afbeelding bestaat dus uit vijf kleinere afbeeldingen zonder dat je het ziet!
HTML & CSS Voor de interactiviteit in de infographic wordt CSS gebruikt. CSS wordt geplaatst in een stylesheet. Maak dus een bestand aan met de naam style.css. De stylesheet wordt aan het HTML-‐bestand met de infographic gekoppeld door tussen de en de tags in HTML de volgende code te plaatsen:
11
Hiermee geef je dus aan dat het HTML-‐bestand moet luisteren naar de opdrachten die in de stylesheet gegeven worden. Nu is het tijd om de afbeeldingen een stukje code in CSS mee te geven. De tabelvakken met de afbeeldingen vervangen we door div’s. Dit zijn vlakken waarmee je de achtergrond en afmetingen kunt aangeven in de stylesheet. We vervangen dus de code voor de drie afbeeldingen:
met de volgende code:
Wanneer je dit opslaat, zijn de afbeeldingen verdwenen! Geen paniek, dat hoort. Het komt omdat we de afbeeldingen hebben vervangen voor div’s en we in de stylesheet nog geen eigenschappen van de drie div’s hebben meegegeven. Ga naar de stylesheet en typ het volgende:
Je ziet dat elk van de drie div’s een afbeelding als achtergrond meekrijgt. De afbeeldingen staan nu niet meer los in het HTML-‐bestand maar zijn als achtergrond meegestuurd. Toch ziet de website met de infographic er nog hetzelfde uit. Stoer, toch?
13
Interactiviteit Echte nextlevel interactiviteit kun je met CSS niet bereiken. Toch zijn er leuke effecten met CSS3 te bewerkstelligen zonder Flash of JavaScript te gebruiken. Hiervoor worden zogenaamde CSS Transitions gebruikt. Deze transitions kunnen verschillende waarden hebben. Vaak komen ze alledrie tegelijk voor: webkit-‐, moz-‐ en o-‐transitions. Dat heeft te maken met verschillende browsers. Internet Explorer ondersteunt geen transitions, Google Chrome en Safari herkennen de webkit-‐transition, Mozille Firefox herkent de moz-‐transition en Opera herkent de o-‐transition. CSS3 transitions zijn effecten die een element vloeiend van stijl doen veranderen. Hiervoor moeten twee zaken gespecificeerd worden: enerzijds de tijdsduur van het overlopen en anderzijds de CSS property (dus bijvoorbeeld diagram1 van bovenstaand voorbeeld) waar het effect op moet worden toegepast. Belangrijk: als de tijdsduur niet wordt gespecificeerd zal er niets gebeuren omdat de standaardwaarde 0 is. Het effect begint als de gespecificeerde CSS property van waarde verandert. Daarvoor worden vaak mouse-‐over-‐elementen gebruikt, waarbij een effect optreedt wanneer de muis op een div wordt geplaatst. Om dit te doen wordt ‘hover’ aan de property toegevoegd. In dit voorbeeld zijn nog geen transitions toegepast: .diagram1 { width: 301px; height: 470px; background-image:url('images/index_03.png'); } .diagram1:hover { width: 301px; height: 470px; background-image:url('images/index2_03.png'); }
Wanneer de muis op de div met de naam diagram1 wordt geplaatst, zal de diagram met de aap veranderen in de diagram zonder aap en met cijfers: deze
14
afbeelding heb ik namelijk opgeslagen onder de naam index2_03.png. Nu gaan we de transitions toevoegen. Belangrijk: het lijkt misschien logisch de transitions toe te voegen aan het gedeelte waar :hover achter vermeld is, maar dit is niet het geval. De transitions moeten bij de standaardsituatie worden ingevoegd. De code ziet er nu als volgt uit: .diagram1 { width: 301px; height: 470px; background-image:url('images/index_03.png'); -webkit-transition: background-image 0.5s ease; -moz-transition: background-image 0.5s ease; -o-transition: background-image 0.5s ease; }
In dit voorbeeld zijn de transitions toegevoegd. Het woordje ‘background-‐image’ zegt dat de transitions alleen voor de achtergrondafbeelding gelden. De 0.5s staat voor een halve seconde: zo lang duurt de transitie. Het woordje ‘ease’ zegt iets over de manier van bewegen: moet het effect lineair over tijd plaatsvinden of moet het in-‐ of juist uitfaden? Er zijn verschillende opties, maar ease is een mooie vloeiende beweging. Deze transitions kunnen op alle drie de diagrammen worden toegepast. Opmerking: het lijkt nu alsof transitions alleen afbeeldingen in elkaar vloeiend over laat lopen. Er zijn echter zeer veel mogelijkheden met transitions. Zo kun je er bijvoorbeeld voor kiezen om afbeeldingen te laten draaien, te vervormen, een vertraging in te stellen, van een bepaald punt op het scherm naar een ander punt laten bewegen, et cetera. De mogelijkheden die hier worden toegelicht zijn slechts een topje van de ijsberg maar demonstreren wel de basis waarop het makkelijk verder werken is. Wat we nog willen is dat er tekst met uitleg onder de diagrammen komt wanneer de muis er op wordt geplaatst. Wanneer je simpelweg gaat typen binnen de div tags, zal de tekst in het midden of aan de bovenkant van de diagram komen.
15
Daarom gebruiken we de padding-‐eigenschap in CSS. Padding geeft de ruimte aan de binnenkant van een div aan en margin aan de buitenkant. In dit geval gebruiken we dus padding omdat anders de achtergrond met de diagram ook meeverschuift. Tip: de div wordt groter bij het gebruik van padding. Trek daarom de padding- waarden af van de hoogte en breedte van de div! Om de tekst standaard onzichtbaar te maken, zetten we de tekst tussen paragraaftags p en gebruiken we de display:none eigenschap in CSS. De display:inline eigenschap is standaard en wordt dus onder ‘hover’ geplaatst. Verder worden de eigenschappen van de tekst aangepast in de CSS. Deze eigenschappen kun je uiteraard ook weer toepassen op de andere twee diagrammen. .diagram1 p { display:none; } .diagram1:hover p { display:inline; color:white; font-family:Arial; line-height: 1.5em; }
Omdat ik van elke regel een hyperlink heb gemaakt, voeg ik ook de volgende code toe aan de CSS: a { color:white; text-decoration:none; }
Zo krijg je witte links zonder onderlijning. Om alsnog duidelijk te maken dat het links betreft heb ik een dubbele pijl toegevoegd. In HTML is de code hiervoor “»”. Tip: begrijp je niet waar je een bepaald stuk code moet plaatsen? In de bijlages zijn de volledige codes van deze tutorial te vinden.
16
Het eindresultaat van deze tutorial is online zichtbaar. Het moge duidelijk zijn dat er zowel met Illustrator als met CSS3 veel meer mogelijkheden zijn. Ik heb in deze tutorial echter geprobeerd het topje van de ijsberg af te lichten en deze ijsberg inzichtelijk te maken. Op de nu gelegde basis kun je verder werken. Opmerking: heeft deze tutorial je enorm geholpen om iets te illustreren met een fantastische infographic of kom je juist ergens niet uit? Laat het me weten via Twitter: @dutchdaniel.
17
Bibliografie Brunelli, J. (2010). Showcasing twenty years of Venice Project Center results using interactive online infographics Cairo, A. (2008). Interactividad: la nueva frontera de la visualización de información en prensa. Malofiej (15). Gray Funkhouser, H. (1937). Historical Development of the Graphical Representation of Statistical Data. Osiris, Vol. 3. (1937), pp. 269–404 Mol, L. (2011). The Potential Role for Infographics in Science Communication. Amsterdam: Vrije Universiteit Thomas, J. J., & Cook, K. A. (2004). Illuminating the Path: The R&D Agenda for Visual Analytics. National Visualization and Analytics Center Ware, C. (1999). Information visualization: perception for design. Morgan Kaufmann.
