JSFiddle - React, Tailwind, and code Playground

by eanders

JavaScript

//data
var data = [
    {"label": "January", "value": 150, "time": 1},
    {"label": "February", "value": 65, "time": 2},
    {"label": "March", "value": 50, "time": 3},
    {"label": "April", "value": 75, "time": 4},
    {"label": "May", "value": 150, "time": 5},
    {"label": "June", "value": 65, "time": 6}
];

var data2 = [
    {label: "Rose.chart1", value: [150,65,50,75,150,65]}
    ]

//container
var svg = d3.select("body")
.append("svg:svg")
.attr("width", 1000)
.attr("height", 1000);

var pi = Math.PI;

var arc = d3.svg.arc()
        .innerRadius(0)
        .outerRadius(function(d,i) {return (0 + d.value); })
        .startAngle(function(d,i) { return ((d.time - 1) * 60 * pi / 180); })
        .endAngle(function(d) { return (d.time * 60 * pi / 180 ); });

var chartContainer = svg.append("g")
        .attr('class', 'some_class')
        .attr("transform", "translate(450, 300)");

chartContainer.selectAll("path")
		.data(data)
		.enter()
        .append("path")
	    .attr("d", arc)
	    .attr("class", "arc");