viewof dataSelect1 = select({
title: "Team 1",
options: Object.keys(team),
value: "iphone"
})
viewof dataSelect2 = select({
title: "Team 2",
options: Object.keys(team),
value: "Atalanta"
})
radarLine = d3.lineRadial()
.curve(d3[curveSelect])
.radius((d, i) => rScale[i](d))
.angle((d, i) => i * angleSlice)
colors = ["#2c3e50","#85c1e9","#717d7e", "#1b4f72", "#922b21","#ca6f1e"]
rScale = maxValues.map(el => d3.scaleLinear().domain([0, el]).range([0, radius]))
maxValues = {
let new_vals = [];
for(var i=0; i<data[0].length; i++){
new_vals.push(d3.max(data.map(d => d[i].value)));
}
return new_vals;
}
rScale[0]
datagroup = [
[//Juventus
{axis:"Shots",value:443},
{axis:"Shots on target",value:227},
{axis:"Corners",value:244},
{axis:"Goals",value:70},
{axis:"Keeper Score",value:0.78},
],[//Napoli
{axis:"Shots",value:550},
{axis:"Shots on target",value:290},
{axis:"Corners",value:255},
{axis:"Goals",value:74},
{axis:"Keeper Score",value:0.78},
],[//Atalanta
{axis:"Shots",value:475},
{axis:"Shots on target",value:254},
{axis:"Corners",value:242},
{axis:"Goals",value:77},
{axis:"Keeper Score",value:0.72},
],[//Inter
{axis:"Shots",value:459},
{axis:"Shots on target",value:238},
{axis:"Corners",value:302},
{axis:"Goals",value:57},
{axis:"Keeper Score",value:0.79},
],[//Milan
{axis:"Shots",value:423},
{axis:"Shots on target",value:231},
{axis:"Corners",value:230},
{axis:"Goals",value:55},
{axis:"Keeper Score",value:0.79},
],[//Roma
{axis:"Shots",value:459},
{axis:"Shots on target",value:257},
{axis:"Corners",value:227},
{axis:"Goals",value:66},
{axis:"Keeper Score",value:0.75},
],
];
data = {
let index1 = team[dataSelect1];
let index2 = team[dataSelect2];
return [datagroup[index1], datagroup[index2]];
}
data_teams = {
let index1 = team[dataSelect1];
let index2 = team[dataSelect2];
return [dataSelect1, dataSelect2];
}
color = {
let index1 = team[dataSelect1];
let index2 = team[dataSelect2];
return d3.scaleOrdinal().range([colors[index1], colors[index2]]);
}
team = ({"Juventus":0, "Napoli":1, "Atalanta":2, "Inter":3, "Milan":4, "Roma":5})
md`# Credits
- Thanks to [Ben Welsh](https://observablehq.com/@palewire) for the great insipration.
- Thanks to the amazing [Nadieh Bremer](https://observablehq.com/@nbremer) for creating the d3 radar chart.
`
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.
