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