Nous contacter

  1. Accueil
  2. Blog
  3. Développement
  4. Découvrez G2, la librairie JS qui parle à l’oreille des graphes

Découvrez G2, la librairie JS qui parle à l’oreille des graphes

Le 30/11/2017

Dans Développement

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.

G2 librairie js

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.

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.