Built with blockbuilder.org
forked from vickygisel's block: Donut Chart
forked from anonymous's block: Donut Chart
xxxxxxxxxx
<html>
<head>
<meta charset="utf-8" />
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" rel="stylesheet" data-semver="3.0.1" data-require="normalize@*" />
</head>
<style>
rect {
stroke-width: 2;
}
#chart {
height: 360px;
margin: 0 auto;
position: relative;
width: 360px;
}
</style>:
<body>
<div id="chart"></div>
<script data-require="d3@*" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
<script>
(function(d3) {
'use strict';
const dataset = [
{ id: 'Lorem', value: 5472 },
{ id: 'Ipsum', value: 7321 },
{ id: 'Dolor', value: 840 },
{ id: 'Sin amet', value: 4579 },
{ id: 'Mergitur', value: 74 },
{ id: 'Conceptus', value: 85 },
];
const width = 360;
const height = 360;
const radius = Math.min(width, height) / 2;
//const color = d3.scaleOrdinal(d3.schemeCategory20c);
const color = d3.scaleOrdinal(['#254251', '#E0AB26', '#F37F2F', '#3292A6', '#6c3c5e', '#80b1e2', '#Dacfc1']);
const svg = d3
.select('#chart')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
const donutWidth = 40;
const arc = d3.arc().innerRadius(radius - donutWidth).outerRadius(radius);
const pie = d3
.pie()
.value(function(d) {
return d.value;
})
.sort(null);
const path = svg
.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color(d.data.id);
});
})(window.d3);
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js