Par exemple, si l’on souhaite visualiser les voies d’accès à la science ouverte ou plus exactement le statut OA (open access) des publications d’un corpus par année sous la forme d’un graphique en courbe associé à un diagramme à barres indiquant le nombre de publications par année, il faut tout d’abord créer des ressources principales pour les années ainsi que pour les voies d’accès des publications. Ensuite, lors de la création du graphique, il va falloir combiner ces deux ressources afin d’obtenir une sortie JSON sous la forme « source, target, weight », de manière à ce que ces champs contiennent respectivement les années, les statuts OA ainsi que le nombre de publications associées. Ceci peut se faire en utilisant la routine « pairing-with » appliquée sur les années et les voies d’accès.
Puis, dans l’onglet “AFFICHAGE” ou “DISPLAY”, en sélectionnant le format “Graphique – Syntaxe Vega-Lite”, on peut accéder à une “console” capable d’interpréter la “grammaire” Vega-Lite. Voici ci-dessous pour exemple le code permettant de produire le graphique voulu et présenté juste en dessous.
Fichier source : bar chart lineplot
{
"background": "transparent",
"padding": 40,
"width": "container",
"height": "container",
"autosize": {
"type": "fit",
"contains": "padding"
},
"transform": [
{
"window": [
{
"op": "sum",
"field": "weight",
"as": "NbDocsParAnnnées"
}
],
"groupby": [
"source"
],
"frame": [
null,
null
]
}
],
"layer": [
{
"mark": {
"type": "bar"
},
"encoding": {
"x": {
"field": "source",
"type": "nominal",
"axis": {
"labelAngle": 0,
"labelOverlap": true,
"tickMinStep": 1
},
"title": "",
"sort": null
},
"y": {
"field": "weight",
"type": "quantitative",
"axis": {
"labelAngle": 0,
"tickMinStep": 1
},
"scale": {
"type": "linear"
},
"title": "",
"sort": null
},
"color": {
"value": "#1f77b4"
},
"tooltip": [
{
"field": "source",
"type": "nominal",
"title": "Années"
},
{
"field": "NbDocsParAnnnées",
"type": "quantitative",
"title": "Nombre de publications"
}
],
"size": {
"value": 20
}
}
},
{
"mark": {
"type": "line",
"point": true
},
"encoding": {
"x": {
"field": "source",
"type": "nominal",
"axis": {
"labelAngle": 0,
"labelOverlap": true
},
"title": "Années",
"sort": "x"
},
"y": {
"field": "weight",
"type": "quantitative",
"axis": {
"labelAngle": 0
},
"scale": {
"type": "linear"
},
"title": "Nombre de documents"
},
"color": {
"field": "target",
"title": "Voie d'accès",
"scale": {
"domain": [
"Diamond",
"Gold",
"Green",
"Bronze",
"Hybrid",
"Closed"
],
"range": [
"#00bfff",
"#f9bc01",
"#228B22",
"#c97522",
"#ffff67",
"#7f7f7f"
]
},
"type": "nominal"
},
"data": {
"name": "values"
},
"tooltip": [
{
"field": "NbDocsParAnnnées",
"title": "N Docs de l'année",
"type": "quantitative"
},
{
"field": "target",
"type": "nominal",
"title": "Voie d'accès"
},
{
"field": "weight",
"type": "quantitative",
"title": "Nb Docs Année / Statut OA"
}
],
"mark": {
"type": "text",
"color": "darkblue",
"fontSize": 10,
"fontWeight": "bold",
"baseline": "bottom",
"align": "center",
"sort": "target",
"dx": 0,
"dy": -5
},
"encoding": {
"x": {
"field": "source",
"type": "nominal",
"title": "",
"sort": "x"
},
"y": {
"line": {
"field": "target",
"type": "quantitative"
}
},
"width": 600,
"height": 300
}
}
},
{
"mark": {
"type": "text",
"color": "black",
"fontSize": 10,
"fontWeight": "bold",
"baseline": "bottom",
"align": "center",
"dx": 0
},
"encoding": {
"x": {
"field": "source",
"type": "nominal",
"title": "",
"sort": null
},
"y": {
"field": "NbDocsParAnnnées",
"type": "quantitative",
"axis": {
"labelAngle": 0,
"tickMinStep": 1
},
"scale": {
"type": "linear"
},
"sort": null
},
"text": {
"field": "NbDocsParAnnnées",
"type": "quantitative"
}
}
}
]
}
À noter qu’il est possible de modifier la largeur des barres, ainsi que la taille des points en modifiant la propriété « size »: {« value »: xx} dans les parties « encoding » associées à chaque « objet » et qui sont imbriquées dans la propriété « layer ». La taille des labels peut quant à elle être modifiée via la propriété « fontsize » qui est incluse dans la propriété « mark » de type « text ».
En modifiant {« mark »: {« type »: « line », « point »: true} par « mark »: {« type »: « circle »}, on peut s’affranchir des lignes joignant les points pour obtenir un graphique combiné de type « bar chart + scatterplot » comme présenté ci-dessous.
Fichier source : bar chart scatterplot
