D3 Examples - IEX Market

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<body align=center>
  <div class=dropdown></div><br>
  <style>
    text {
            font-family: Georgia, Arial, sans-serif;
      font-size: 15px;
      fill: black;
    }
    
    .gold {
      fill: gold;
    }
    
    .blue {
      fill: blue;
    }
    
    .red {
      fill: red;
    }
    .d3-tip {
   font-family: 'Raleway', sans-serif;
   font-size: .8em;
   line-height: 1;
   padding: 7px;
   background: black;
   color: lightgray;
   border-radius: 20px;
}
  </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js">  </script>
​
<script src="karthiviz.js"></script>  
​
<script>
​
function updateviz(key) {
var width = 100,
    height = 150,
    τ = 2 * Math.PI; // https://tauday.com/tau-manifesto
​
// An arc function with all values bound except the endAngle. So, to compute an
// SVG path string for a given angle, we pass an object with an endAngle
// property to the `arc` function, and it will return the corresponding string.
var arc = d3.svg.arc()
    .innerRadius(30)
    .outerRadius(45)
    .startAngle(0);
​
// Create the SVG container, and apply a transform such that the origin is the
// center of the canvas. This way, we don't need to position arcs individually.
​
  
​
data.forEach(function(d,i) {
        d.id = d.name;
        d.percent = d.value;
});
  
var rings = data;
​
var d3Rings = []; 
  
var convertPercentToAngle = (percent) => { return ( percent / 100 ) * τ };    
  
var createRings = function(){  
  
  _.each(rings, function(ring,index){
    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("align", "center")
​
​
        var d3Ring = svg
                .append("g")
                  .attr("transform", "translate(" + 45 + "," + 45 + ")")
                  .attr("id",ring.id);
    // background
    d3Ring
    .append("path")
    .datum({endAngle: τ})
    .style("fill", "#ddd")
    .attr("d", arc); 
    
    
    // foreground
    var foreground = d3Ring
    .append("path")
    .datum({endAngle: 0})
    .style("fill", color(ring))
        .style("stroke", "none")
        .style("stroke-width", "0px")
        .style("opacity", 1)
    .attr("d", arc);
    
    // text
    d3Ring
    .append("text")
    .attr("x", -22)
    .attr("y", 8) 
    .text(ring.percent + "%")
        //.attr("class", ring.id);
        
        svg
    .append("text")
    .attr("x", 25)
    .attr("y", 110) 
    .text(ring.name)
    .style("font-size", "12px")
​
    
    
    
    var angle = convertPercentToAngle(ring.percent);
    
    foreground
    .transition()
      .duration(10)
        //  .delay(500 * index)
      .call(arcTween, angle);
    
    d3Rings.push(d3Ring);
  
  });  
}
​
createRings();
  
function arcTween(transition, newAngle) {
​
  transition.attrTween("d", function(d) {  
  var interpolate = d3.interpolate(d.endAngle, newAngle);
​
    return function(t) {
      d.endAngle = interpolate(t);
      return arc(d);
    };
  });
}
}
​
  </script>
​
​
​
    