{
//////////////////////////////////////////////////////////////
//////////////////////// Set-Up //////////////////////////////
//////////////////////////////////////////////////////////////
var margin = { top: 100, right: 100, bottom: 100, left: 100 },
width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,
height = width;
//////////////////////////////////////////////////////////////
////////////////////////// Data //////////////////////////////
//////////////////////////////////////////////////////////////
var labels = ["Haves","Needs"]
var data = [
[
//haves
{ axis: "Speaking", value: 0.32 },
{ axis: "Listening", value: 0.28 },
{ axis: "Writing", value: 0.29 },
{ axis: "Reading", value: 0.17 },
{ axis: "Vocabulary", value: 0.22 },
{ axis: "Grammar", value: 0.15 },
{ axis: "Structure", value: 0.21 },
{ axis: "Fun", value: 0.35 },
{ axis: "IT", value: 0.25 },
{ axis: "technical writing", value: 0.10 }
],
[
//needs
{ axis: "Speaking", value: 0.37 },
{ axis: "Listening", value: 0.16 },
{ axis: "Writing", value: 0.35 },
{ axis: "Reading", value: 0.13 },
{ axis: "Vocabulary", value: 0.32 },
{ axis: "Grammar", value: 0.12 },
{ axis: "technical writing", value: 0.12 },
{ axis: "Structure", value: 0.35 },
{ axis: "Fun", value: 0.35 },
{ axis: "IT", value: 0.38 }
]
];
//////////////////////////////////////////////////////////////
//////////////////// Draw the Chart //////////////////////////
//////////////////////////////////////////////////////////////
var color = d3.scaleOrdinal().range(["#EDC951", "#CC333F"]);
var radarChartOptions = {
w: width,
h: height,
margin: margin,
maxValue: 0.5,
levels: 5,
roundStrokes: true,
color: color,
fontFamily: 'sans-serif',
textColor: "#00A0B0",
backgroundColor: "##FFFBF5"
};
//Call function to draw the Radar chart
return RadarChart(data, labels,radarChartOptions);
}
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.
