<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Testing Donut Chart</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<style type="text/css">
#first {
/* width: 500px;
height: 300px;*/
height: 50%;
width: 50%;
border: 3px solid #73AD21;
position: absolute;
}
#chart {
position: absolute;
height: 100%;
width: 100%;
}
#chart legend {
position: absolute;
margin: 0%;
}
#first legend {
position: absolute;
margin: 0%;
}
.slice path {
stroke: #fff;
stroke-width: 1px;
}
.textTop {
font-family: 'Segoe UI';
font-weight: bold;
font-size: 10pt;
fill: #2c3218;
}
.textBottom {
fill: #444;
font-family: 'Segoe UI';
font-weight: bold;
font-size: 10pt;
}
</style>
</head>
<body>
<div id="container">
<svg id="chart" viewBox="0 0 960 500" perserveAspectRatio="xMinYMid">
<div id="first">
<script type="text/javascript">
var w = document.getElementById('first').clientWidth;
// alert(w);
var h = document.getElementById('first').clientHeight;
// alert(h);
var r = Math.min(w, h) / 2 - 50;
// alert(r);
var inner = 70;
var color = d3.scale.category10();
var data = [
["192.168.12.1", 20],
["76.09.45.34", 40],
["34.91.23.76", 80],
["192.168.19.32", 16],
["192.168.10.89", 50],
["192.178.34.07", 18],
["192.168.12.98", 30]
];
var data = data.map(function(d) {
return {
IP: d[0],
count: d[1]
};
});
var total = d3.sum(data, function(d) {
return d3.sum(d3.values(d));
});
var vis = d3.select("#first")
.append("svg:svg")
.data([data])
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + r * 1.5 + "," + r * 1.5 + ")");
var textTop = vis.append("text")
.attr("dy", ".35em")
.style("text-anchor", "middle")
.attr("class", "textTop")
.text("TOTAL")
.attr("y", -10),
textBottom = vis.append("text")
.attr("dy", ".35em")
.style("text-anchor", "middle")
.attr("class", "textBottom")
.text(total)
.attr("y", 10);
var arc = d3.svg.arc()
.innerRadius(inner)
.outerRadius(r);
var arcOver = d3.svg.arc()
.innerRadius(inner + 0)
.outerRadius(r + 1);
var pie = d3.layout.pie()
.sort(null)
.startAngle(1.1 * Math.PI)
.endAngle(3.1 * Math.PI)
.value(function(d) {
return d.count;
});
var arcs = vis.selectAll("g.slice")
.data(pie)
.enter()
.append("svg:g")
.attr("class", "slice")
.on("mouseover", function(d) {
d3.select(this).select("path").transition()
.duration(200)
.attr("d", arcOver)
.style('opacity', 0.5)
textTop.text(d3.select(this).datum().data.IP)
.attr("y", -10);
textBottom.text(d3.select(this).datum().data.count)
.attr("y", 10);
})
.on("mouseout", function(d) {
d3.select(this).select("path").transition()
.duration(100)
.attr("d", arc)
.style('opacity', 1);
textTop.text("TOTAL")
.attr("y", -10);
textBottom.text(total);
});
arcs.append("svg:path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc)
.transition()
.ease("exp")
.duration(1000)
.attrTween("d", tweenPie);
function tweenPie(b) {
var i = d3.interpolate({
startAngle: 1.1 * Math.PI,
endAngle: 1.1 * Math.PI
}, b);
return function(t) {
return arc(i(t));
};
}
var legend = d3.select("#first")
.append("svg")
.attr("x", w)
.attr("y", h)
.attr("class", "legend")
.attr("width", w / 2)
.attr("height", h)
.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * 20 + ")";
});
legend.append("rect")
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) {
return color(i);
});
legend.append("text")
.attr("x", 24)
.attr("y", 9)
.attr("dy", ".35em")
.text(function(d) {
return d.IP;
});
</script>
</div>
</svg>
</div>
<script type="text/javascript">
var chart = $("#chart"),
aspect = chart.width() / chart.height(),
container = chart.parent();
$(window).on("resize", function() {
var targetWidth = container.width();
chart.attr("width", targetWidth);
chart.attr("height", Math.round(targetWidth / aspect));
}).trigger("resize");
</script>
</body>
</html>
See Question&Answers more detail:
os 
