D3 V4 - Fitting a line to Points on a Polar Chart

[Jim Gwilliam]

Hi All,

I have a problem I haven't been able to figure out in the new v4 version of d3.

I'm ultimately wanting to make a chart that looks somewhat like this:

Essentially, I have five categories equally spaced around the polar chart, and each category has a numerical linear scale with a point value for that category.  Then I want to fit a closed cardinal curve or a catmull curve (see this example) that runs through those five points with a filled colored interior.  (Basically adding the yellow blob on the image above to the chart I've created below.

I've made good progress on creating my chart (see below), but cannot figure out how to fit a line around the five points on my chart.

Here is the code I used to put the points on the chart:

var ranks = [0.6, 0.7, 0.5, 0.7, 0.4];

var data_angles = d3.range(234, 523, 72)

// POINTS FOR CATEGORIES

    var gp = svg.append("g")

        .attr("class", "a axis points")

      .selectAll("g")

        .data(ranks)

      .enter().append("g")

        .attr("transform", function(d,i) { return "rotate(" + -data_angles[i] + ")"; });

      

        gp.append("circle")

            .attr("cx", function(d,i) { return r(d) } )

            .attr("r", gp_size)

            .attr("fill", function(d,i) { return d3.color(col_l[i]) } )

            .attr("stroke", function(d,i) { return d3.color(col_d[i]) } )

            .attr("stroke-width", gp_s_w);

Any idea how I would go about adding a continuous line that runs through those five points?  Since each point has it's own transform, I'm not really sure how to pass the data to a d3.line() function represented in the same coordinate space.  

Any thoughts or help?  I'm kind of stuck and can't find examples of fitting a line through points on a polar chart.

[Seemant Kulleen]

Happy Sunday Jim,

This makes me think of a convex hull, whose purpose is to fit a polygon around a set of points: https://github.com/d3/d3-polygon/blob/master/README.md#polygonHull

Thinking ahead, you might have to consider  converting the points' coordinates into cartesian (as I don't think Hull takes polar coordinates).

Hope that helps.

Cheers,

Seemant

--

Oakland Finish Up Weekend
Be Amazed.  Be Amazing.
Get Mentored | Get Inspired | Finish Up

http://oaklandfinishup.com

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Kai Chang]

Here's a tutorial on radar chart design by Nadieh Bremer you'll find helpful:

http://www.visualcinnamon.com/2015/10/different-look-d3-radar-chart.html

The v3 documentation for radial lines is here: https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md

And here's the v4 docs: https://github.com/d3/d3-shape/blob/master/README.md#radialLine

[Jim Gwilliam]

Thanks.

I found the radial line feature and am in good shape now.

Figured it out.

Thanks,

To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.

To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.