Achyuthuni Sri Harsha
Last week time spent
■ Cleaning data
■ Formulating hypothesis
■ EDA
■ Actual analytics
One of the ways of plotting numerical proportions in statistics is by using the donut chart.
In the above example, the time I spent working on a problem in the last week is shown.
Although I recommend using D3, Plotly or similar visualization libraries, creating a donut chart using pure HTML and CSS is a challenge for any web developer.
Below is the code for creating the above donut chart using pure CSS and HTML.
HTML
<div class="container"> <div class="donut-chart-block blockAsh"> <div class="donut-chart"> <div id="section1" class="clip"> <div class="item" data-rel="170"></div> </div> <div id="section2" class="clip"> <div class="item" data-rel="20"></div> </div> <div id="section3" class="clip"> <div class="item" data-rel="113"></div> </div> <div id="section4" class="clip"> <div class="item" data-rel="-32"></div> </div> <div class="center"></div> </div> </div> </div>
CSS
.block {
margin: 25px 25px 0 0;
background: white;
border-radius: 5px;
float: left;
width: 50%;
overflow: hidden;
}
.donut-chart-block {
overflow: hidden;
}
.donut-chart {
position: relative;
width: 200px;
height: 200px;
margin: 2rem auto;
border-radius: 100%;
float: left;
}
.donut-chart .center {
background: white;
position: absolute;
top: 30px;
left: 30px;
height: 140px;
width: 140px;
border-radius: 70px;
}
.donut-chart .clip {
border-radius: 50%;
clip: rect(0px, 200px, 200px, 100px);
height: 100%;
position: absolute;
width: 100%;
}
.item {
border-radius: 50%;
clip: rect(0px, 100px, 200px, 0px);
height: 100%;
position: absolute;
width: 100%;
font-family: monospace;
font-size: 1.5rem;
}
#section1 {
transform: rotate(0deg);
}
#section1 .item {
background-color: #E64C65;
transform: rotate(170deg);
}
#section2 {
transform: rotate(170deg);
}
#section2 .item {
background-color: #11A8AB;
transform: rotate(20deg);
}
#section3 {
transform: rotate(190deg);
}
#section3 .item {
background-color: #4FC4F6;
transform: rotate(113deg);
}
#section4 {
transform: rotate(-32deg);
}
#section4 .item {
background-color: #FCB150;
transform: rotate(32deg);
}
What is the blank space in the chart for?
Time taken to bang my head to the wall expecting a solution to popup.
PS: It is the second most effective method after “discussing with peers”.