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;

float: left;

width: 50%;

overflow: hidden;

}

.donut-chart-block {

overflow: hidden;

}

.donut-chart {

position: relative;

width: 200px;

height: 200px;

margin: 2rem auto;

float: left;

}

.donut-chart .center {

background: white;

position: absolute;

top: 30px;

left: 30px;

height: 140px;

width: 140px;

}

.donut-chart .clip {

clip: rect(0px, 200px, 200px, 100px);

height: 100%;

position: absolute;

width: 100%;

}

.item {

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);

}
Tagged with: |

## 3 Replies to “Donut chart using pure CSS and HTML”

1. Sid says:

What is the blank space in the chart for?

1. 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”.