Aujourd'hui le BlogDuWebdesign vous propose de découvrir G2, une bibliothèque Javascript pour mettre en forme vos données.

G2, un langage dédié aux graphs

G2 (pour "the Grammar of Graphics") est une library javascript faite pour visualiser et afficher très simplement des données sous la forme de graphiques.

Son but est de fournir une syntaxe spécifique (tout en restant du Javascript, une sorte de DSL light) pour décrire les parametre d'affichage d'un graphs ainsi que l'organisation des données dans ce dernier en juste une expression simple.

Nouveau ! Trouvez un webdesigner sur le BlogDuWebdesign

Trouvez gratuitement le prochain talent qui réalisera votre projet ou rejoindra votre équipe.

import G2 from '@antv/g2';

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 1150 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

const chart = new G2.Chart({
  container: 'c1',
  width: 500,
  height: 500
});

chart.source(data);
chart.interval().position('genre*sold').color('genre');
chart.render();

Comme vous pouvez le voir, le code et l'installation sont parmi les plus simples que j'ai vus jusqu'à présent, et tout le monde sera capable de l'utiliser, même les plus néophytes en Javascript. Si malgrès ça vous avez besoin d'un coup de pouce supplémentaire, chaque exemple est assorti du code permettant de l'executer.

Enfin, un des gros points de G2 est son incroyable diversité de types de graphes supportés. Je vous laisse en juger par vous-même.