Prototype of using a reusable single value donut chart
to create a single chart:
const donut = d3.eesur.singleValueDonut()
.width(200)
.height(200)
d3.select('#vis')
.datum({
subject: 'Showing x',
value : 75
})
.call(donut)
the example use a loop to render multiple charts using the reusable component. The component takes the following api options:
singleValueDonut()
.height(200) // number
.width(200) // number or null, then will default to dom container
.innnerRadius(45) // number
.outerRadius(90) // number
.colors(['#f43530', '#eee']) // array of two hex values
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<!-- https://www.basscss.com/ -->
<link href="https://unpkg.com/basscss@8.0.2/css/basscss.min.css" rel="stylesheet">
<style>
body { font-family: -apple-system, BlinkMacSystemFont, Consolas, monaco, monospace;}
.max-width-900 {
max-width: 900px;
}
</style>
</head>
<body>
<header class="max-width-900 mx-auto mb4">
<p class="max-width-2">Prototype for showing an alternative to standard pie/donut, by using only one value per donut for ease of reading</p>
</header>
<div class="flex flex-wrap max-width-900 mx-auto js-donuts"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- d3 code -->
<script src=".script-compiled.js" charset="utf-8"></script>
<!-- render code -->
<script>
(function () {
const d3 = window.d3
const data = [
{
subject: 'Subject A',
value: 50
},
{
subject: 'Subject B',
value: 20
},
{
subject: 'Subject C',
value: 18
},
{
subject: 'Subject D',
value: 12
}
]
data.forEach(function (d, i) {
let charts = []
// create the dom
d3.select('.js-donuts').append('div')
.attr('class', 'col-3 ref-' + i)
// render the charts
charts[i] = d3.eesur.singleValueDonut()
.height(200)
d3.select('.ref-' + i)
.datum(d)
.call(charts[i])
})
}())
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js