JSFiddle - React, Tailwind, and code Playground

by amitaviv99

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.0.8/d3.min.js"></script>
<div ng-app>
    <div ng-controller="D3miniSandCtrl">	
      <div id="svgStage">				</div>
      <button id="bar">bars</button>
      <button id="pie">pie	</button>
    </div>
</div>

CSS

html {
  background: #000;
}
svg {
  background: #ccc;
  border-radius: 3px;
}
path:nth-child(0) {
  fill: #3ebbb9;
}
path:nth-child(1) {
  fill: #57bf40;
}
path:nth-child(2) {
  fill: #c1bc44;
}
path:nth-child(3) {
  fill: #474bc2;
}
path:nth-child(4) {
  fill: #af4bc3;
}
path:nth-child(5) {
  fill: #3ebbb9;
}
path:nth-child(6) {
  fill: #57bf40;
}
path:nth-child(7) {
  fill: #c1bc44;
}
path:nth-child(8) {
  fill: #474bc2;
}
path:nth-child(9) {
  fill: #af4bc3;
}
path:nth-child(10) {
  fill: #3ebbb9;
}
path:nth-child(11) {
  fill: #57bf40;
}

JavaScript

// Generated by CoffeeScript 1.6.1
(function () {

    this.D3miniSandCtrl = function ($scope, $http) {
        var arc, height, margin, pie, radius, width, x;
        width = 750;
        height = width / 2;
        margin = 20;
        radius = (height - (margin * 2)) / 2;
        pie = d3.layout.pie().value(function (d) {
            return d;
        });
        console.log(pie([10, 20]));
        arc = d3.svg.arc().outerRadius(radius).innerRadius(radius / 4);
        x = d3.scale.linear().domain([0, 100]).range([0, width]);
        
        var g, item, paths, percents, svg, toBars, toPie, woo;
        percents = [2.9, 3.9, 4.2, 4.3, 4.3, 5.4, 10.5, 11.6, 14.1, 14.7, 24.2].sort(d3.ascending);
        svg = d3.select('#svgStage').append('svg').attr('width', width + (margin * 2)).attr('height', height + (margin * 2));
        svg.data([percents]);
        g = svg.append('g').attr('transform', "translate(" + radius + "," + radius + ")");
        paths = g.selectAll('path');
        paths.data(pie).enter().append('path').attr('d', arc);
        toPie = function () {
            return g.selectAll('path').transition().duration(2000).attr('d', arc);
        };
        toBars = function () {
            return g.selectAll('path').transition().duration(2000).attr('d', function (d, index) {
                var cord, oCord;
                cord = {
                    tl: [0, index * 20],
                    tr: [d.value * 20, index * 20],
                    br: [d.value * 20, index * 20 - 20],
                    bl: [0, index * 20 - 20]
                };
                oCord = [cord.tr, cord.br, cord.bl, cord.tl];
                return "M " + oCord[0][0] + ", " + oCord[0][1] + "					A 0, 0 0 0, 0 " + oCord[1][0] + ", " + oCord[1][1] + "					L " + oCord[2][0] + ", " + oCord[2][1] + "					A 0, 0 0 0, 0 " + oCord[3][0] + ", " + oCord[3][1] + "					Z";
            });
        };
        document.getElementById('bar').addEventListener('click', toBars);
       ...