JSFiddle - React, Tailwind, and code Playground

by Claudio Jesiaj

HTML

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.0/d3.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="pie_chart_wrapper" width="30vw"></div>
<svg>
<defs>
        <symbol id="md_file" data-name="md_file" viewBox="0 0 20.47 27.89">
            <polyline class="cls-3" points="15.33 0.5 15.33 5.14 19.97 5.14" />
            <path class="cls-3" d="M20,26.47a0.93,0.93,0,0,1-.92.92H1.41A0.92,0.92,0,0,1,.5,26.47v-25A0.93,0.93,0,0,1,1.41.5H15.33a0.67,0.67,0,0,1,.53.27L19.7,4.56a0.77,0.77,0,0,1,.27.58V26.47Z" />
            <line class="cls-3" x1="16.05" y1="13.46" x2="4.41" y2="13.46" />
            <line class="cls-3" x1="16.05" y1="17.18" x2="4.41" y2="17.18" />
            <line class="cls-3" x1="16.05" y1="20.89" x2="4.41" y2="20.89" />
            <line class="cls-3" x1="10.88" y1="9.74" x2="4.41" y2="9.74" />
        </symbol>
</defs>
<g id="_4_worlds_icons" data-name="4 ‘worlds’ icons">
        <use width="20.47" height="27.89" transform="translate(8.04 2.11)" xlink:href="#md_file" />
    </g>
</svg>

CSS

#md_file {fill:red;}

JavaScript

var totalAlerts = 84;

var dataset = [
  { label: 'Files', count: 4 },
  { label: 'Hosts', count: 5 },
  { label: 'User', count: 6 },
  { label: 'Network', count: 7 }
];

var canvasWidth = 420;
var canvasHeight = 470;

var chartWidth = 320;
var chartHeight = 320;
var chartsRadius = Math.min(chartWidth, chartHeight) / 2;

var donutWidth = 70;
var legendRectSize = 18;
var legendSpacing = 4;

//var color = d3.scale.category20b();
//console.log(color.domain())
var color = d3.scale.ordinal()
.range(["rgba(54, 145, 167, 1)", "rgba(4, 119, 145, 1)", "rgba(104, 172, 189, 1)", "rgba(154, 200, 210, 1)"]);


var svg = d3.select('#pie_chart_wrapper') 
.append('svg')
.attr("id", "pie_chart")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 " + canvasWidth + " " + canvasHeight)
.append('g')
.attr('transform', 'translate(' + (canvasWidth / 2) +
      ',' + (chartHeight / 2) + ')');


//build pie
var arc = d3.svg.arc()
.innerRadius(chartsRadius - donutWidth)
.outerRadius(chartsRadius);

var pie = d3.layout.pie()
.value(function (d) { return d.count; })
.sort(null);

svg.append("g").attr("transform","translate(0,0)").attr("class","mySymbol")
		   .append("use").attr("xlink:href","#md_file")

var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function (d, i) {
  return color(d.data.label);
});