viewof dataSelect1 = select({
title: "cohort - assessment",
options: Object.keys(team),
value: "iphone"
})
viewof dataSelect2 = select({
title: "cohort - assessment",
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 = [
[//cohort 1 pre
{axis:"個人成長",value:2},
{axis:"職業資源與創業意向",value:3},
{axis:"希望",value:3.3},
{axis:"整體幸福感",value:2.3},
{axis:"融入度",value:5},
],[//cohort 1 post
{axis:"個人成長",value:5},
{axis:"職業資源與創業意向",value:2},
{axis:"希望",value:4.4},
{axis:"整體幸福感",value:3.4},
{axis:"融入度",value:5},
],[//cohort 2 pre
{axis:"個人成長",value:3.2},
{axis:"職業資源與創業意向",value:3.3},
{axis:"希望",value:2.44},
{axis:"整體幸福感",value:3.4},
{axis:"融入度",value:3},
],[//cohort 2 post
{axis:"個人成長",value:5},
{axis:"職業資源與創業意向",value:2},
{axis:"希望",value:4.4},
{axis:"整體幸福感",value:3.4},
{axis:"融入度",value:3},
],[//cohort 3 pre
{axis:"個人成長",value:3},
{axis:"職業資源與創業意向",value:2},
{axis:"希望",value:3.2},
{axis:"整體幸福感",value:3},
{axis:"融入度",value:2.3},
],[//cohort 3 post
{axis:"個人成長",value:5},
{axis:"職業資源與創業意向",value:3},
{axis:"希望",value:2},
{axis:"整體幸福感",value:4},
{axis:"融入度",value:3},
],
];
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 = ({"cohort 1 pre":0, "cohort 1 post":1, "cohort 2 pre":2, "cohort 2 post":3, "cohort 3 pre":4, "cohort 3 post":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.
