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 ».
name | value | color |
---|---|---|
United States | 395995000 | #3d02f1 |
United Kingdom | 253700405 | #8415e0 |
China (People's Republic of) | 170556500 | #c82424 |
Brazil | 58680000 | #e0dd15 |
India | 44464000 | |
Australia | 41980971 | |
Russia (Federation) | 37440000 | |
France | 34139488 | #15e0c0 |
Canada | 33721141 | |
Italy | 28951133 |
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 »