# Lengtes vergelijken — een grafiek naast elkaar die je kunt downloaden

Typ de lengtes, neem de afbeelding mee. Er wordt niets verstuurd om hem te tekenen.

> Vergelijk lengtes naast elkaar. Voeg een man, een vrouw, een jongen, een meisje en voorwerpen toe — een deur, een raam, een whiteboard, een automaat — in centimeters of in voet en inches, en download de grafiek als PNG of SVG. Hij wordt in je browser getekend.

Deze pagina is een interactief hulpmiddel dat volledig in je browser draait, op https://abox.tools/nl/lengtes-vergelijken/ — niets van wat je het geeft wordt geüpload. Hieronder staat alles wat de pagina er in woorden over zegt; om het te gebruiken, open je het adres.

## Je namen, lengtes en de grafiek die ze vormen worden **nooit geüpload**. Er is geen server.

Een lengtegrafiek is rekenwerk en een tekening: er is geen bestand om te versturen en geen dienst om iets aan te vragen — en het ene bestand dat deze pagina aanneemt, een eigen afbeelding voor op de meetlat, wordt hier gelezen en gaat nergens heen. De man, de vrouw, de jongen en het meisje zijn illustraties uit het publieke domein die met deze pagina meekomen, en de jongen en het meisje zijn tekeningen van echte kinderen in plaats van klein gemaakte volwassenen — en dat is precies wat een gezinsgrafiek behoedt voor een fout die niemand kan benoemen. Elke stap gebeurt in een paar honderd regels JavaScript op deze pagina die je kunt lezen. Er is überhaupt geen netwerkfunctie, en dat telt hier omdat wat je typt een lijst van mensen is en hoe lang ze elk zijn.

- ✗ Geen upload
- ✗ Geen account
- ✗ Geen watermerk
- ✓ Werkt offline
- ✓ Open source

## Zo maak je een lengtevergelijkingsgrafiek

1. **Voeg eerst iedereen toe en denk daarna pas aan hoe het eruitziet.** Een regel is een figuur, een naam, een lengte en een kleur. De naam is optioneel — een grafiek van twee naamloze silhouetten met hun lengtes erboven is vaak precies wat iemand wil — en de pijltjes op elke regel schuiven hem naar links of rechts als de volgorde uitmaakt.
2. **Typ de lengte zoals je hem schrijft.** `173`, `1,73 m`, `5'8"`, `68 in` en `5 ft 8` worden allemaal goed gelezen. De regel onder het vak laat zien wat er begrepen is, in beide stelsels, dus een verkeerde lezing is zichtbaar voordat er getekend wordt in plaats van nadat het afgedrukt is. Een kaal getal is centimeters op een metrische grafiek en inches op een imperiale, en een kaal getal onder de drie is meters — niemand is 1,73 cm lang.
3. **Kies de figuur die bij de persoon past.** Een kind is ongeveer zes hoofden hoog en een volwassene zevenenhalf, dus een kind dat als een gekrompen volwassene is getekend ziet er verkeerd uit op een manier die lastig te benoemen en makkelijk te zien is. De jongen en het meisje zijn tekeningen van echte kinderen in plaats van klein gemaakte volwassenen, en dat is het grootste deel van wat een gezinsgrafiek op een gezin doet lijken. Elke regel komt bovendien al met een lengte erin binnen, dus iemand toevoegen tekent iemand — typ er gewoon overheen.
4. **Zet iets vertrouwds op de grafiek.** Een getal is abstract en een deuropening niet. Eén voorwerp toevoegen van een formaat dat iedereen kent — een deur, een raam, een schoolbord, een automaat — is wat een grafiek die twee lengtes noemt verandert in een die ze laat zien. Het menu heeft er twintig, gegroepeerd, en elk ervan komt binnen als een gewone regel waar je je eigen getallen overheen kunt typen. Voorwerpen nemen naast een hoogte ook een breedte, dus een deur is 203 bij 81 en geen streep.
5. **Of zet er je eigen tekening op.** **Eigen afbeelding** neemt een bestand van je machine en zet het op de meetlat op de hoogte die je opgeeft — waar je naar grijpt als de grafiek over een product, een voertuig of een gebouw gaat in plaats van over een mens. Een SVG wordt in de kleur van de eigen regel getekend, net als elke andere figuur; een foto of een PNG komt erop zoals hij is. Allebei houden ze hun eigen verhoudingen, en allebei worden ze hier gelezen in plaats van ergens heen gestuurd.
6. **Zet de meetlat in de eenheden waarin je lezer denkt.** Wisselen tussen centimeters en voet herschrijft wat er in de vakken staat in plaats van het opnieuw uit te leggen, dus de grafiek zelf verschuift niet: alleen de notatie verandert. Is de grafiek voor twee soorten lezers, dan staat de lengte boven elke figuur in de eenheid van de grafiek en heeft de regel onder elk vak ze allebei.
7. **De PNG om te plakken, de SVG om af te drukken.** De PNG is een afbeelding op de pixelhoogte die je hebt ingesteld, en dat is wat een chatvenster, een document of een dia wil. De SVG is de grafiek als instructies, dus hij drukt scherp af op elk formaat en kan achteraf nog worden herkleurd door alles wat vectoren opent.

## De uitgebreide versie

[Hoe je een lengtevergelijkingsgrafiek maakt](https://abox.tools/nl/gidsen/een-lengtegrafiek-maken/): Maak van een lijst lengtes een afbeelding naast elkaar: hoe je de lengtes schrijft, welke figuur bij een kind hoort, waarom één vertrouwd voorwerp meer doet dan een derde persoon, en hoe je de grafiek als PNG of SVG naar buiten krijgt.

## Ook in de gereedschapskist

- [Afbeeldingscompressor](https://abox.tools/nl/afbeelding-comprimeren/): Jij noemt de grootte. De rest rekent de tool uit.
- [Afbeeldingsformaat wijzigen](https://abox.tools/nl/afbeelding-formaat-wijzigen/): Noem het formaat. Sleep het kader. Kies het bestandstype.
- [HEIC naar JPG](https://abox.tools/nl/heic-naar-jpg/): De foto's die een iPhone maakt, in een formaat dat overal opengaat.
- [Pasfotomaker](https://abox.tools/nl/pasfoto-maken/): Kies het land. Hij past die regel toe, precies.

## Vragen

### Wordt er iets van wat ik typ ergens heen gestuurd?

Nee. De grafiek wordt getekend door JavaScript in deze pagina, op je eigen apparaat, en dit gereedschap heeft überhaupt geen netwerkfunctie — het haalt nooit iets op en stuurt nooit iets weg. In het `Content-Security-Policy` van de pagina staat elk adres dat ze mag benaderen, en geen daarvan is van ons. Dat is het hier waard om gewoon te zeggen, want de invoer is een lijst van namen van mensen en hoe lang ze elk zijn, en dat is persoonlijker dan het meeste waar deze site mee omgaat.

### Kan ik de grafiek downloaden?

Ja, als PNG of als SVG, zonder watermerk en zonder account. De PNG wordt getekend op de pixelhoogte die je instelt en is degene om in een document, een dia of een chat te plakken. De SVG is de grafiek als instructies in plaats van als pixels: hij drukt scherp af op elk formaat en kan later in elke vectoreditor worden geopend en herkleurd. Ze worden allebei gemaakt van dezelfde opmaak die op het scherm staat, dus geen van beide kan het met het voorbeeld oneens zijn.

### Hoe schrijf ik de lengte — in centimeters of in voet?

Allebei goed, op elke regel, hoe je hem normaal ook schrijft. `173`, `173 cm`, `1,73 m`, `5'8"`, `5 ft 8 in` en `68 in` worden allemaal begrepen, en de regel onder het vak laat in beide stelsels zien wat er gelezen is. Een kaal getal is centimeters wanneer de grafiek metrisch is en inches wanneer hij imperiaal is; een kaal getal onder de drie wordt als meters genomen, want 1,73 cm is geen lengte die iemand typt.

### Waarom lijken de kinderen niet op kleine volwassenen?

Omdat een kind dat niet is. Lichaamsverhoudingen veranderen met de leeftijd: een tweejarige is ruwweg vierenhalf hoofd hoog, een achtjarige zes, een volwassene zevenenhalf — het hoofd is dus bijna een kwart van een klein kind en een achtste van een volwassene. De jongen en het meisje zijn hier tekeningen van echte kinderen in plaats van één verkleind silhouet, en daarom lijkt een gezinsgrafiek op een gezin in plaats van op vier volwassenen op verschillende formaten.

### Waar komen de figuren vandaan?

Alle vier zijn illustraties van andere mensen, allemaal in het publieke domein: de man van pitr, de vrouw van Madeleine Price Ball, het meisje van OpenClipart-Vectors, en de jongen van Ryan Kissinger voor de NIH BioArt-bibliotheek. Elk bestand komt met deze pagina mee in `vendor/` zoals het is gepubliceerd, dus je kunt ze tegen de originelen leggen. Het publieke domein vraagt niets, en dat is precies de bedoeling: de illustratie belandt in een afbeelding die jij downloadt, en een licentie die naamsvermelding eist zou die eis aan jouw grafiek plakken.

### Kan ik mijn eigen afbeelding op de grafiek zetten?

Ja — **Eigen afbeelding** neemt een tekening of een foto en zet die op de meetlat op de hoogte die je typt: een logo, een plattegrond, een machineonderdeel, een auto, of een foto van het ding zelf. De verhoudingen zijn de zijne, dus er is geen breedte in te vullen. \
\
Een **SVG** wordt in één egale kleur getekend, die waar die regel op staat, want dat is wat de rest van de grafiek is — een tekening van dunne omtrekken in plaats van gevulde vormen komt er dus als een klodder uit, en daarvoor is dit het verkeerde gereedschap. Alleen de *vormen* worden bewaard: het bestand wordt van de grond af opnieuw opgebouwd uit paden, rechthoeken en cirkels, en alles wat het netwerk zou kunnen bereiken — een gelinkte afbeelding, een stylesheet, een lettertype, een script — blijft achter. \
\
Een **foto of een PNG** komt erop zoals hij is en houdt zijn eigen kleuren, dus de kleur van de regel geeft hem alleen nog een naam. Hij wordt hier opnieuw getekend voordat hij erop komt, wat begrenst hoeveel hij aan de grafiek toevoegt en de metadata van het bestand achterlaat. Transparantie blijft bewaard, dus een uitsnede staat netjes op de meetlat — en een foto neemt zijn achtergrond mee, die je beter eerst wegsnijdt. \
\
Geen van beide bestanden gaat ergens heen. Dat telt dubbel, want de grafiek die je downloadt is een bestand dat je misschien naar iemand stuurt.

### Waarom is er geen peuter of baby?

Omdat niemand er een heeft getekend en in het publieke domein heeft gezet. Wikimedia Commons heeft precies één bruikbaar vrij kind — het meisje — en de NIH BioArt-bibliotheek de jongen; onder de schoolleeftijd komt de zoektocht leeg terug, en elke samenhangende vrije set mensen is een toiletpictogram met op elke leeftijd dezelfde vorm, wat precies de fout is die dit hele gereedschap moet vermijden. Er is een tijd een peuter geweest die door de eigen code van deze pagina werd getekend, en het was de enige figuur op de grafiek die niemand had getekend: dat zag je, naast vier die wel getekend waren. Voor iemand die kleiner is dan de jongen of het meisje: zet een van die twee op de echte lengte — de meetlat draagt de vergelijking, en die klopt dan.

### Hoeveel mensen kan ik op één grafiek zetten?

Twaalf. Dat is geen technische grens — de tekening zou er met plezier dertig doen — maar voorbij een dozijn worden de kolommen smaller dan de namen die erboven staan en houdt de afbeelding op leesbaar te zijn. Heb je er meer nodig, dan geeft het uitzetten van de namen je de breedte terug, of twee grafieken zeggen het beter dan één.

### Kan ik een voorwerp op de grafiek zetten?

Ja — en de meeste komen getekend binnen. Het menu heeft er twintig om mee te beginnen, in vier groepen: deuren en ramen, school en kantoor (een whiteboard, een bureau, een archiefkast, een projectiescherm), dingen in de stad (een automaat, een kliko, een basketbalring, een zeecontainer van 20 ft) en dingen in huis. Zeventien ervan komen met een tekening — een deur met een klink, een koelkast met het vriesvak erboven, een bank waar je aan ziet dat het een bank is — en die tekening wordt in de hoogte en breedte van de regel gepast, zodat de getallen nog steeds de maat bepalen en je eigen getallen, eroverheen getypt, nog steeds gelden. De andere drie zijn kale rechthoeken, omdat er van die drie geen vrije tekening bleek te zijn die tegelijk klopte en goed geproportioneerd was, en een verkeerde tekening is op een grafiek over schaal erger dan een eerlijk blok. \
\
Sommige van die maten zijn echte normen en sommige gebruikelijke maten, wat de pagina hardop zegt. Eén vertrouwd voorwerp doet meer voor een grafiek dan hoeveel extra mensen ook: het is wat een vergelijking verandert in een gevoel voor schaal.

### Is er een figuur voor een hond of een kat?

Nee, en dat is een bewust gat en geen vergissing. Ze zijn allebei gebouwd — en profil, staand, met het hoofd op schouderhoogte, zodat de bovenkant van de tekening de lengte ernaast zou zijn, want daar meet elke rasstandaard een dier. Ze kwamen er niet goed genoeg uit om uit te brengen: een viervoeter van opzij naast vier mensen van voren leest als een fout, ook als de tekening goed is. Een rechthoek op schofthoogte van het dier is voorlopig eerlijk.

### Kan ik de grafiek met een link delen?

Niet vanaf hier, en dat is met opzet. Gereedschappen die het aanbieden doen het door de hele lijst in het adres te zetten, en dan belandt elke naam en elke lengte in alles waar de link doorheen reist — de logs van een chatserver, een mailscanner, iemands browsergeschiedenis, een dienst die een linkvoorbeeld ophaalt. Download de afbeelding en stuur die in plaats daarvan: hij zegt hetzelfde en draagt geen lijst mee.

### Is het gratis, en mag ik de grafiek commercieel gebruiken?

Het is gratis, er is geen account en geen watermerk, en je mag het resultaat in een rapport, een presentatie, een advertentie of een product zetten. De site draait op advertenties, want die betalen hem. Niets aan een grafiek die je hier maakt is van ons, en er wordt niets bewaard.

### Waarom staat de meetlat in tientallen en niet in enen?

Omdat de afstand wordt gekozen uit hoeveel lijnen de afbeelding kan dragen in plaats van uit een vast getal. Een grafiek van twee volwassenen krijgt elke tien centimeter een lijn; zet er een basketbalring bij en de lijnen gaan naar vijfentwintig, want negentig lijnen op één afbeelding zijn een grijze waas in plaats van een meetlat. In voet en inches is de ladder een, drie, zes en twaalf inch, zodat de lijnen op hele inches landen in plaats van er net naast.

### Kan ik de grafiek op een donkere dia zetten?

Ja. Zet de achtergrond op de kleur waar hij op komt te staan en de meetlat en het schrift wisselen tussen donker en licht om erbij te passen — uitgerekend uit de helderheid van de kleur in plaats van geraden. Vink daarna ‚helemaal geen achtergrond‘ aan als je de afbeelding zelf transparant wilt: de kleur die je koos bepaalt nog steeds de inkt, dus een transparante grafiek die naar een marineblauwe dia gaat komt daar leesbaar op uit.

### Werkt het offline?

Ja. Laad de pagina één keer, trek daarna de stekker uit het internet en ze blijft werken. Dat is meteen de eenvoudigste manier om te bewijzen dat er niets geüpload wordt: gereedschap dat je lijst wegstuurt om er een grafiek van te laten tekenen zou stoppen op het moment dat je de stekker eruit trekt.

## Hoe je de privacybelofte controleert

- **Een lijst van mensen is niet iets kleins om weg te geven.** De meeste lengtegrafieken willen een account, en die dat niet doen hebben nog steeds een server die elke naam en elk getal ziet dat je typt. Wat je hier typt is wie er in je gezin zit en hoe lang ze elk zijn, vaak met de leeftijd van een kind die je uit de figuur naast de naam kunt afleiden. Niets daarvan wordt ergens heen gestuurd, want er is hier nergens waar het heen zou kunnen.
- **Niets hier haalt iets op.** Er is nergens in `src/` een `fetch`, een `XMLHttpRequest` of een `sendBeacon` te vinden. In het Content-Security-Policy staat elk adres dat deze pagina mag benaderen, en geen daarvan is van ons.
- **Er wordt tussen twee bezoeken ook niets onthouden.** De grafiek leeft in de pagina en nergens anders. Sluit het tabblad en de lijst is weg: er is geen account dat hem vasthoudt, geen cookie die hem meedraagt, en er wordt niets in de opslag van deze browser geschreven — en daarom is een grafiek die je wilt bewaren een grafiek die je downloadt.
- **De link draagt de grafiek niet.** Verschillende gereedschappen als dit zetten de hele lijst in de adresbalk zodat hij gedeeld kan worden, en daarmee wordt elke naam en elke lengte iets dat wordt gelogd door alles waar de link doorheen gaat — een chatserver, een mailscanner, iemands browsergeschiedenis. Het adres van deze pagina verandert nooit terwijl je typt.
- **De PNG wordt gemaakt van de SVG die op het scherm staat.** De download is geen tweede weergave die het met het voorbeeld oneens zou kunnen zijn. Dezelfde opmaak wordt aan de browser gegeven en op een canvas geschilderd, en daarom kan het ook met het netwerk eruit: er is geen lettertype op te halen en geen afbeelding in te laden.
- **Een afbeelding die je toevoegt wordt hier gelezen, en nooit verstuurd.** Het bestand verlaat deze pagina nooit — het wordt gelezen met de eigen `FileReader` van de browser en ontleed tot een levenloos document dat niets uitvoert. Wat getekend wordt is niet dat bestand: `src/import-svg.js` bouwt een NIEUWE tekening uit een witte lijst van vormen en geometrie, zodat een script, een stylesheet, een lettertype, een gelinkte afbeelding of een verwijzing naar een ander document achterblijft in plaats van mee te komen. Dat telt dubbel, want de grafiek die je downloadt is een bestand dat je naar anderen stuurt: alles wat het overleefd had, zou hun browser zijn die dagen later de server van een vreemde aanroept, vanuit iets dat deze pagina heeft geschreven. Een foto of een PNG is geen programma en heeft niets dat herbouwd hoeft te worden: de eigen decoder van de browser leest hem, en hij wordt hier opnieuw op een canvas getekend voordat hij op de grafiek komt. Dat opnieuw tekenen is wat de metadata van het bestand achterlaat — de camera, de plek, het profiel, wat er ook in zat — want niets daarvan overleeft een canvas. Wat in de grafiek belandt is een afbeelding die deze pagina zelf heeft gecodeerd, als data erin geschreven en niet als adres, zodat de grafiek nog steeds nergens naar wijst.
- **De illustraties staan hier, ze worden niet opgehaald.** Alle vier de figuren zijn illustraties uit het publieke domein, en ze worden vanaf deze origin geserveerd met de rest van de pagina — geen icoonlettertype, geen CDN, geen sprite-bestand dat van de server van iemand anders wordt getrokken terwijl je typt. Daarom tekent de grafiek zich ook nog met het netwerk eruit.
- **Wat Google laadt, en wat het niet krijgt.** De advertentie- en meetscripts komen van Google en de donatieknop van Buy Me a Coffee. Geen van hen krijgt een naam of een lengte. Elke regel die van je lijst een afbeelding maakt wordt vanaf deze origin geserveerd en staat in de repository.
- **Het werkt offline.** Trek de netwerkstekker eruit en het gereedschap is onveranderd, want er zat nooit een netwerkstap in. Dat is het eenvoudigste bewijs dat er is.

**Controleer het zelf.** Je hoeft niets van het bovenstaande op ons woord aan te nemen. Een buildscript maakt deze pagina uit de sjablonen en de configuratie in de repository, en dat script kun je lezen en zelf draaien. Het resultaat staat vastgelegd op de branch `dist`, dus je kunt wat er geserveerd wordt vergelijken met wat een build van de bronnen oplevert: https://github.com/A-Box-of-Tools/website

De bestanden die je als eerste wilt lezen zijn `config/site.toml` voor de Content-Security-Policy, `src/traced.js` en `vendor/` voor de vier figuren en waar hun illustraties vandaan komen, `src/figures.js` voor de lijst waar het menu uit opgebouwd wordt, `src/units.js` voor hoe een getypte lengte een getal wordt en hoe de meetlat wordt gelabeld, `src/chart.js` voor de opmaak, `src/save.js` voor de twee downloads — dat zijn de SVG op het scherm, en diezelfde SVG op een canvas geschilderd — en `src/import-svg.js` voor de witte lijst waaruit een toegevoegde SVG wordt herbouwd, het enige bestand hier waar fout zitten zou uitmaken.