Deze pagina wordt in het Nederlands getoond, de taal waar je browser om vraagt.
De code van deze pagina is niet gestart.
Open je index.html rechtstreeks uit een map, dan worden JavaScript-modules geblokkeerd en gebeurt er niets zodra je wie er op de grafiek komt kiest. Serveer de map in plaats daarvan over http:
Gaat open zodra je hierboven een bestand kiest.klaar — verbreek de verbinding en dit blijft gewoon werken.niet beschikbaar in deze browser (al het andere werkt gewoon).heeft https:// of localhost nodig om offline te kunnen bewaren.bewaren lukt hier niet, maar er wordt hoe dan ook niets geüpload.Je bestanden zijn nergens heen gegaan. {total} bestanden geladen, allemaal van deze site zelf. {platform}Iets heeft {hosts} benaderd, en dat doet dit gereedschap nooit. Dat is het waard om na te kijken. {platform}De eigen scripts van de site voor advertenties, meting en de donatieknop kwamen van {hosts} host; geen daarvan heeft een bestand of een byte ervan gekregen.De eigen scripts van de site voor advertenties, meting en de donatieknop kwamen van {hosts} hosts; geen daarvan heeft een bestand of een byte ervan gekregen.Er ging iets mis: {detail}. Herlaad de pagina om opnieuw te beginnen.{count} bestand wordt gelezen…{count} bestanden worden gelezen…Een voorbeeld proberenVoorbeeld wordt gemaakt…Deze browser kon het voorbeeld niet maken. Kies in plaats daarvan een bestand.
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.
● 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
Live controle:bezig met controleren…
Offline:bezig met controleren…
Je hoeft ons niet op ons woord te geloven: open de DevTools, kijk naar het netwerktabblad en typ een naam en een lengte. Geen enkele aanvraag draagt van geen van beide een teken. Of trek de stekker uit het internet en maak de grafiek toch.
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:
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.
Als de beveiligingssoftware van je werkgever voor een upload waarschuwt. Die let op het moment dat er in een browser een bestand wordt gekozen, en kan niet weten of de pagina het wil versturen — dus waarschuwt hij bij het kiezen. Hier wordt niets verstuurd: open de ontwikkelaarstools, ga naar Netwerk en kies een bestand. Er is geen verzoek dat het meeneemt, en helemaal geen verzoek behalve de lokale voorbeeldweergave van de pagina. Diezelfde controle doet je IT-afdeling in een halve minuut.
1 Zeg wie je vergelijkt
Een naam, een lengte, en wat voor figuur er getekend moet worden. Elke regel begint met een lengte die je er zo overheen kunt typen. Lengtes mag je schrijven zoals jij ze schrijft — 173, 1,73 m, 5'8", 68 in — en de regel onder elk vak laat zien wat er begrepen is, of zegt het in het rood als het vak leeg is of de lengte niet te lezen valt. Er wordt nooit stilletjes iets geraden.
Van boven naar beneden is hier van links naar rechts op de grafiek. Sleep een regel aan het handvat op de linkerrand om hem te verplaatsen, of gebruik de pijltjes, die vanaf het toetsenbord hetzelfde doen. Hoe dan ook gaat de grafiek terug naar jouw eigen volgorde als hij op lengte sorteerde.
Een SVG zet elke tekening op de meetlat — een logo, een plattegrond, een machineonderdeel. Hij wordt in deze pagina gelezen en gaat nergens heen. Alleen de vormen erin worden bewaard: hij komt aan in één egale kleur die je per regel kiest, en alles wat het netwerk zou kunnen bereiken — een gelinkte afbeelding, een stylesheet, een lettertype, een script — blijft achter in plaats van mee te gaan in een grafiek die je misschien naar iemand stuurt. Een tekening van dunne lijnen in plaats van gevulde vormen komt er als één massieve klodder uit, en dat is het enige geval waarin dit het verkeerde gereedschap is.
Een foto of een PNG gaat er in plaats daarvan als zichzelf op en houdt zijn eigen kleuren, zodat de kleur van de rij hem alleen nog benoemt. Ook die wordt hier gelezen en eerst opnieuw getekend — dat begrenst hoeveel hij aan de grafiek toevoegt en laat de metadata van het bestand achter. Wat doorzichtig is blijft doorzichtig, dus een uitsnede staat schoon op de meetlat, en een foto neemt zijn achtergrond mee, die je er beter eerst af kunt snijden.
De meeste komen getekend aan in plaats van als een kaal blok — een deur met een klink, een koelkast met de vriezer erboven, een bank waaraan je ziet dat het een bank is. De tekening wordt op de twee getallen van de regel gepast, dus die getallen bepalen de vorm: typ je eigen getallen eroverheen en de afbeelding volgt. Drie hebben geen tekening, omdat er niets vrijs met de juiste verhoudingen te vinden was: de basketbalring, de zeecontainer en het keukenblad komen aan als de rechthoek die elk voorwerp vroeger was.
Een paar hiervan liggen echt vast: een zeecontainer van 20 ft is per definitie 259 cm hoog, een basketbalring hangt op 305, en een Amerikaanse binnendeur is 203 bij 81. De rest is gebruikelijk in plaats van genormeerd — deuren, ramen en werkbladen verschillen per land en per huis. Elk ervan komt binnen als een gewone regel, dus meet die van jou op en typ de echte getallen eroverheen.
FiguurNaamLengteBreedteKleur
2 Neem hem mee
De PNG is degene om in een document of een chat te plakken. De SVG is degene om te bewaren: die is de grafiek als instructies in plaats van als pixels, dus hij drukt scherp af op elk formaat en kan later door alles wat vectoren opent worden herkleurd.
De meetlat tekenen De lijnen dwars over de grafiek en de getallen aan beide kanten. Zonder die vergelijkt de afbeelding twee mensen nog steeds goed, maar zegt ze niet meer hoe lang ze zijn.
De namen en lengtes boven elke figuur schrijven Uit is de grafiek silhouetten op een meetlat — en dat is wat je wilt als de namen toch al staan in datgene waar je het in plakt.
Helemaal geen achtergrond Transparant, om op een dia te zetten die al een kleur heeft. De meetlat en het schrift worden donker of licht getekend, passend bij de kleur die je hierboven kiest, dus zet die ongeveer op waar de afbeelding op komt te staan, ook als de achtergrond zelf uit is.
Dat is de hoogte van het tekenvlak, dus de afgemaakte afbeelding is iets hoger: de namen staan erboven. De breedte volgt uit hoeveel figuren er zijn en hoe breed het label van elk is. De regel onder de afbeelding zegt wat het geworden is.
ManVrouwJongenMeisjeVoorwerpEigen afbeeldingFiguur voor regel {n}Naam voor regel {n}Lengte voor regel {n}Breedte voor regel {n}Kleur voor regel {n}Regel {n} omhoogRegel {n} omlaagRegel {n} verwijderenSleep om te herschikkenNaam173 cm5'8"BreedteGelezen als {height}Deze regel heeft een lengte nodig voordat hij getekend kan worden.Dat is geen lengte die dit begrijpt. Probeer 173, 1,73 m, 5'8" of 68 in.Te klein om te tekenen — 5 cm is het kleinste.Langer dan de grafiek reikt — 12 meter is de grens.Toegevoegd, getekend uit {shapes} vormen in dat bestand. Er is niets geüpload om het te lezen.In dat bestand valt niets te tekenen. Alleen de vormen worden bewaard — een bestand met alleen tekst, effecten of gelinkte afbeeldingen heeft er geen.Dat bestand is geen SVG die dit kan lezen.Dat bestand is te groot voor één vorm. Twee megabyte is de grens.Toegevoegd. De afbeelding is op deze pagina gelezen en er is niets geüpload.Dat bestand is geen afbeelding die dit kan lezen.Die afbeelding is te groot. Twaalf megabyte is de grens.Voeg iemand toe, en de grafiek verschijnt hier.Elke regel heeft een lengte nodig. Vul er een in en de grafiek verschijnt hier.Twaalf figuren is alles wat deze grafiek kan dragen en leesbaar blijven.{count} figuren, {width} bij {height} pixels. De meetlat loopt van de grond tot {top}, met een lijn om de {step}.Eén figuur, {width} bij {height} pixels. De meetlat loopt van de grond tot {top}, met een lijn om de {step}.Opgeslagen. Er is nergens iets heen gestuurd om het te tekenen.{detail}. De SVG wordt toch gedownload.Gekopieerd. Plak hem waar je hem nodig hebt.Deze browser liet de pagina niet naar het klembord schrijven. Download hem in plaats daarvan.Er staat nog niets op de grafiek om op te slaan.deze browser wilde de SVG niet tekenendeze browser wilde geen PNG schrijvende namen en lengtes die je hebt getypt zijn nergens heen gegaan. {total} bestanden geladen. {platform}Iets heeft {hosts} benaderd, en dat doet dit gereedschap nooit. {platform}De eigen scripts van de site voor advertenties, meting en de donatieknop kwamen van {hosts} host; geen daarvan heeft een naam of een lengte gekregen.De eigen scripts van de site voor advertenties, meting en de donatieknop kwamen van {hosts} hosts; geen daarvan heeft een naam of een lengte gekregen.
Heeft dit geholpen?
Wat ging er mis?
Bedankt — daar hebben we wat aan.
Alleen je antwoord wordt verstuurd, en alleen als je op een knop drukt. Nooit je bestand, niet de naam ervan, en niets erover.
# 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.
Zo maak je een lengtevergelijkingsgrafiek
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.
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.
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.
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.
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.
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.
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 maaktMaak 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.
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.