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