d3radarplay

config.json

{"description":"d3radarplay","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"traits.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.6053571428571428,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}

inlet.js

data = tributary.traits;

data.forEach(function(d) {
  d.score = +d.score;
})

var svg = d3.select("svg");

var centerx = tributary.sw/2;
var centery = tributary.sh/2;
var halfc = centerx/2;

var angle = d3.scale.linear()
    .domain([0, data.length])
    .range([0, 2 * Math.PI])
    
var radius = d3.scale.linear()
  .domain([0, 5])
  .range([0, halfc])

var rlinegen = d3.svg.line.radial()
    .radius(function(d) { return d[0] })
    .angle(function(d) { return angle(d[1]) })
    
svg.selectAll(".axis").remove()
  
var axes = svg.selectAll(".axis")
    .data(data)
    .enter().append("g")
      .attr({
        "class": "axis",
        "transform": function(d,i) { return "translate(" + centerx + "," + centery + ")" + 
          "rotate(" + angle(i) * 180 / Math.PI +")"}
      })
    .append("text")
      .attr({
        y: halfc + 28,
        dy: "1em",
        transform: "rotate(" + 180 + ")",
        "text-anchor": "middle"
      })
      .text(function(d) { return d.trait })
      
svg.selectAll(".axis")
  .append("path")
  .attr({
    d: function(d,i) {
      return rlinegen([[-halfc*1.1,0],[0,0]])
    },
    "stroke-width": 1,
    "stroke": "#ccc",
    "fill": "none"
  })

var rarea = d3.svg.area.radial()
    .interpolate("linear-closed")
    .angle(function(d,i) { return angle(d[1]) })
    .innerRadius(0)
    .outerRadius(function(d) { return radius(d[0])})


var rarea2 = d3.svg.area.radial()
    .interpolate("linear-closed")
    .angle(function(d,i) { return angle(i) })
    .innerRadius(0)
    .outerRadius(function(d) { return radius(d.score)})

var polyticks = svg.selectAll('.ptick')
    .data(data)
    .enter()
    .append("svg:path")
    .attr({
      "class": ".ptick",
      stroke: "#ccc",
      fill: "none",
      "stroke-width": 1,
      transform: "translate(" + centerx + "," + centery + ")",
      d: function(d,i) {
		input = d3.zip(d3.range(data.length).map(function(x) {return i}),
                       d3.range(data.length));
        return rarea(input);                                                         
      }
    })
    
var skillarea = svg.selectAll('.sarea')
	.data(data)
    .enter().append("svg:path")
    .attr({
      stroke: "#4d90fe",
      fill: "#4d90fe",
      "transform": function(d,i) { return "translate(" + centerx + "," + centery + ")" + 
          "rotate(" + 0 + ")"},
      //transform: "translate(" + centerx + "," + centery + ")",
      d: rarea2(data)
     })
    
    
    
    
    
    
    
    
    
    

traits.csv