JSFiddle - React, Tailwind, and code Playground

by Ryan

CSS

line {
    stroke: black;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}

JavaScript

var dimensions = [
    { key: "D1", label: "Dim 1" },
    { key: "D2", label: "Dim 2" },
    { key: "D3", label: "Dim 3" },
    { key: "D4", label: "Dim 4" },
    { key: "D5", label: "Dim 5" }
];
var data = [
    { key: "One",   data: [ 0, 1, 2, 3, 4 ] },
    { key: "Two",   data: [ 2, 2, 2, 2, 2 ] },
    { key: "Three", data: [ 4, 3, 2, 1, 0 ] },
    { key: "Four",  data: [ 1, 2, 3, 2, 1 ] }
];

var size = 400;
var innerMargin = 30;
var innerSize = size - innerMargin*2;

var angleScale = d3.scale.linear().domain([0, dimensions.length]).range([0, 2*Math.PI]);
var sizeScale = d3.scale.linear().domain([0, 4]).range([0, innerSize/2]);

var x = function(d, i) { 
    console.log("theta: " + angleScale(i) + " x: " + Math.sin(angleScale(i)));
    return size/2 + Math.sin(angleScale(i)) * innerSize/2;
};
var y = function(d, i) { 
    console.log("theta: " + angleScale(i) + " y: " + Math.cos(angleScale(i)));
    return size/2 - Math.cos(angleScale(i)) * innerSize/2; 
};

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

// Radial axes
var radial = svg.selectAll(".radial").data(dimensions, function(d) { return d.key; });
var radialEnter = radial.enter().append("g").attr("class", "radial");
var radialExit = d3.transition(radial.exit()).style("opacity", 0.01).remove();
var radialUpdate = d3.transition(radial.order()).style("opacity", 1);

radialEnter.append("line");

var lineEnter = radialEnter.select("line");
var lineUpdate = radialUpdate.select("line");

lineEnter
    .attr("x1", function(d, i) { return size/2; })
    .attr("x2", function(d, i) { return x(d, i); })
    .attr("y1", function(d, i) { return size/2; })
    .attr("y2", function(d, i) { return y(d, i); });

lineUpdate
    .attr("x1", function(d, i) { return size/2; })
    .attr("x2", function(d, i) { return x(d, i); })
    .attr("y1", function(d, i) { return size/2; })
    .attr("y2", function(d, i) { return y(d, i); });