Responsive donut 1

by Rob Carroll

HTML

<script src="https://rawgit.com/sw4/cd3/master/cd3.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/sw4/cd3/master/cd3.min.css">
<div id='donut'></div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    font-family: arial;
    font-size: 10px;
    background: #ffffff;
    color: #555555;
}

#donut {
    height:100%;
    width:100%;
    box-sizing:border-box;
}

.category_abolitionist-all {
  fill: #FFFF00;
}

.category_abolitionist-ordinary {
  fill: #515151;
}

.category_abolitionist-practice {
  fill: #808080;
}

.category_retentionist {
  fill: #000000;
}

JavaScript

var data = [{
    "type": "abolitionist-all",
        "value": 98
}, {
    "type": "abolitionist-ordinary",
        "value": 7
}, {
    "type": "abolitionist-practice",
        "value": 35
}, {
    "type": "retentionist",
        "value": 58
}];

var donut = cd3({
    element: '#donut',
    type: "pie",
    data: data,
    series: [{
        values: "value",
        categories: "type",
        donut: 50
    }]
});

d3.select(window).on('resize', function () {
    donut.resize();
});