Cerco una libreria di R che permetta l’integrazione con d3js, che quindi produca grafici minimamente interattivi, già stilati con buon gusto e possibilmente che non mi richiedano troppi sforzi nel comprendere il codice. Trovo rChart e lo installo. Dagli esempi mi piace questo, si adatta a un mio dataset, quindi seguo il tutorial (in realtà due brevi comandi in R)
n1 <- nPlot(Freq ~ Hair, group = "Eye", data = hair_eye_male, type = "multiBarChart")
n1$print("chart3")
E questo è il codice che restituisce R direttamente nella console
<div id = 'chart3' class = 'rChart nvd3'></div>
<script type='text/javascript'>
$(document).ready(function(){
drawchart3()
});
function drawchart3(){
var opts = {
"dom": "chart3",
"width": 800,
"height": 400,
"x": "Hair",
"y": "Freq",
"group": "Eye",
"type": "multiBarChart",
"id": "chart3"
},
data = [
{
"Hair": "Black",
"Eye": "Brown",
"Sex": "Male",
"Freq": 32
},
{
"Hair": "Brown",
"Eye": "Brown",
"Sex": "Male",
"Freq": 53
},
{
"Hair": "Red",
"Eye": "Brown",
"Sex": "Male",
"Freq": 10
},
{
"Hair": "Blond",
"Eye": "Brown",
"Sex": "Male",
"Freq": 3
},
{
"Hair": "Black",
"Eye": "Blue",
"Sex": "Male",
"Freq": 11
},
{
"Hair": "Brown",
"Eye": "Blue",
"Sex": "Male",
"Freq": 50
},
{
"Hair": "Red",
"Eye": "Blue",
"Sex": "Male",
"Freq": 10
},
{
"Hair": "Blond",
"Eye": "Blue",
"Sex": "Male",
"Freq": 30
},
{
"Hair": "Black",
"Eye": "Hazel",
"Sex": "Male",
"Freq": 10
},
{
"Hair": "Brown",
"Eye": "Hazel",
"Sex": "Male",
"Freq": 25
},
{
"Hair": "Red",
"Eye": "Hazel",
"Sex": "Male",
"Freq": 7
},
{
"Hair": "Blond",
"Eye": "Hazel",
"Sex": "Male",
"Freq": 5
},
{
"Hair": "Black",
"Eye": "Green",
"Sex": "Male",
"Freq": 3
},
{
"Hair": "Brown",
"Eye": "Green",
"Sex": "Male",
"Freq": 15
},
{
"Hair": "Red",
"Eye": "Green",
"Sex": "Male",
"Freq": 7
},
{
"Hair": "Blond",
"Eye": "Green",
"Sex": "Male",
"Freq": 8
}
]
if(!(opts.type==="pieChart" || opts.type==="sparklinePlus")) {
var data = d3.nest()
.key(function(d){
//return opts.group === undefined ? 'main' : d[opts.group]
//instead of main would think a better default is opts.x
return opts.group === undefined ? opts.y : d[opts.group];
})
.entries(data);
}
if (opts.disabled != undefined){
data.map(function(d, i){
d.disabled = opts.disabled[i]
})
}
nv.addGraph(function() {
var chart = nv.models[opts.type]()
.x(function(d) { return d[opts.x] })
.y(function(d) { return d[opts.y] })
.width(opts.width)
.height(opts.height)
d3.select("#" + opts.id)
.append('svg')
.datum(data)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
};
</script>
Lo prendo e lo incollo in un file html. Lo apro e non succede nulla. Manca ancora un bel pezzetto. Nel head va messo questo
<link rel="stylesheet" type="text/css" href="nv.d3.min.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://raw.githubusercontent.com/mbostock/d3/master/d3.min.js" charset="utf-8"></script>
<script src="https://raw.githubusercontent.com/novus/nvd3/master/nv.d3.min.js"></script>
Il css l’ho scaricato e modificato per farci stare in altezza il grafico. Il jquery me lo dà Riccardo mentre il js di d3 va aggiungo perché da questo dipende il js di nv. Entrambi possono essere presi direttamente dai repository su Github o messi in locale. Salvo l’html e apro: ora va. A questo punto posso modificare i dati direttamente nel codice o provare a generare con R altri grafici con altri dati esterni.