<div></div>
<div></div>
<div></div>
<div></div>
<div class="container">
	<h3 class="text-center">One bottle ECOGels contains:</h3>
	<div class="myTooltip"><span class="tooltipContent"></span></div>
	<div class="info col-xs-5">
		<div class="col-xs-12"><p><span class="colorBox canabinoids"></span><span class="name">Canabinoids</span></p></div>
		<div class="col-xs-12"><p><span class="colorBox omega"></span><span class="name">Omega-3 &amp; Omega-4</span></p></div>
		<div class="col-xs-12"><p><span class="colorBox vitamin"></span><span class="name">Vitamin E</span></p></div>
		<div class="col-xs-12"><p><span class="colorBox fatty-acids"></span><span class="name">Fatty Acids</span></p></div>
		<div class="col-xs-12"><p><span class="colorBox chlorophyll"></span><span class="name">Chlorophyll</span></p></div>
		<div class="col-xs-12"><p><span class="colorBox others"></span><span class="name">Others</span></p></div>
	</div>
	
	<div class="wrapper col-xs-7 text-center">
		<div id="chart">
			<svg class="filter">
					<defs xmlns="http://www.w3.org/2000/svg">
							<filter id="filter" height="140%">
									<feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
									<feOffset dx="0" dy="0" result="offsetblur"/>
									<feComponentTransfer>
											<feFuncA type="linear" slope="0.5"/>
									</feComponentTransfer>
									<feMerge> 
											<feMergeNode/>
											<feMergeNode in="SourceGraphic"/> 
									</feMerge>
							</filter>
					</defs>
				</svg> 
		</div>
	</div>
</div>

* {
	color: #333;
}

body {
	background: #fefefe;
	overflow-x: hidden;
}

.container {
	max-width: 720px;
}

h3  {
	font-family: 'Monoton';
 word-spacing: 10px;
 color: #666;
	font-weight: 300;
	font-size: 27px;
	margin: 30px auto 50px auto;
	line-height: 1.3;
	border-bottom: solid 1px #999;
}

span {
	font-weight: 500;
}

p , span{
	color: #666;
	font-family: 'Source Sans Pro';
	font-weight: 500;
	font-size: 15px;
	line-height: 1.4;
}

.filter {
	width: 0;
	height: 0;
}

#chart {
}

.colorBox {
	width: 30px;
	height: 20px;
	vertical-align: bottom;
	border: none;
	border-radius: 3px;
	display: inline-block;
	margin-right: 10px;
	background: #eee;
	border: solid 1px #fff;
	box-shadow: 0 0 4px 0 rgba(0,0,0,.2);
}

.canabinoids {
	background: #7ac05b;
}

.omega {
	background: #aacf5b;
}

.vitamin {
	background: #afcf0b; 
}

.fatty-acids {
	background: #facf5c;
}

.chlorophyll {
	background: #e4e894;
}

.others {
	background: #e5e5e5;
}

path {
	stroke: #fefefe;
	stroke-width: 2px;
}

.col-xs-5, .col-xs-12, .col-xs-7{
	padding: 0;
	margin-bottom: 15px;
}

.myTooltip {
	-webkit-transition: 100ms all ease;
	-moz-transition: 100ms all ease;
	-o-transition: 100ms all ease;
	-ms-transition: 100ms all ease;
	transition: 100ms  all ease;
	visibility: hidden;
	z-index: 9999;
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.tooltipContent {
	text-align: center;
	display: block;
	width: 125px;
	background: #555;
	color: #fff;
	padding: 10px;
	line-height: 1;
	font-size: 14px;
	border-radius: 3px;
	position: relative;
}
.tooltipContent::after {
	content: '';
	border-right: solid 0px transparent; 
	border-left: solid 10px transparent;
	border-top: solid 10px #555;
	position: absolute;
	bottom: -6px;
	right: 0;
}

@media screen and (max-width: 500px) {
	p , span{
		font-size: 13px;
	}
	.colorIcon {
		vertical-align: bottom;
	}
	.col-xs-5, .col-xs-12, .col-xs-7{
		padding: 0;
		margin-bottom: 10px;
	}
	h3 {
		font-size: 20px;
		margin-top: 50px;
		margin-bottom: 70px;
	}
}
var customData = [{
    name: "Canabinoids",
    value: "30"
},
{
    name: "Omega-3 & Omega-4",
    value: "16.3"
},
{
    name: "Vitamin E",
    value: "12"
},
{
    name: "Fatty Acids",
    value: "20.3"
},
{
    name: "Chlorophyll",
    value: "6.7"
},
{
    name: "Others",
    value: "5.2"
}
];

var colors = ["#7ac05b", "#aacf5b", "#afcf0b", "#facf5c", "#e4e894", "#e5e5e5"];

function plot() {

var parElemWidth = document.querySelector("#chart")
    .parentElement.offsetWidth;

parElemWidth = parElemWidth > 350 ? 350 : parElemWidth;

var width = parElemWidth;

var height = width;

var radius = width / 2;

var colorScale = d3.scaleOrdinal()
    .range(colors);

var tooltip = d3.select(".myTooltip");

var arc = d3.arc()
    .innerRadius(0)
    .outerRadius(radius - 10);

var pie = d3.pie()
    .sort(null)
    .value(function(d) {
        return d.value;
    });
var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("filter", "url('#filter')")
    .append("g")
    .attr("class", "group")
    // moving each g to center
    .attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");

var g = svg.selectAll(".arc")
    // pie(customData) will Return some additional data (path data) with
    // original data 
    .data(pie(customData))
    .enter().append("g")
    .attr("class", "arc");

g.append("path")
    // D3 implicitly uses the Data bound to the SVG Group elements as
    // an input to the D3 Arc Generation function we named arc earlier.
    // The result of this function is then set as the d attribute for
    // the path.
    .attr("d", arc)
    .style("fill", function(d) {
        return colorScale(d.data.value)
    })
    .on("mouseover", function(d) {
        tooltip.html("<span class='tooltipContent'>" + d.data.name + ": " + d.data.value + "mg</span>");
        return tooltip.style("visibility", "visible").style("opacity", "1");
    })
    .on("mousemove", function() {
        return tooltip.style("top", (d3.event.pageY - 35) + "px").style("left", (d3.event.pageX) - 125 + "px");
    })
    .on("mouseout", function() {
        return tooltip.style("visibility", "hidden").style("opacity", "0");
    });
}

document.addEventListener("DOMContentLoaded", function(event) {
plot();
// for ie 9
if (window.attachEvent) {
    window.attachEvent('onresize', function() {
        alert('attachEvent - resize');
    });
} else if (window.addEventListener) {
    window.addEventListener('resize', function() {
        document.querySelector("#chart").innerHTML = "";
        plot();
    }, true);
}
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js