javascript polar scatter plot using d3.js

Question

I\'m trying to do a simple polar scatter plot like this one : http://helpcentral.componentone.com/NetHelp/SpreadNet6/WF/artwork/plottypes-polar-point2.png

I found th

Answer 1

If you are using the d3.svg.line.radial() to generate you polar plot, one easy solution would be to parse the generated path to get point coordinates, then add a circle at those coordinates:

var line = d3.svg.line.radial()
  .radius(function(d) {
    return r(d[1]);
  })
  .angle(function(d) {
    return -d[0] + Math.PI / 2;
  });

svg.selectAll("point")
  .data(data)
  .enter()
  .append("circle")
  .attr("class", "point")
  .attr("transform", function(d) {
    // use the line function and parse out the coordinates
    var coors = line([d]).slice(1).slice(0, -1);
    return "translate(" + coors + ")"
  })
  .attr("r", 8);

Here's a full working example:

---

Alternatively, you could do it with a little trigonometry:

.attr("transform", function(d) {
    // get angle and radius
    var an = d[0],
      ra = r(d[1]),
      x = ra * Math.cos(an * Math.PI / 180),
      y = ra * Math.sin(an * Math.PI / 180);
    return "translate(" + [x, y] + ")";
})

Running code: