app-mpt/app/www/radarchart.js

/*https://github.com/IngoKl/D3-v4-Radar-Chart-Redesign/blob/master/index.html*/
/* MIT License */
Shiny.addCustomMessageHandler("radarchart_values", function(message) {

    var dataset = message[0].value;

    var margin = {top: 50, right: 90, bottom: 30, left: 90},
	width = (window.innerWidth * 0.3) - margin.left - margin.right,
	height = (window.innerHeight * 0.3) - margin.top - margin.bottom;

    //////////////////// Draw the Chart //////////////////////////

    var radarChartOptions = {
	w: width,
	h: height,
	margin: margin,
	maxValue: 0.5,
	labelFactor: 1.25, 	//How much farther than the radius of the outer circle should the labels be placed
	opacityArea: 0.20, 	//The opacity of the area of the blob
	strokeWidth: 2, 		//The width of the stroke around each blob
    };
    //Call function to draw the Radar chart
    RadarChart("#radarchart_area", dataset, radarChartOptions);

    function RadarChart(plot_area, data, cfg) {

	//If the supplied maxValue is smaller than the actual one, replace by the max in the data
	var maxValue = Math.max(cfg.maxValue, d3.max(data, function(d) {
	    return d.value;
	}));

	var allAxis = (data.map(function(d) { //Names of each axis
	    return d.axis;
	}));

	var total = allAxis.length,		        //The number of different axes
	    radius = Math.min(cfg.w/2, cfg.h/2), 	//Radius of the outermost circle
	    angleSlice = Math.PI * 2 / total;		//The width in radians of each "slice"

	//Scale for the radius
	var rScale = d3.scaleLinear()
	    .range([0, radius])
	    .domain([0, maxValue]);


	//////////// Create the container SVG and g /////////////

	//Initiate the radar chart SVG
	var svg = d3.select(plot_area).append("svg")
	    .attr("width",  cfg.w + cfg.margin.left + cfg.margin.right)
	    .attr("height", cfg.h + cfg.margin.top + cfg.margin.bottom)
	    .attr("class", "radar");
	//Append a g element
	var g = svg.append("g")
	    .attr("transform", "translate(" + (cfg.w/2 + cfg.margin.left) + "," + (cfg.h/2 + cfg.margin.top) + ")");

	/////////////// Draw the Circular grid //////////////////

	//Wrapper for the grid & axes
	var axisGrid = g.append("g").attr("class", "axisWrapper");

	//////////////////// Draw the axes //////////////////////

	//Create the straight lines radiating outward from the center
	var axis = axisGrid.selectAll(".axis")
	    .data(allAxis)
	    .enter()
	    .append("g")
	    .attr("class", "axis");
	//Append the lines
	axis.append("line")
	    .attr("x1", 0)
	    .attr("y1", 0)
	    .attr("x2", function(d, i) {
		return rScale(maxValue*1) * Math.cos(angleSlice*i - Math.PI/2);
	    })
	    .attr("y2", function(d, i) {
		return rScale(maxValue*1) * Math.sin(angleSlice*i - Math.PI/2);
	    })
	    .attr("class", "line")
	    .style("stroke", "#CDCDCD")
	    .style("stroke-width", "2px")
	    .style("stroke-dasharray", "5,5");

	//Append the labels at each axis
	axis.append("text")
	    .attr("class", "legend")
	    .style("font-size", "11px")
	    .attr("text-anchor", "middle")
	    .attr("dy", "0.35em")
	    .attr("x", function(d, i) {
		return rScale(maxValue * cfg.labelFactor) * Math.cos(angleSlice*i - Math.PI/2);
	    })
	    .attr("y", function(d, i) {
		return rScale(maxValue * cfg.labelFactor) * Math.sin(angleSlice*i - Math.PI/2);
	    })
	    .text(function(d){return d;});

	///////////// Draw the radar chart blobs ////////////////

	//The radial line function
	var radarLine = d3.radialLine()
	    .curve(d3.curveLinearClosed)
	    .radius(function(d) {
		return rScale(d.value);
	    })
	    .angle(function(d,i) {return i*angleSlice; });

	//Create a wrapper for the blobs
	var blobWrapper = g.selectAll(".radarWrapper")
	    .data(data)
	    .enter()
	    .append("g")
	    .attr("class", "radarWrapper");

	//Append the backgrounds
	blobWrapper
	    .append("path")
	    .attr("class", "radarArea")
	    .attr("d", radarLine(data))
	    .style("fill", "#EDC951")
	    .style("fill-opacity", cfg.opacityArea);

	//Create the outlines
	blobWrapper.append("path")
	    .attr("class", "radarStroke")
	    .attr("d", radarLine(data))
	    .style("stroke-width", cfg.strokeWidth + "px")
	    .style("stroke", "#EDC951")
	    .style("fill", "none");

    }//RadarChart
});