3
Existe-t-il un nom spécifique pour ce type de graphique? Qu'est-ce que la bibliothèque de graphiques JavaScript a?Quel est le nom de ce tableau?
A
Répondre
4
Levez les yeux vers treemaps/treemap. Voici comment Wikipedia les décrit:.
« Dans la visualisation de l'information et l'informatique, treemap est une méthode pour afficher des données hiérarchiques à l'aide des rectangles imbriqués [...]
Treemaps affichage hiérarchique (arbre structuré) des données sous la forme d'un ensemble de rectangles imbriqués Chaque rectangle de l'arbre est représenté par un rectangle, lequel est ensuite pavé avec des rectangles plus petits représentant des sous-branches Un rectangle de nœud feuille a une aire proportionnelle à une dimension spécifiée "
Un outil notable qui utilise cette technique est WinDirStat. Leur site Web fait également référence à ce type de visualisation en tant que treemap. Étant donné ce terme, vous devriez être en mesure de trouver facilement une bibliothèque JavaScript qui peut les produire en exécutant simplement a web search. (Je ne peux pas recommander l'un des suivants, puisque je ne les ai pas utilisés, mais la recherche Google liée trouve jsTreemap, Plotly.js, Google Charts, et quelques autres, sur la toute première page de résultats.)
Si vous êtes curieux de savoir l'algorithme (s) derrière ces schémas, ces documents pourraient intéresser:
3
C'est ce qu'on appelle un treemap, et ZingChart est une bibliothèque de cartographie JavaScript qui l'a. C'est un moyen utile de tracer des données hiérarchiques. Il permet également l'interaction de l'utilisateur puisque l'utilisateur peut en outre explorer le treemap. Découvrez la démo ci-dessous.
var myConfig = {
"graphset":[
{
"type":"treemap",
"plotarea":{
"margin":"0 0 30 0"
},
"tooltip":{
},
"options":{
},
"series":[
{
"text":"North America",
"children":[
{
"text":"United States",
"children":[
{
"text":"Texas",
"value":21
},
{
"text":"California",
"value":53
},
{
"text":"Ohio",
"value":12
},
{
"text":"New York",
"value":46
},
{
"text":"Michigan",
"value":39
},
{
"text":"Alabama",
"value":25
}
]
},
{
"text":"Canada",
"value":113
},
{
"text":"Mexico",
"value":78
}
]
},
{
"text":"Europe",
"children":[
{
"text":"France",
"value":42
},
{
"text":"Spain",
"value":28
},
{
"text":"Switzerland",
"value":13
},
{
"text":"Germany",
"value":56
},
{
"text":"Cyprus",
"value":7
}
]
},
{
"text":"Africa",
"children":[
{
"text":"Egypt",
"value":22
},
{
"text":"Congo",
"value":38
},
{
"text":"Lesotho",
"value":9
}
]
},
{
"text":"Asia",
"children":[
{
"text":"India",
"value":92
},
{
"text":"China",
"value":68
},
{
"text":"Mongolia",
"value":25
}
]
},
{
"text":"South America",
"children":[
{
"text":"Brazil",
"value":42
},
{
"text":"Argentina",
"value":28
},
{
"text":"Peru",
"value":15
},
{
"text":"Uruguay",
"value":33
}
]
},
{
"text":"Australia (continent)",
"children":[
{
"text":"Australia (country)",
"value":121
},
{
"text":"New Zealand",
"value":24
}
]
}
]
}
]
};
zingchart.render({
\t id : 'myChart',
\t data : myConfig,
\t height: 400,
\t width: 600
});<head>
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script>zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
\t \t ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script>
\t </head>
\t <body>
\t \t <div id='myChart'></div>
\t </body>Pour plus d'informations sur treemaps, lisez ce blog: https://blog.zingchart.com/2015/03/10/treemaps-charting/
Disclaimer: Je suis sur l'équipe ZingChart. Dites moi si vous avez d'autres questions. Merci!