D3 Examples - Polar Clock

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  background: #222;
  margin: auto;
  width: 960px;
}
​
.arc-text {
  font: 16px sans-serif;
}
​
.arc-center {
  fill: none;
}
​
#credit {
  position: absolute;
  font: 10px sans-serif;
  right: 10px;
  bottom: 10px;
  color: #ddd;
}
​
#credit a {
  color: inherit;
}
​
</style>
<body align=center >
  <div class=dropdown></div>
​
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="jsonp.js"></script>
​
<script>
​
         
d3.jsonp("https://api.iextrading.com/1.0/market?callback=visualise");
​
function visualise(data){
​
      
    var option = ["volume", "tapeA", "tapeB", "tapeC"]
    var key = option[0]
    var select = d3.select('.dropdown')
      .append('select')
          .style('font-size', '20px')
​
      .attr('class','select')
      .on('change',onchange);
    var options = select
      .selectAll('option')
      .data(option).enter()
      .append('option')
      .text(function (d) { return d; }); 
      function onchange() {
        updateviz(d3.select('select').property('value'))
      };
 
    function updateviz(key) {
    d3.select("svg").remove();
          data.forEach(function(d,i) {
     d.marketPercent = (d.marketPercent*100).toFixed(3)
          });
        var circs = []
    data.forEach(function(d){ circs.push(d[key])})
    if(d3.max(circs) < 100) { max = 100} else { max = d3.max(circs)}
    var rscale = d3.scale.sqrt()
           .domain([0,max])
           .range([0,100])
    
    data.forEach(function(d,i) {
     d.name = d.venueName;
     d.text = d.name;
​
        d.value = rscale(d[key])/100
​
  });
      
      
      
      
    data=data.sort(function(a,b) { return a.value - b.value });
​
      
    data.forEach(function(d,i) {
     d.index = i/10
  });
      
      console.log(data)
      
      
      
var width = 960,
    height = 500,
    radius = Math.min(width, height) / 2.6,
    spacing = .07;
​
var formatSecond = d3.time.format("%-S seconds"),
    formatMinute = d3.time.format("%-M minutes"),
    formatHour = d3.time.format("%-H hours"),
    formatDay = d3.time.format("%A"),
    formatDate = function(d) { d = d.getDate(); switch (10 <= d && d <= 19 ? 10 : d % 10) { case 1: d += "st"; break; case 2: d += "nd"; break; case 3: d += "rd"; break; default: d += "th"; break; } return d; },
    formatMonth = d3.time.format("%B");
​
var color = d3.scale.linear()
    .range(["hsl(-180,60%,50%)", "hsl(180,60%,50%)"])
    .interpolate(function(a, b) { var i = d3.interpolateString(a, b); return function(t) { return d3.hsl(i(t)); }; });
​
var arcBody = d3.svg.arc()
    .startAngle(0)
    .endAngle(function(d) { return d.value * 2 * Math.PI; })
    .innerRadius(function(d) { return d.index * radius; })
    .outerRadius(function(d) { return (d.index + spacing) * radius; })
    .cornerRadius(6);
​
var arcCenter = d3.svg.arc()
    .startAngle(0)
    .endAngle(function(d) { return d.value * 2 * Math.PI; })
    .innerRadius(function(d) { return (d.index + spacing / 2) * radius; })
    .outerRadius(function(d) { return (d.index + spacing / 2) * radius; });
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
​
var field = svg.selectAll("g")
    .data(fields)
  .enter().append("g");
​
field.append("path")
    .attr("class", "arc-body");
​
field.append("path")
    .attr("id", function(d, i) { return "arc-center-" + i; })
    .attr("class", "arc-center");
​
field.append("text")
    .attr("dy", ".35em")
    .attr("dx", ".75em")
    .style("text-anchor", "start")
  .append("textPath")
    .attr("startOffset", "50%")
    .attr("class", "arc-text")
    .attr("xlink:href", function(d, i) { return "#arc-center-" + i; });
​
tick();
​
d3.select(self.frameElement).style("height", height + "px");
​
function tick() {
  if (!document.hidden) field
      .each(function(d) { this._value = d.value; })
      .data(fields)
      .each(function(d) { d.previousValue = this._value; })
    .transition()
      .ease("elastic")
      .duration(500)
      .each(fieldTransition);
​
  //setTimeout(tick, 1000 - Date.now() % 1000);
}
​
function fieldTransition() {
  var field = d3.select(this).transition();
​
  field.select(".arc-body")
      .attrTween("d", arcTween(arcBody))
      .style("fill", function(d) { return color(d.value); });
​
  field.select(".arc-center")
      .attrTween("d", arcTween(arcCenter));
​
  field.select(".arc-text")
      .text(function(d) { return d.text; });
}
​
function arcTween(arc) {
  return function(d) {
    var i = d3.interpolateNumber(d.previousValue, d.value);
    return function(t) {
      d.value = i(t);
      return arc(d);
    };
  };
}
​
function fields() {
  var now = new Date;
  return data;
}
      
      
    }
  updateviz(key)
}
</script>
​
    