Spider Chart

by Ryan

HTML

<button id="button">Press Me!</button>
<div id="chart"></div>

CSS

.chart-lines {
    stroke: grey;
    stroke-width: 1px;
}

JavaScript

var numSeries = 4;
var dimensions = 8;
var dimensionRange = [0,5];
var size = 500;

var margin = {top: 10, right: 10, bottom: 10, left: 10};

// Data Generation
var data = {
    series: []
};
var createData = function(seriesCount, dimensionCount, dimensionRangeCount){
    var nData = [];
    for(var i=0; i<seriesCount; i++){
        var dArray = [];
        for(var j=0; j<dimensionCount; j++){
            dArray.push(Math.floor(Math.random()*dimensionRangeCount + 1));
        }
        nData.push({ key: "" + i, elements: dArray});
    }
    return nData;
};

// Area sorting
function isMax(index, valIndex, ary) {
    var max = -Infinity;
    for (var i = 0; i < ary.length; i++) {
        if (i !== valIndex && ary[i].elements[index] > max) {
            max = ary[i].elements[index];
        }
    }
    return (ary[valIndex].elements[index] > max);
}

function sort(ary) {
    if (ary.length == 0) {
        return ary;
    } else if(ary.length == 1){
        return ary[0];
    } else {
        var max = [];
        var min = [];

        ary.forEach(function(series, sIndex){
            var hasMax = false;
            series.elements.every(function(element, eIndex){
                 if(isMax(eIndex, sIndex, ary)) {
                    max.push(series);
                    hasMax = true;
                    return false;
                }
                return true;
            });
            
            if (!hasMax) {
                min.push(series);
            }
        });

        return max.concat(sort(min));
    }
}

// Chart setup
var scale = d3.scale.linear().domain([-1, 1]).range([0, size]);
var colorScale = d3.scale.category10();
var angle = (2*Math.PI)/dimensions;
var line = d3.svg.line()
    .x(function(d) { return scale(d.x); })
    .y(function(d) { return scale(-1*d.y); })
    .interpolate("linear");


var g = d3.select("#chart").append("svg")
    .attr("width", size)
    .attr("height", size);

//Draw the chart lines
for (var i = 0; i < dimensions;...