Bubble avec D3.js

English version

Les « bubbles » proposées par la librairie D3.js permettent de représenter des résultats d’une manière différente  des formats plus classiques type histogramme ou camembert.

Le modèle D3.js  proposé de base a été modifié afin de pouvoir rajouter des informations telles que le pourcentage  ou encore l’unité de la métrique représentée. De plus ce script a été optimisé pour avoir le meilleurs rendu possible sur les navigateurs web.

Le script prend en entrée un simple fichier csv, composé d’une colonne « name » (nom de la variable) et d’une colonne  « value »(valeur de la variable) et optionnellement d’une colonne « color » afin de pouvoir choisir la couleur d’une ou plusieurs « bulles ».

namevaluecolor
United States395995000#3d02f1
United Kingdom253700405#8415e0
China (People's Republic of)170556500#c82424
Brazil58680000#e0dd15
India44464000
Australia41980971
Russia (Federation)37440000
France34139488#15e0c0
Canada33721141
Italy28951133

De nombreuses fonctionnalités ont été ajoutées en option comme l’affichage en mode écriture scientifique, ou l’utilisation des préfixes du Système International (SI) pour améliorer la visibilité.

//---------------option------------

var file="data_fdi.csv";
var SHOW_NAME = true;
var SHOW_VALUE = true;
var SHOW_PERCENT = true;
var SHOW_SI_VIZ= true;
var SHOW_SCIENTIFIC_VIZ= false;
var symbol= "\u0024" //look of unicode symbol list at http://www.fileformat.info/info/unicode/category/index.html
var Size=750
var with_units = true
var with_title = true
var title="Foreign Direct Investment (FDI) of G20 members"
var show_tooltip_for_small_bubbles = true


Ce script a été testé sur Firefox, cependant si vous envisagez d’utiliser un autre navigateur vous trouverez ici les instructions nécessaires pour que cela fonctionne. Une version « data-embedded » est également disponible ici,

Le code source est librement téléchargeable sur Github ou sur « blocks »

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *