EnglishCommencer

Les langages du web pour les données

Dessiner des données dans une page web : les éléments SVG et leur repère, le Canvas, le choix entre les deux, et le chargement de données CSV ou JSON.

  • 28 cartes
  • 4 thèmes
  • Gratuit
Réviser ce deck

Le programme, thème par thème

Le poids de chaque thème suit celui que lui donne l'examen.

  1. Notions
  2. Questions
  3. Ranger et relier
  4. Mises en situation

Quelques cartes du deck

  • SVG : de quoi s'agit-il ?

    Voir la réponse

    Format d'image vectorielle décrite en XML : chaque forme (rect, circle, line, path, text) est un élément de la page, que le CSS et le JavaScript peuvent modifier.

    Les formes restent nettes à tout zoom et reçoivent des événements, mais chaque forme coûte un élément dans la page.

  • Un graphique SVG fait 100 px de haut. Quel rectangle dessine, posée sur le bas, la barre d'une valeur de 60 ?

    • <rect y="40" height="60" />
    • <rect y="0" height="60" />
    • <rect y="60" height="60" />
    • <rect y="60" height="40" />
    Voir la réponse

    <rect y="40" height="60" />

    L'axe y descend : la barre doit commencer à 100 − 60 = 40 et s'étendre sur 60 vers le bas. Avec y="0", elle pend du haut ; avec y="60" height="60", elle déborde du graphique ; avec height="40", elle représente 40, pas 60.

  • Dans le repère d'un SVG, l'origine (0, 0) est en … et l'axe des y ….

    Voir la réponse

    Dans le repère d'un SVG, l'origine (0, 0) est en haut à gauche et l'axe des y descend.

    C'est l'inverse d'un graphique de mathématiques : pour une barre posée sur le bas, y vaut la hauteur totale moins la hauteur de la barre.

  • viewBox : de quoi s'agit-il ?

    Voir la réponse

    Attribut de l'élément svg qui définit le repère interne du dessin (x, y, largeur, hauteur) ; il s'étire ensuite à la taille affichée.

    Avec viewBox="0 0 100 50" affiché sur 400 px de large, tout est agrandi 4 fois : on dessine dans les unités des données, le navigateur s'occupe des pixels.

  • Un nuage de 50 000 points dessiné en SVG rend la page lente à afficher et à faire défiler. Que faire ?

    • Utiliser un canvas, une seule surface de pixels
    • Réduire la valeur du viewBox pour que le navigateur calcule moins
    • Convertir le fichier CSV en JSON avant de le charger
    • Regrouper les points dans des éléments g
    Voir la réponse

    Utiliser un canvas, une seule surface de pixels

    Chaque forme SVG est un élément du DOM que le navigateur doit suivre : à 50 000, c'est lourd. Le canvas peint les pixels et oublie. Le format du fichier ou le viewBox ne changent pas le nombre d'éléments, et un g n'en retire aucun.

Réviser ce deck