Gebruiker:MartinD/EasyTimeline intro

Inleiding in het maken van tijdlijnen

Het onderstaande is bedoeld als een eenvoudig bevattelijke versie van de handleiding voor het maken van tijdlijnen, zoals bevat in het document dat daarover op Meta staat, gelinkt in Help:EasyTimeline. Wat daar staat klopt allemaal, maar het is meer een naslagwerk dan een "hoe zet ik het in elkaar"-handleiding. En dus niet echt geschikt om een newbie te laten zien hoe je zo'n ding maakt. Het maken van tijdlijnen wordt daar omschreven als "not trivial", hetgeen we denken te kunnen te vertalen met "is wel even een klusje". Om die reden vindt u hier een uitgewerkt voorbeeld waarin het maken van een eenvoudige tijdlijn stapsgewijs uiteen wordt gezet.

Inleiding

U komt tijdlijnen met een zekere regelmaat tegen in artikelen waar een historisch aspect aan zit.

Een tijdlijn is, typisch, een grafiek met op de horizontale as een verdeling naar tijd, van 1900 tot 2006 of zo. En daarboven staat dan iets dat aangeeft wat er op diverse momenten, of gedurende diverse perioden, gebeurd is. Bijvoorbeeld kabinetten, dynastieën of oorlogen. Dat kan in de vorm van een aansluitende set lijnstukjes zijn, of in de vorm van meerdere lijnstukken onder elkaar.

EasyTimeline is een scripttaal, hetgeen voor digibeten betekent dat het in de praktijk neerkomt op net zolang knutselen tot het leidt tot een resultaat dat overeenkomt met hetgeen voor ogen stond.

Het komt erop neer dat u in een aantal instructies uitlegt hoe die grafiek samengesteld moet worden. Voordat u dat kunt doen, lijkt het logisch om op een papiertje uit te tekenen hoe u het gehad had willen hebben.

Het is wellicht nuttig op te merken dat een tijdlijn bij voorkeur niet te gedetailleerd zou moeten worden. Daardoor vermindert de leesbaarheid en daarmee de inzichtelijkheid die u met deze tijdlijn juist wilde bevorderen.

Voorbeeld

Om het aan een concreet iets op te hangen, wordt hier een weergave gemaakt van hoe iemand in de afgelopen 30 jaar op vakantie is gegaan. Van 1976 tot 2006 heeft hij fietsvakanties gehad, kampeervakanties, met tent en met caravan, daarna hotel, en daarna een cruise. Het lijkt aardig als we daar vier balken van maken, met die kanpeervakantie dan in twee delen gesplitst, tent danwel caravan. De perioden hebben we verzameld, dus we kunnen aan de slag.

(Volledigheidshalve: in dit voorbeeld wordt alleen de minimaal benodigde code gebruikt.)

Het begint en eindigt steeds met de tags <timeline> en </timeline>. Dat leidt ertoe dat de Wikipedia-server weet dat hij hetgeen daartussen in zit moet beschouwen als code die tot een plaatje omgebouwd moet worden. Daartussen in komen dus een hoeveelheid opdrachten die ieder een deel van die grafiek bepalen: omvang, schaalverdeling, aantal balken, kleuren, toelichtende teksten, etcetera.

U gaat eerst uitleggen hoe groot het resultaat moet worden. Maximaal zal dat dus een schermbreedte worden, maar vaak kan het ook kleiner. Vervolgens moet u er wat marge omheen nemen, het systeem wil minimaal 20 pixels ruimte hebben. De optelsom van beiden zet u neer in de instructie ImageSize, en de mages in de instructie PlotArea. U wilt een ding dat 30 jaar bestrijkt, dan zou 10 pixels per jaar geschikt kunnen zijn, en met een marge van 20 pixels wordt dat 340 pixels breed. Voor de hoogte lijkt, op het eerste gezicht, 100 pixels toereiken.

Uiteindelijk hebt u zelfs bij een vrij simpel plaatje een behoorlijke hoeveelheid code. Het is nuttig om die in bij elkaar horen blokjes te groeperen. Qua tikwerk nog: achter een dubbele punt hoort geen spatie. Voor een =-teken mogen wel een of meer spaties, da's nuttig om de zaak ordelijk te houden. Voor het overige is het zoals altijd met computers: één komma verkeerd en hij raakt de draad kwijt.

Het "blad" van de tijdlijn

Hiervoor is, stapsgewijs, de volgende code nodig. Eerst geven we de grootte van het totale plaatje op, plus de grootte van de gewenste marges.

ImageSize = width:340 height:140

PlotArea = left: 20 right:20 top:20 bottom:20

Dan moeten we nog uitleggen dat we de jaren onderaan willen hebben, van links naar recht, en niet van beneden naar boven. Dat mag overigens ook, maar voor deze grafiek doen we dat niet.

TimeAxis = orientation:horizontal

En we moeten ook nog uitleggen dat we de diverse balken een beetje netjes verdeeld willen hebben over de hoogte van de grafiek, hoe precies mag het systeem zelf weten. Daar hebben we de opdracht "justify" voor:

AlignBars = justify

Dan moet het systeem nog weten over welke periode we het hebben. Dat wordt dus 1976 tot 2006. Het mag in hele jaren neergezet worden, en omwille van de overzichtelijkheid is het nuttig om dat elke 5 jaar een jaartal onder de grafiek te zetten. Dat gaat zo:

DateFormat = yyyy

Period = from:1976 till:2006

ScaleMajor = unit:year: increment:5 start:1976

Hiermee is de achtergrond van de grafiek, "het papier", klaar. Laat ik even op een rijtje zetten wat u nu heeft:

<timeline>

ImageSize = width:340 height:140
PlotArea = left: 20 right:20 top:20 bottom:20
TimeAxis = orientation:horizontal
AlignBars = justify

DateFormat = yyyy
Period = from:1976 till:2006
ScaleMajor = unit:year increment:5 start:1976

</timeline>

Dit is het resultaat van bovenstaande code:

De balken zelf

We willen vier balken maken, en die balken krijgen allemaal een naam:

BarData =

bar:fiets

bar:kampeer

bar:hotel

bar:cruise

Dan kunnen we elke balk van de nodige gegevens voorzien. Per balk moet opgegeven worden waar hij begint en eindigt, en welke kleur hij moet hebben. Voorts is het nuttig om de "dikte" van de balken op te geven. Als dat niet gebeurt, wordt de beschikbare hoogte over de balken verdeeld, maar wellicht wilt u dit anders aangegeven hebben.

Bij de balk "kampeer" moeten we een scheiding aan brengen tussen het tent- en het caravan-gedeelte, door verschillende kleuren te gebruiken. En verder is het wel nuttig als we een tekstje aanbrengen dat als legenda fungeert. De code:

PlotData =

width:20

bar:fiets from:1976 till:1983 color:green text:fiets

bar:kampeer from:1983 till:1994 color:green text:kampeer/tent

bar:kampeer from:1994 till:1998 color:blue text:kampeer/caravan

bar:hotel from:1998 till:2001 color:green text:hotel

bar:cruise from:2002 till:2006 color:green text:cruise

Merk op dat er een gat in zit: in 2002 is men niet met vakantie geweest. Dat wordt, als het goed is, goed weergegeven.

Dit is de voor het ogenblik complete code:

<timeline>

ImageSize = width:340 height:140
PlotArea = left: 20 right:20 top:20 bottom:20
TimeAxis = orientation:horizontal<nowiki><BR> <nowiki>AlignBars = justify

DateFormat = yyyy
Period = from:1976 till:2006
ScaleMajor = unit:year increment:5 start:1976

BarData =
bar:fiets
bar:kampeer
bar:hotel
bar:cruise

PlotData =
width:20
bar:fiets from:1976 till:1983 color:green text:fiets
bar:kampeer from:1983 till:1994 color:green text:kampeer/tent
bar:kampeer from:1994 till:1998 color:blue text:kampeer/caravan
bar:hotel from:1998 till:2001 color:green text:hotel
bar:cruise from:2002 till:2006 color:green text:cruise

</timeline>

Dit is het resultaat:

Plakt u dit eens in de Zandbak in, en gaat u daarna eens variëren. Probeer eens een andere kleur, schuif eens wat met grootten, etcetera. U hebt nu het basisrecept een keer bereid, voeg nu zelf andere ingrediënten toe.

Nog één wellicht nuttige opmerking: u kunt van die teksten Wikilinks maken met de bekende dubbele haken.

Grafieken maken met EasyTimeline

U kunt EasyTimeline ook gebruiken voor het maken van (niet al te ingewikkelde) lijngrafieken. Het gebruik van deze EasyTimeline heeft als voordeel dat u vrij eenvoudig een bestaande grafiek kunt actualiseren.

Een groot deel van wat hierboven is vermeld, gaat ook hier op. U maakt ook hier eerst een "blaadje" waar op getekend moet worden. Daar tekent u dan een x-as op, die meestal de tijd zal aangeven, en een y-as, die cijfers of percentages heeft. En daarna is het een kwestie van "stoeien met coordinaten": u tekent steeds stukjes lijn die van punt A naar punt B gaan, en die steeds op elkaar aansluiten.

Stel, u wilt een grafiek maken van de bevolkingsontwikkeling van een gemeente. Die is van begin 2000 tot begin 2007 als volgt toegenomen:

• 2000: 11.500
• 2001: 12.400
• 2002: 12.800
• 2003: 13.100
• 2004: 14.000
• 2005: 14.100
• 2006: 14.200
• 2007: 14.900

(We houden het simpel, alleen cijfers per jaar.)

De eerste vraag is: hoe groot maken we het plaatje? Het is nuttig zo'n ding een beetje "op de groei" te maken. Hopelijk gaat Wikipedia nog een paar jaar mee. Dus qua breedte moeten we nu niet alle ruimte opmaken. Laten we per jaar 50 pixels nemen, en 40 pixels marge links en 10 pixels rechts, totaal 450 pixels. Qua hoogte: de vraag is even of we bij nul inwoners beginnen of bij 10.000 inwoners, en of we bij 15.000 ophouden of dat we wat ruimte reserveren voor verdere groei. (Er wordt tenslotte nog flink gebouwd...) Laten we van 0 tot 25.000 inwoners nemen, 10 pixels per 1000 inwoners rekent makkelijk, plus 10 pixels bovenmarge en 20 pixels ondermarge is 280 pixels.

Wat we nog wel moeten doen is een schaalverdeling aangeven: de lezer moet tenslotte zien bij welke getallen die lijnen horen. Dat doen we met de opdracht PlotData, waarmee we horizontale lijnen trekken, op de gewenste plekken en met de gewenste cijfers erbij. Het systeem verdeelt de lijnen zelf netjes over "het plaatje". We willen lijnen hebben op 0, 5000, 10.000, 15.000, 20.000 en 25.000.

Dan gaan we uitrekenen waar we de lijnen willen trekken. 11.500 inwoners/100 is 115, plus 20 ondermarge is 135. Het jaar 2000 bevindt zich op 40 pixels van links. Het eerste "punt" bevindt zich dus op coordinaat 40,135. Het tweede is een jaar later, dus 40+50=90, en op een hoogte van 12.400/100=124+20=144, dus (90,144). OP dezelfde manier rekenen we de verdere coordinaten uit. Dat worden: (140,148), (190,151), (240,160), (290,161), (340,162) en (390,169)

De code:

<timeline>
ImageSize = width:400 height:280
PlotArea = left:40 right:10 top:10 bottom:20
TimeAxis = orientation:horizontal
AlignBars = justify
Colors =

id:gray1 value:gray(0.9)

DateFormat = yyyy
Period = from:2000 till:2007
ScaleMajor = unit:year increment:1 start:2000

PlotData =

bar:25.000 color:gray1 Width:1

from:start till:end

bar:20.000 color:gray1 width:1

from:start till:end

bar:15.000 color:gray1 width:1

from:start till:end

bar:10.000 color:gray1 width:1

from:start till:end

bar:5.000 color:gray1 width:1

from:start till:end

bar:0 color:gray1 width:1

from:start till:end

LineData =

layer:front

points:(40,135)(90,144) color:blue width:1

points:(90,144)(140,148) color:blue width:1

points:(140,148)(190,151) color:blue width:1

points:(190,151)(240,160) color:blue width:1

points:(240,160)(290,161) color:blue width:1

points:(290,161)(340,162) color:blue width:1

points:(340,162)(390,169) color:blue width:1

</timeline>

Het resultaat:

Nou, dat ziet er toch uit zoals bedoeld, nietwaar? We hebben een goed leesbare grafiek, waar we zowel qua jaren als qua bevolkingsgroei even mee vooruit kunnen. De crux zit hem er dus in dat u steeds lijntjes trekt tussen twee paren coordinaten, en dat het eerste punt van het volgende stukje lijn hetzelfde is als het tweede van de vorige lijn. Maar dat had u vast al begrepen.

Beperkingen ten aanzien van grafieken

Ik heb de indruk dat EasyTimeline een soort "maximumcapaciteit" heeft. Bij complexere grafieken gaat het bijwerken steeds langzamer, totdat het uiteindelijk niet meer werkt. In dat geval kunt u overwegen om uw grafiek in een spreadsheet te maken, hem in enig beeldbewerkingsprogramma te plakken, en op te slaan in PNG-formaat. Die afbeelding laat zich zionder problemen uploaden, en u kunt hem dan als iedere andere afbeelding in een Wikipedia-artikel invoegen.

Geïnteresseerd?

Leest u dan het hierboven genoemde document, eens rustig door. Nogmaals, het maken van een "mooie" tijdlijn is een klusje waar flink wat tijd in gaat zitten. Het lijkt ook aan te raden om, ook voor uzelf, een beschrijving bij te houden van hoe u het gedaan hebt, en welke code wat voorstelt, en waarom die tot welk resultaat leidt. Die toelichting kunt u tussen de bekende "<!-- " en " -->" commentaar-tags zetten.