Skip to content

Instantly share code, notes, and snippets.

@Kashif1Naqvi

Kashif1Naqvi/.block

Last active November 1, 2019 14:38
Show Gist options
  • Save Kashif1Naqvi/a82a36a748ca40942f0ebef4d47a0330 to your computer and use it in GitHub Desktop.
Save Kashif1Naqvi/a82a36a748ca40942f0ebef4d47a0330 to your computer and use it in GitHub Desktop.
Download ZIP
donut chart in d3js
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>dev 02</title>
</head>
<style>
.text{
font-size: 55px;
font-weight:bold;
fill:#08088c;
font-family: 'Anton', sans-serif;
}
.svg-container {
top:11px;
/* background-color:#c8ffbc; */
display: inline-block;
position: absolute;
width: 100%;
height:auto;
padding-bottom:10%;
vertical-align: top;
overflow: hidden;
}
.svg-content-responsive {
display: inline-block;
position:relative;
top: auto;
left: auto;
bottom:auto;
right:auto;
}
</style>
<body>
<div id="pieChart" >
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
let svg,data,segmant,section,arr,color;
arr = [40,60]
color=[
{d1:"#08088c"},
{d1:"#eb8634"},
]
svg = d3.select("#pieChart")
.append("div")
.classed("svg-container", true).append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 600 400")
.classed("svg-content-responsive", true);
data = d3.pie().sort(null).value(function(d,i){
return d
})(arr);
segmant = d3.arc()
.innerRadius(90)
.outerRadius(140)
.padAngle(20)
.padRadius(20);
section = svg.append("g").attr("transform","translate(290,250)")
.selectAll("path").data(data).enter()
.append("path")
.attr("d",segmant)
.attr("fill",function(d,i){
return color[i].d1
})
.style("stroke" ,"white")
.style('stroke-width', 15)
d3.select("g")
.selectAll("text")
.data(arr)
.enter()
.append("text")
.attr("x",-50)
.attr("y",20)
.attr("class","text")
.text(function(d){
return arr[0]+"%"
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment