JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class = "graphs" id="circular"></div>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
</body>
JavaScript
function circular_chart(data){
var width = 500;
var height = 500;
var length = 0
function circle(selection){
selection.each(function(){
svg = d3.select(this)
.append('svg')
.attr('width',width)
.attr('height',height)
.append('g')
.attr('transform','translate(' + width/2+ ','+height/2 + ')')
.append('g');
circle = svg.append('circle')
.attr('cx',0)
.attr('cy',0)
.attr('r',200)
.style('fill','none')
.style('stroke','black');
var chairOriginX = 0 + ((250) * Math.sin(0));
var chairOriginY = 0 - ((250) * Math.cos(0));
length = data.length;
function position_x(d,i){
radius = 200
angle = (i / (data.length/2)) * Math.PI;
x = (radius * Math.sin(angle));
y = (-radius * Math.cos(angle));
return x
}
function position_y(d,i){
radius = 200
angle = (i / (data.length/2)) * Math.PI;
x = (radius * Math.sin(angle));
y = (-radius * Math.cos(angle));
// nodes.push({'id': i, 'x': x, 'y': y});
return y
}
images = svg.selectAll('image')
.data(data)
.enter()
.append('svg:image')
.attr('xlink:href',function(d){return...