Le code de cette page n'a pas démarré.

Ouvrir index.html directement depuis un dossier bloque les modules JavaScript, si bien que rien ne se passera au moment de choisir qui figure sur le graphique. Servez plutôt le dossier en http :

powershell -ExecutionPolicy Bypass -File serve.ps1

Ouvrez ensuite http://localhost:8080/.

Comparer des tailles — un graphique côte à côte, téléchargeable

Tapez les tailles, emportez l'image. Rien n'est envoyé pour la dessiner.

Langue: Français
Voir le code
Vos noms, tailles et le graphique qu'ils forment sont traités dans votre navigateur. Aucun envoi pour traitement.

Un graphique de tailles, c'est de l'arithmétique et un dessin : il n'y a pas de fichier à envoyer ni de service à interroger — et le seul fichier que cette page accepte, une image à vous à poser sur la règle, est lu ici et ne va nulle part. L'homme, la femme, le garçon et la fille sont des illustrations du domaine public livrées avec cette page, et le garçon et la fille sont des dessins d'enfants réels plutôt que d'adultes rapetissés — ce qui est précisément ce qui empêche un graphique de famille de sonner faux d'une manière que personne ne sait nommer. Chacune de ces étapes se passe dans quelques centaines de lignes de JavaScript de cette page, que vous pouvez lire. Il n'y a aucune fonction réseau, et cela compte ici parce que ce que vous tapez est une liste de personnes et la taille de chacune.

Vérification en direct : vérification…

Hors ligne : vérification…

Inutile de nous croire sur parole : ouvrez les DevTools, regardez l'onglet réseau et tapez un nom et une taille. Pas une requête n'en transporte un caractère. Ou débranchez internet et faites le graphique quand même.

1 Dites qui vous comparez

Un nom, une taille, et quel genre de figure dessiner. Chaque ligne démarre avec une taille que vous pouvez réécrire directement. Les tailles peuvent s'écrire comme vous les écrivez — 173, 1.73 m, 5'8", 68 in — et la ligne sous chaque case montre ce qui a été compris, ou le dit en rouge si la case est vide ou si la taille ne peut pas être lue. Rien n'est jamais deviné en silence.

De haut en bas ici, c'est de gauche à droite sur le graphique. Faites glisser une ligne par la poignée de son bord gauche pour la déplacer, ou servez-vous des flèches, qui font la même chose au clavier. Dans les deux cas le graphique revient à votre propre ordre s'il triait par taille.

Un SVG pose n'importe quel dessin sur la règle — un logo, un plan, une pièce de machine. Il est lu dans cette page et ne va nulle part. Seules les formes qu'il contient sont gardées : il arrive dans une seule couleur pleine que vous choisissez par ligne, et tout ce qui pourrait atteindre le réseau — une image liée, une feuille de style, une police, un script — reste derrière plutôt que d'être emporté dans un graphique que vous enverriez à quelqu'un. Un dessin fait de traits fins plutôt que de formes pleines ressort en pâté d'un seul tenant, et c'est le seul cas où ce n'est pas le bon outil.

Une photo ou un PNG arrive tel quel et garde ses propres couleurs, si bien que la couleur de la ligne ne fait plus que le nommer. Il est lu ici lui aussi, et redessiné avant d'être posé — ce qui borne ce qu'il ajoute au graphique et laisse derrière lui les métadonnées du fichier. Ce qui est transparent le reste : un détourage se pose proprement sur la règle, tandis qu'une photo apporte son fond avec elle, qu'il vaut mieux recadrer avant.

La plupart arrivent dessinés plutôt qu'en simple bloc — une porte avec sa poignée, un réfrigérateur avec son congélateur au-dessus, un canapé dont on voit que c'en est un. Le dessin est ajusté aux deux nombres de la ligne : ce sont donc les nombres qui décident de la forme, tapez les vôtres par-dessus et l'image suit. Trois n'ont pas de dessin, faute d'en avoir trouvé un libre et correctement proportionné : le panier de basket, le conteneur maritime et le plan de travail de cuisine arrivent en rectangle, ce que tout objet était auparavant.

Quelques-unes de ces mesures sont vraiment fixes : un conteneur maritime de 20 ft fait 259 cm de haut par définition, un cercle de basket est à 305, et une porte intérieure américaine fait 203 sur 81. Les autres sont typiques plutôt que normalisées — portes, fenêtres et plans de travail varient selon le pays et selon la maison. Chacune arrive comme une ligne ordinaire : mesurez la vôtre et tapez les vrais chiffres par-dessus.

Laissez la largeur d’un objet vide pour une largeur automatique. Si la largeur saisie ne peut pas être lue, cette ligne reste absente du graphique jusqu’à sa correction.

2 Emportez-le

Le PNG est celui à coller dans un document ou une conversation. Le SVG est celui à garder : c'est le graphique sous forme d'instructions plutôt que de pixels, il s'imprime donc net à n'importe quelle taille et tout ce qui ouvre des vecteurs peut le recolorer plus tard.

Dessiner la règle Les lignes en travers du graphique et les chiffres des deux côtés. Sans elles l'image compare toujours correctement deux personnes, mais elle cesse de dire la taille de l'une ou de l'autre.

Écrire les noms et les tailles au-dessus de chaque figure Désactivé, le graphique n'est que des silhouettes sur une règle — ce que vous voulez si les noms figurent déjà là où vous le collez.

Aucun fond du tout Transparent, pour le poser sur une diapositive qui a déjà une couleur. La règle et le texte sont dessinés sombres ou clairs selon la couleur choisie ci-dessus : réglez-la donc à peu près sur ce sur quoi l'image se posera, même quand le fond lui-même est désactivé.

C'est la hauteur de la zone de dessin : l'image finie est donc un peu plus haute, car les noms se placent au-dessus. La largeur découle du nombre de figures et de la largeur de l'étiquette de chacune. La ligne sous l'image dit ce que cela a donné.

Son allure

Voir en Markdown

Comment faire un graphique de comparaison de tailles

  1. Ajoutez tout le monde d'abord, l'allure viendra après.Une ligne, c'est une figure, un nom, une taille et une couleur. Le nom est facultatif — un graphique de deux silhouettes anonymes avec leurs tailles au-dessus est souvent exactement ce qu'on veut — et les flèches de chaque ligne la déplacent à gauche ou à droite si l'ordre compte.
  2. Tapez la taille comme vous l'écrivez.173, 1.73 m, 5'8", 68 in et 5 ft 8 sont tous lus correctement. La ligne sous la case montre ce qui a été compris, dans les deux systèmes, si bien qu'une mauvaise lecture est visible avant le dessin plutôt qu'après l'impression. Un nombre nu, ce sont des centimètres sur un graphique métrique et des pouces sur un graphique impérial, et un nombre nu inférieur à trois, ce sont des mètres — personne ne mesure 1,73 cm.
  3. Choisissez la figure qui correspond à la personne.Un enfant mesure environ six têtes et un adulte sept et demie, si bien qu'un enfant dessiné comme un adulte rétréci a l'air faux d'une manière difficile à nommer et facile à voir. Le garçon et la fille sont des dessins d'enfants réels plutôt que des adultes rapetissés, et c'est l'essentiel de ce qui fait qu'un graphique de famille ressemble à une famille. Chaque ligne arrive en outre avec une taille déjà inscrite, si bien qu'ajouter quelqu'un dessine quelqu'un — tapez simplement par-dessus.
  4. Mettez quelque chose de familier sur le graphique.Un nombre est abstrait, une porte ne l'est pas. Ajouter un seul objet d'une taille que tout le monde connaît — une porte, une fenêtre, un tableau de classe, un distributeur — est ce qui transforme un graphique qui énonce deux tailles en un graphique qui les montre. Le menu en contient vingt, regroupés, et chacun arrive comme une ligne ordinaire par-dessus laquelle vous pouvez taper vos propres chiffres. Les objets prennent une largeur en plus d'une hauteur, si bien qu'une porte fait 203 sur 81 et non une bande.
  5. Ou posez-y votre propre dessin.Votre propre image prend un fichier sur votre machine et le pose sur la règle à la hauteur que vous lui donnez — ce vers quoi se tourner quand le graphique porte sur un produit, un véhicule ou un bâtiment plutôt que sur une personne. Un SVG est dessiné dans la couleur de sa ligne, comme toute autre silhouette ; une photographie ou un PNG y va tel quel. L'un comme l'autre garde ses propres proportions, et l'un comme l'autre est lu ici plutôt qu'envoyé où que ce soit.
  6. Réglez la règle sur les unités auxquelles pense votre lecteur.Passer des centimètres aux pieds réécrit ce qu'il y a dans les cases plutôt que de le réinterpréter, si bien que le graphique lui-même ne bouge pas : seule la notation change. Si le graphique s'adresse à deux publics, la taille écrite au-dessus de chaque figure est dans l'unité du graphique et la ligne sous chaque case porte les deux.
  7. Le PNG pour coller, le SVG pour imprimer.Le PNG est une image à la hauteur en pixels que vous avez réglée, ce que veut une fenêtre de discussion, un document ou une diapositive. Le SVG est le graphique sous forme d'instructions, il s'imprime donc net à n'importe quelle taille et peut encore être recoloré ensuite par tout ce qui ouvre des vecteurs.

La version longue

Comment faire un graphique de comparaison de tailles Transformer une liste de tailles en une image côte à côte : comment écrire les tailles, quelle figure choisir pour un enfant, pourquoi un objet familier fait plus qu'une troisième personne, et comment sortir le graphique en PNG ou en SVG.

Questions

Ce que je tape est-il envoyé quelque part ?

Non. Le graphique est dessiné par du JavaScript de cette page, sur votre propre machine, et cet outil n'a aucune fonction réseau d'aucune sorte — il ne récupère jamais rien et n'envoie jamais rien. La Content-Security-Policy de la page nomme chaque adresse qu'elle peut contacter, dont aucune ne nous appartient. Cela vaut la peine d'être dit clairement ici, parce que l'entrée est une liste de noms de personnes et de leurs tailles, ce qui est plus personnel que la plupart de ce que traite ce site.

Puis-je télécharger le graphique ?

Oui, en PNG ou en SVG, sans filigrane et sans compte. Le PNG est dessiné à la hauteur en pixels que vous réglez et c'est celui à coller dans un document, une diapositive ou une discussion. Le SVG est le graphique sous forme d'instructions plutôt que de pixels : il s'imprime net à n'importe quelle taille et peut être ouvert et recoloré plus tard dans n'importe quel éditeur vectoriel. Les deux sont fabriqués à partir du même balisage que celui à l'écran, aucun ne peut donc diverger de l'aperçu.

Comment écrire la taille — en centimètres ou en pieds ?

Comme vous voulez, sur n'importe quelle ligne, de la façon dont vous l'écrivez d'habitude. 173, 173 cm, 1.73 m, 5'8", 5 ft 8 in et 68 in sont tous compris, et la ligne sous la case montre ce qui a été lu dans les deux systèmes. Un nombre nu, ce sont des centimètres quand le graphique est métrique et des pouces quand il est impérial ; un nombre nu inférieur à trois est pris pour des mètres, parce que 1,73 cm n'est pas une taille que quiconque tape.

Pourquoi les enfants ne ressemblent-ils pas à des adultes en réduction ?

Parce qu'un enfant n'en est pas un. Les proportions du corps changent avec l'âge : un enfant de deux ans mesure à peu près quatre têtes et demie, un enfant de huit ans six, un adulte sept et demie — la tête représente donc près d'un quart d'un jeune enfant et un huitième d'un adulte. Le garçon et la fille sont ici des dessins d'enfants réels plutôt qu'une seule silhouette réduite, ce qui explique qu'un graphique de famille ressemble à une famille plutôt qu'à quatre adultes de tailles différentes.

D'où viennent les figures ?

Toutes les quatre sont des illustrations d'autres personnes, toutes dans le domaine public : l'homme par pitr, la femme par Madeleine Price Ball, la fille par OpenClipart-Vectors, et le garçon par Ryan Kissinger pour la bibliothèque NIH BioArt. Chaque fichier est livré avec cette page dans vendor/ tel qu'il a été publié, vous pouvez donc les comparer aux originaux. Le domaine public ne demande rien, et c'est bien le point : l'illustration finit à l'intérieur d'une image que vous téléchargez, et une licence exigeant une attribution attacherait cette exigence à votre graphique.

Puis-je mettre ma propre image sur le graphique ?

Oui — Votre propre image prend un dessin ou une photographie et le pose sur la règle à la hauteur que vous tapez : un logo, un plan, une pièce de machine, une voiture, ou une photo de la chose elle-même. Ses proportions sont les siennes, il n'y a donc pas de largeur à remplir.

Un SVG est dessiné dans une seule couleur pleine, celle sur laquelle cette ligne est réglée, parce que c'est ce qu'est le reste du graphique — un dessin fait de contours fins plutôt que de formes pleines ressort donc en pâté, et ce n'est pas le bon outil pour cela. Seules les formes sont gardées : le fichier est reconstruit de zéro à partir de chemins, de rectangles et de cercles, et tout ce qui pourrait atteindre le réseau — une image liée, une feuille de style, une police, un script — reste derrière.

Une photo ou un PNG y va tel quel et garde ses propres couleurs, si bien que la couleur de la ligne ne fait plus que le nommer. Il est redessiné ici avant d'y aller, ce qui borne ce qu'il ajoute au graphique et laisse derrière lui les métadonnées du fichier. La transparence est conservée, un détourage se tient donc proprement sur la règle — et une photo apporte son arrière-plan avec elle, qu'il vaut mieux rogner d'abord.

Aucun des deux fichiers ne va nulle part. Cela compte deux fois, parce que le graphique que vous téléchargez est un fichier que vous enverriez peut-être à quelqu'un.

Pourquoi n'y a-t-il ni tout-petit ni bébé ?

Nous n’avons pas trouvé de dessin de bébé ou de tout-petit répondant aux exigences de domaine public et de dessin de cet outil. Les figures fournies sont un garçon et une fille, pas un catalogue complet. Pour un enfant plus jeune, indiquez sa taille mesurée ou ajoutez une image adaptée ; la règle porte la mesure.

Combien de personnes puis-je mettre sur un graphique ?

Douze. Ce n'est pas une limite technique — le dessin en ferait volontiers trente — mais passé la douzaine les colonnes deviennent plus étroites que les noms écrits au-dessus et l'image cesse d'être lisible. S'il vous en faut davantage, désactiver les noms vous rend la largeur, ou deux graphiques le diront mieux qu'un.

Puis-je mettre un objet sur le graphique ?

Oui — et la plupart arrivent dessinés. Le menu en propose vingt pour commencer, en quatre groupes : portes et fenêtres, école et bureau (un tableau, un bureau, un classeur, un écran de projection), choses de la ville (un distributeur, une poubelle à roulettes, un panier de basket, un conteneur de 20 ft) et choses de la maison. Dix-sept d'entre eux viennent avec un dessin — une porte avec sa poignée, un réfrigérateur avec son congélateur au-dessus, un canapé dont on voit que c'est un canapé —, et le dessin est ajusté à la hauteur et à la largeur de la ligne, si bien que ce sont toujours les nombres qui décident de la taille, et que les vôtres, tapés par-dessus, valent toujours. Les trois autres sont de simples rectangles, parce qu'aucun dessin libre de ceux-là ne s'est révélé à la fois juste et bien proportionné, et qu'un dessin faux est pire qu'un bloc honnête sur un graphique qui parle d'échelle.

Certaines de ces tailles sont de véritables normes et d'autres des tailles typiques, ce que la page dit à voix haute. Un objet familier fait plus pour un graphique que n'importe quel nombre de personnes supplémentaires : c'est lui qui transforme une comparaison en sens de l'échelle.

Y a-t-il une figure pour un chien ou un chat ?

Non, et c'est un manque délibéré plutôt qu'un oubli. Les deux ont été construits — de profil, debout, la tête à hauteur d'épaule, pour que le haut du dessin soit la taille écrite à côté, là où toute norme de race mesure un animal. Ils ne sont pas sortis assez bien pour être livrés : un quadrupède vu de côté à côté de quatre personnes vues de face se lit comme une erreur même quand le dessin est bon. Un rectangle à la hauteur du garrot de l'animal est honnête en attendant.

Puis-je partager le graphique par un lien ?

Pas d'ici, et c'est délibéré. Les outils qui le proposent le font en mettant la liste entière dans l'adresse, ce qui veut dire que chaque nom et chaque taille finissent dans tout ce par quoi le lien voyage — les journaux d'un serveur de messagerie, un scanner de courrier, l'historique de quelqu'un, un service qui va chercher un aperçu de lien. Téléchargez l'image et envoyez-la à la place : elle dit la même chose et ne transporte aucune liste.

Est-ce gratuit, et puis-je utiliser le graphique commercialement ?

C'est gratuit, il n'y a ni compte ni filigrane, et vous pouvez mettre le résultat dans un rapport, une présentation, une annonce ou un produit. Le site affiche de la publicité, et c'est elle qui le finance. Rien de ce que vous faites ici ne nous appartient, et rien n'est conservé.

Pourquoi la règle est-elle en dizaines et non en unités ?

Parce que l'espacement est choisi d'après le nombre de lignes que l'image peut porter plutôt que d'après un nombre fixe. Un graphique de deux adultes reçoit une ligne tous les dix centimètres ; ajoutez-y un panier de basket et les lignes passent à vingt-cinq, parce que quatre-vingt-dix lignes sur une image font un lavis gris plutôt qu'une règle. En pieds et pouces l'échelle est de un, trois, six et douze pouces, si bien que les lignes tombent sur des pouces entiers au lieu de tomber à côté.

Puis-je mettre le graphique sur une diapositive sombre ?

Oui. Réglez le fond sur la couleur sur laquelle il se posera et la règle et le texte basculent entre sombre et clair pour s'y accorder — calculé d'après la luminance de la couleur plutôt que deviné. Cochez ensuite « aucun fond du tout » si vous voulez l'image elle-même transparente : la couleur que vous avez choisie décide toujours de l'encre, si bien qu'un graphique transparent destiné à une diapositive bleu marine en ressort lisible.

Est-ce que cela fonctionne hors ligne ?

Oui. Chargez la page une fois, puis débranchez internet et elle continue de fonctionner. C'est aussi la façon la plus simple de prouver que rien n'est envoyé : un outil qui expédierait votre liste pour qu'on lui dessine un graphique s'arrêterait à l'instant où vous débranchez.