data = FileAttachment("radarData.json").json()
radarData = data.map((d,i)=> {
return {
nome: i,
dati: d
}
})
{
const data = radarData.map(d => ({
type: 'scatterpolar',
r: d.dati.map(s => s.value).concat(d.dati.map(s => s.value)[0]), // .concat(...) serve per copiare il primo valore della serie in fondo all'array. Serve per chiudere la line
theta: d.dati.map(s => s.axis).concat(d.dati.map(s => s.axis)[0]),
// fill: 'toself', // crea il riempimento
name: d.nome,
visible: d.nome != 0 ? true : 'legendonly',
opacity: 0.5,
line: {
width: 2,
shape: 'spline' // questo crea uno smooth delle linee
// color: 'red' // qui potete passare una funzione per assegnare colori personalizzati
},
marker: {
size: 8
},
// un template html per formattare il box visibile al passggio del mouse
hovertemplate: '<b>%{theta}</b>' + '<br>%{r:.2f}<br>' + "<extra></extra>"
}));
const layout = {
width: width,
height: (width / 3) * 2,
polar: {
angularaxis: {
linewidth: 1,
color: 'gray',
showline: false
},
radialaxis: {
gridcolor: 'white',
gridwidth: 2,
visible: true,
range: [0, 0.3], // il range dell'asse [min,max]
color: 'gray',
showline: false
},
bgcolor: 'rgb(245,245,245)' // colore di sfondo
}
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout);
return div;
}
md`## APPENDIX`
d3 = require("d3@5", "d3-sankey@0.12")
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
