block by eesur 164f6fd5d563178e99701378a31ac09c

d3 | reusable single value donut chart

Full Screen

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

script.js

index.html