• A la une
  • Catégories
  • Dossiers
  • +

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

par Benjamin SANCHEZle 30/11/2017

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.

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.

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir