Il codice di questa pagina non è partito.

Se apri index.html direttamente da una cartella, i moduli JavaScript restano bloccati, quindi non succederà niente quando sceglierai chi finisce sul grafico. Servi invece la cartella via http:

powershell -ExecutionPolicy Bypass -File serve.ps1

Poi apri http://localhost:8080/.

Confronto di altezze — un grafico affiancato che puoi scaricare

Scrivi le altezze, portati via l'immagine. Per disegnarla non viene mandato niente.

Lingua: Italiano
Vedi il codice
Qui non si caricano nomi, altezze e il grafico che ne esce, mai. Non c'è nessun server.

Un grafico delle altezze è aritmetica e un disegno: non c'è nessun file da mandare e nessun servizio da interrogare — e l'unico file che questa pagina accetta, un'immagine tua da mettere sul righello, viene letto qui e non va da nessuna parte. L'uomo, la donna, il bambino e la bambina sono disegni di pubblico dominio che viaggiano con questa pagina, e il bambino e la bambina sono disegni di bambini veri invece che di adulti fatti piccoli — ed è questo che impedisce a un grafico di famiglia di venire storto in un modo che nessuno sa nominare. Ogni passo avviene in qualche centinaio di righe di JavaScript in questa pagina, che puoi leggere. Non c'è nessuna funzione di rete di alcun tipo, e qui conta perché quello che scrivi è un elenco di persone e quanto è alta ciascuna.

Verifica dal vivo: verifica in corso…

Offline: verifica in corso…

Non devi crederci sulla parola: apri i DevTools, guarda la scheda di rete e scrivi un nome e un'altezza. Non una sola richiesta porta un carattere né dell'uno né dell'altra. Oppure stacca internet e fai il grafico lo stesso.

1 Di' chi stai confrontando

Un nome, un'altezza e che tipo di figura disegnare. Ogni riga parte da un'altezza su cui puoi scrivere sopra direttamente. Le altezze si possono scrivere come le scrivi tu — 173, 1,73 m, 5'8", 68 in — e la riga sotto ogni casella mostra cosa è stato capito, oppure lo dice in rosso se la casella è vuota o l'altezza non si riesce a leggere. Non viene mai indovinato niente di nascosto.

Dall'alto in basso qui è da sinistra a destra sul grafico. Trascina una riga dalla maniglia sul suo bordo sinistro per spostarla, oppure usa le frecce, che fanno la stessa cosa da tastiera. In tutti e due i casi il grafico torna al tuo ordine se stava ordinando per altezza.

Un SVG mette qualunque disegno sul righello — un logo, una pianta, un pezzo di macchinario. Viene letto in questa pagina e non va da nessuna parte. Si tiene solo quello che c'è dentro come forme: arriva in un unico colore pieno che scegli riga per riga, e tutto quello che potrebbe raggiungere la rete — un'immagine collegata, un foglio di stile, un font, uno script — resta fuori invece di finire dentro un grafico che magari mandi a qualcuno. Un disegno fatto di linee sottili invece che di forme piene esce come una macchia compatta, ed è l'unico caso in cui questo è lo strumento sbagliato.

Una foto o un PNG ci va così com'è e tiene i suoi colori, quindi il colore della riga si limita a nominarla. Anche questa viene letta qui, e ridisegnata prima di entrare — il che limita quanto fa crescere il grafico e lascia indietro i metadati del file. Ciò che è trasparente resta trasparente: un ritaglio sta pulito sul righello, mentre una foto si porta dietro lo sfondo, che conviene tagliare prima.

Quasi tutti arrivano disegnati e non come un blocco liscio — una porta con la maniglia, un frigorifero con il congelatore sopra, un divano che si vede che è un divano. Il disegno viene adattato ai due numeri della riga, quindi sono i numeri a decidere la forma: scrivi i tuoi sopra e l'immagine segue. Tre non hanno disegno, perché non ne è saltato fuori nessuno libero e con le proporzioni giuste: il canestro da basket, il container marittimo e il piano di lavoro della cucina arrivano come il rettangolo che prima era ogni oggetto.

Alcune di queste misure sono davvero fisse: un container marittimo da 20 ft è alto 259 cm per definizione, un canestro sta a 305, e una porta interna americana è 203 per 81. Le altre sono tipiche più che standard — porte, finestre e piani di lavoro cambiano da paese a paese e da casa a casa. Ognuna arriva come una riga normale, quindi misura la tua e scrivici sopra i numeri veri.

2 Prenditelo

Il PNG è quello da incollare in un documento o in una chat. L'SVG è quello da tenere: è il grafico come istruzioni invece che come pixel, quindi stampa nitido a qualsiasi dimensione e può essere ricolorato dopo da qualunque cosa apra i vettori.

Disegna il righello Le righe che attraversano il grafico e i numeri sui due lati. Senza di loro l'immagine confronta ancora bene due persone, ma smette di dire quanto è alta ciascuna.

Scrivi nomi e altezze sopra ogni figura Spento, il grafico è sagome su un righello — ed è quello che vuoi se i nomi finiscono già in quello dove lo stai incollando.

Nessuno sfondo Trasparente, per posarlo su una slide che ha già un colore. Il righello e la scritta vengono disegnati scuri o chiari a seconda del colore scelto qui sopra, quindi imposta quello più o meno su ciò su cui finirà l'immagine, anche quando lo sfondo è spento.

Quella è l'altezza dell'area di disegno, quindi l'immagine finita è un po' più alta: i nomi stanno sopra. La larghezza viene da quante figure ci sono e da quanto è larga l'etichetta di ciascuna. La riga sotto l'immagine dice com'è venuta.

Come viene

Vedi come Markdown

Come fare un grafico di confronto delle altezze

  1. Aggiungi tutti prima, poi pensa a come viene. Una riga è una figura, un nome, un'altezza e un colore. Il nome è facoltativo — un grafico di due sagome senza nome con le loro altezze sopra è spesso esattamente quello che uno vuole — e le frecce su ogni riga la spostano a sinistra o a destra se l'ordine conta.
  2. Scrivi l'altezza come la scrivi tu. 173, 1,73 m, 5'8", 68 in e 5 ft 8 vengono letti tutti correttamente. La riga sotto la casella mostra cosa è stato capito, in tutti e due i sistemi, così una lettura sbagliata si vede prima che sia disegnata invece che dopo che è stata stampata. Un numero da solo sono centimetri su un grafico metrico e pollici su uno imperiale, e un numero da solo sotto il tre sono metri — nessuno è alto 1,73 cm.
  3. Scegli la figura che corrisponde alla persona. Un bambino è alto circa sei teste e un adulto sette e mezza, quindi un bambino disegnato come un adulto rimpicciolito viene male in un modo difficile da spiegare e facile da vedere. Il bambino e la bambina sono disegni di bambini veri invece che adulti rimpiccioliti, ed è gran parte di quello che fa sembrare una famiglia un grafico di famiglia. Ogni riga arriva anche con un'altezza già dentro, quindi aggiungere qualcuno disegna qualcuno — scrivici sopra direttamente.
  4. Metti sul grafico qualcosa di familiare. Un numero è astratto e una porta no. Aggiungere un solo oggetto di una misura che tutti conoscono — una porta, una finestra, una lavagna di classe, un distributore automatico — è quello che trasforma un grafico che dichiara due altezze in uno che le mostra. Il menù ne tiene venti, raggruppati, e ognuno diventa una riga normale su cui puoi scrivere i tuoi numeri. Gli oggetti prendono una larghezza oltre a un'altezza, quindi una porta è 203 per 81 e non una striscia.
  5. Oppure metticene sopra uno tuo. La tua immagine prende un file dalla tua macchina e lo mette sul righello all'altezza che gli dai — la cosa da usare quando il grafico parla di un prodotto, un veicolo o un edificio invece che di una persona. Un SVG viene disegnato nel colore della sua riga come ogni altra figura; una fotografia o un PNG ci va così com'è. Entrambi tengono le proprie proporzioni, ed entrambi vengono letti qui invece di essere mandati da qualche parte.
  6. Metti il righello nelle unità in cui pensa chi legge. Passare da centimetri a piedi riscrive quello che c'è nelle caselle invece di reinterpretarlo, quindi il grafico in sé non si muove: cambia solo la notazione. Se il grafico è per due pubblici, l'altezza scritta sopra ogni figura è nell'unità del grafico e la riga sotto ogni casella le ha entrambe.
  7. Il PNG per incollare, l'SVG per stampare. Il PNG è un'immagine all'altezza in pixel che hai impostato, ed è quello che vuole una finestra di chat, un documento o una slide. L'SVG è il grafico come istruzioni, quindi stampa nitido a qualsiasi dimensione e può ancora essere ricolorato dopo da qualunque cosa apra i vettori.

La versione lunga

Come fare un grafico di confronto delle altezze Trasformare un elenco di altezze in un'immagine affiancata: come scrivere le altezze, quale figura scegliere per un bambino, perché un solo oggetto familiare fa più di una terza persona, e come tirare fuori il grafico come PNG o SVG.

Domande

Quello che scrivo viene mandato da qualche parte?

No. Il grafico viene disegnato dal JavaScript di questa pagina, sul tuo dispositivo, e questo strumento non ha nessuna funzione di rete di alcun tipo — non scarica mai niente e non manda mai niente. La Content-Security-Policy della pagina elenca ogni indirizzo che può contattare, e nessuno di questi è nostro. Vale la pena dirlo chiaramente qui, perché quello che si inserisce è un elenco di nomi di persone e di quanto è alta ciascuna, che è più personale di quasi tutto quello che questo sito maneggia.

Posso scaricare il grafico?

Sì, come PNG o come SVG, senza filigrana e senza account. Il PNG viene disegnato all'altezza in pixel che imposti ed è quello da incollare in un documento, una slide o una chat. L'SVG è il grafico come istruzioni invece che come pixel: stampa nitido a qualsiasi dimensione e può essere aperto e ricolorato più avanti in qualunque editor vettoriale. Tutti e due sono fatti a partire dallo stesso markup che sta sullo schermo, quindi nessuno dei due può non essere d'accordo con l'anteprima.

Come scrivo l'altezza — in centimetri o in piedi?

Come vuoi, in qualunque riga, nel modo in cui la scrivi di solito. 173, 173 cm, 1,73 m, 5'8", 5 ft 8 in e 68 in vengono capiti tutti, e la riga sotto la casella mostra cosa è stato letto in tutti e due i sistemi. Un numero da solo sono centimetri quando il grafico è metrico e pollici quando è imperiale; un numero da solo sotto il tre viene preso per metri, perché 1,73 cm non è un'altezza che qualcuno scriva.

Perché i bambini non sembrano adulti rimpiccioliti?

Perché un bambino non lo è. Le proporzioni del corpo cambiano con l'età: un bambino di due anni è alto più o meno quattro teste e mezza, uno di otto sei, un adulto sette e mezza — quindi la testa è quasi un quarto di un bambino piccolo e un ottavo di un adulto. Il bambino e la bambina qui sono disegni di bambini veri invece che una sola sagoma ridotta, ed è per questo che un grafico di famiglia sembra una famiglia invece che quattro adulti di misure diverse.

Da dove vengono le figure?

Tutte e quattro sono disegni di altre persone, tutti di pubblico dominio: l'uomo di pitr, la donna di Madeleine Price Ball, la bambina di OpenClipart-Vectors e il bambino di Ryan Kissinger per la biblioteca NIH BioArt. Ogni file viaggia con questa pagina in vendor/ così com'è stato pubblicato, quindi puoi confrontarli con gli originali. Il pubblico dominio non chiede niente, ed è proprio questo il punto: il disegno finisce dentro un'immagine che scarichi, e una licenza che richiedesse l'attribuzione attaccherebbe quella richiesta al tuo grafico.

Posso mettere una mia immagine sul grafico?

Sì — La tua immagine prende un disegno o una fotografia e lo mette sul righello all'altezza che scrivi: un logo, una pianta, un pezzo di macchinario, un'auto, o una foto della cosa stessa. Le proporzioni sono le sue, quindi non c'è una larghezza da riempire.

Un SVG viene disegnato in un solo colore pieno, quello su cui è impostata quella riga, perché è quello che è il resto del grafico — quindi un disegno fatto di contorni sottili invece che di forme piene esce come una macchia, e per quello questo è lo strumento sbagliato. Si tengono solo le forme: il file viene ricostruito da zero a partire da tracciati, rettangoli e cerchi, e tutto quello che potrebbe raggiungere la rete — un'immagine collegata, un foglio di stile, un font, uno script — resta fuori.

Una foto o un PNG ci va così com'è e tiene i suoi colori, quindi il colore della riga si limita a darle un nome. Viene ridisegnata qui prima di andarci, il che limita quanto aggiunge al grafico e lascia fuori i metadati del file. La trasparenza si conserva, quindi uno scontorno sta pulito sul righello — e una foto si porta dietro lo sfondo, che conviene ritagliare prima.

Nessuno dei due file va da nessuna parte. Conta due volte, perché il grafico che scarichi è un file che magari mandi a qualcuno.

Perché non c'è un bimbo piccolo o un neonato?

Perché nessuno ne ha disegnato uno mettendolo di pubblico dominio. Wikimedia Commons ha esattamente un bambino libero utilizzabile — la bambina — e la biblioteca NIH BioArt il bambino; sotto l'età scolare la ricerca torna vuota, e ogni set libero e coerente di persone è un pittogramma da bagno pubblico con la stessa forma a ogni età, che è l'errore che questo strumento intero esiste per evitare. Per un po' c'è stato un bimbo piccolo disegnato dal codice di questa pagina, ed era l'unica figura del grafico che nessuno aveva disegnato: si vedeva, accanto a quattro che qualcuno aveva disegnato. Per chiunque sia più basso del bambino o della bambina, metti uno dei due all'altezza vera — è il righello che porta il confronto, e sarà giusto.

Quante persone posso mettere su un grafico?

Dodici. Non è un limite tecnico — il disegno ne farebbe volentieri trenta — ma oltre la dozzina le colonne diventano più strette dei nomi scritti sopra e l'immagine smette di leggersi. Se te ne servono di più, spegnere i nomi ti restituisce la larghezza, oppure due grafici lo diranno meglio di uno.

Posso mettere un oggetto sul grafico?

Sì — e la maggior parte arriva disegnata. Il menù ne tiene venti da cui partire, in quattro gruppi: porte e finestre, scuola e ufficio (una lavagna, una scrivania, un classificatore, uno schermo da proiezione), cose in giro per la città (un distributore automatico, un bidone con ruote, un canestro, un container da 20 ft) e cose in giro per casa. Diciassette di loro arrivano con un disegno — una porta con la maniglia, un frigorifero con il congelatore sopra, un divano che si vede che è un divano — e il disegno viene adattato all'altezza e alla larghezza della riga, così sono sempre i numeri a decidere la misura, e i tuoi, scritti sopra, valgono sempre. Gli altri tre sono semplici rettangoli, perché di loro non è saltato fuori nessun disegno libero che fosse insieme giusto e proporzionato bene, e un disegno sbagliato è peggio di un blocco onesto su un grafico che parla di scala.

Alcune di queste misure sono davvero standard e altre misure tipiche, cosa che la pagina dice a voce alta. Un oggetto familiare fa per un grafico più di qualunque numero di persone in più: è quello che trasforma un confronto in un senso della scala.

C'è una figura per un cane o un gatto?

No, ed è una mancanza voluta più che una dimenticanza. Tutti e due erano stati costruiti — di profilo, in piedi, con la testa all'altezza della spalla, in modo che la cima del disegno fosse l'altezza scritta accanto, che è dove ogni standard di razza misura un animale. Non sono venuti abbastanza bene da pubblicarli: un quadrupede visto di lato accanto a quattro persone viste di fronte si legge come uno sbaglio anche quando il disegno è buono. Un rettangolo all'altezza del garrese dell'animale è onesto nel frattempo.

Posso condividere il grafico con un link?

Non da qui, ed è voluto. Gli strumenti che lo offrono lo fanno mettendo tutto l'elenco nell'indirizzo, il che vuol dire che ogni nome e ogni altezza finiscono in qualunque cosa il link attraversi — i log di un server di chat, uno scanner di posta, la cronologia di qualcuno, un servizio che va a prendere l'anteprima del link. Scarica l'immagine e manda quella: dice la stessa cosa e non si porta dietro nessun elenco.

È gratis, e posso usare il grafico commercialmente?

È gratis, non c'è account e non c'è filigrana, e puoi mettere il risultato in una relazione, una presentazione, un annuncio o un prodotto. Il sito ha della pubblicità, ed è quella che lo mantiene. Di un grafico che fai qui non è nostro niente, e non viene tenuto niente.

Perché il righello va di dieci in dieci e non di uno in uno?

Perché la spaziatura viene scelta da quante righe l'immagine riesce a portare invece che da un numero fisso. Un grafico di due adulti prende una riga ogni dieci centimetri; mettici un canestro e le righe passano a venticinque, perché novanta righe su un'immagine sono una velatura grigia e non un righello. In piedi e pollici la scala è uno, tre, sei e dodici pollici, così le righe cadono su pollici interi invece che vicino a loro.

Posso mettere il grafico su una slide scura?

Sì. Imposta lo sfondo sul colore su cui starà e il righello e la scritta passano da scuro a chiaro per adattarsi — calcolato dalla luminanza del colore invece che indovinato. Poi spunta “nessuno sfondo” se vuoi l'immagine trasparente: il colore che hai scelto continua a decidere l'inchiostro, quindi un grafico trasparente diretto a una slide blu scuro ne esce leggibile.

Funziona offline?

Sì. Carica la pagina una volta, poi stacca internet e continua a funzionare. È anche il modo più semplice per dimostrare che non viene caricato niente: uno strumento che mandasse via il tuo elenco per farci disegnare un grafico si fermerebbe nel momento in cui stacchi la spina.