title: d3js - Creating Asterplot-like Charts (example included)
body: <p>I'm new to d3js, but am familiar with javascript and the principles of data-visualisation.</p>
  
  <p>I've tried to achieve an effects to visualize 2 dimensions of data using the aster plot diagram, but can't really get this thing to work like expected.</p>
  
  <p>Attached you'll find the diagram I'm trying to recreate and my example code.
  It would be huge if you could tell me how to get it working - or how to optimize it! :)</p>
  
  <p><a href="http://i.stack.imgur.com/kYOTr.png" rel="nofollow">D3JS - Aster Plot Preview</a></p>
  
  <p>This is how I think the data and the code should look like.. kinda.. (Pseudo-Code incoming..)</p>
  
  <p>Data Example:</p>
  
  <pre><code>    var testData = {
        maxPoints: 10,
        color: '#bababa',
        border: {
          width: 1,
          color: '#ffffff'
        },
        items: [
          {
            name: 'Looks',
            color: '#2976dd',
            weight: 0.37,
            points: 8
          },{
            name: 'Charm',
            color: '#87bd24',
            weight: 0.03,
            points: 5
          },{
            name: 'Honesty',
            color: '#406900',
            weight: 0.16,
            points: 7
          },{
            name: 'Humour',
            color: '#ffb200',
            weight: 0.31,
            points: 9
          },{
            name: 'Intelligence',
            color: '#f78200',
            weight: 0.12,
            points: 0
          }
        ]
      };
  </code></pre>
  
  <p>Code Example:</p>
  
  <pre><code>  var archs = [];
    // Loop through each item
    var circleRadius = 400;
    var innerRadius = 100;
  
    var startAngle = 0;
    var endAngle = 0;
    for (var i = 0; i &lt; testData.items.length; i++) {
      // Draw each arch
      var maxPoints = testData.maxPoints;
      var archHeight = (circleRadius - innerRadius) / maxPoints;
      var startRadius = innerRadius;
  
      endAngle += testData.items[i].weight;
  
      for (var j = 0; j &lt; maxPoints; j++) {
        var color = testData.color;
        // draw arch - don't know how to colorize accordingly..
        if (testData.items[i].points &lt; j) {
          // color this arc somehow..
          color = testData.items[i].color;
        }
  
          d3.svg.arc()
          .startAngle(startAngle)
          .endAngle(endAngle)
          .innerRadius(startRadius)
          .outerRadius(startRadius+archHeight);
  
        // Increase startRadius
        startRadius += archHeight;
      }
  
      // Increase startAngle
      startAngle = endAngle;
    }
  </code></pre>
  
  <p>Somehow my code looks way more complicated.. Though it's still pseudo-code..
  I'm still struggling.. If someone could give me a hint or some working code to start from I would be very thankful!</p>
  
  <p>Thanks in advance
  - Chris</p>