d3.jsonp = function (url, callback) {
  function rand() {
    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
      c = '', i = -1;
    while (++i < 15) c += chars.charAt(Math.floor(Math.random() * 52));
    return c;
  }

  function create(url) {
    var e = url.match(/callback=d3.jsonp.(\w+)/),
      c = e ? e[1] : rand();
    d3.jsonp[c] = function(data) {
      callback(data);
      delete d3.jsonp[c];
      script.remove();
    };
    return 'd3.jsonp.' + c;
  }

  var cb = create(url),
    script = d3.select('head')
    .append('script')
    .attr('type', 'text/javascript')
    .attr('src', url.replace(/(\{|%7B)callback(\{|%7D)/, cb));
};


d3.jsonp("https://api.iextrading.com/1.0/market?callback=visualise");


function visualise(data){

    window.data = data;
    var option = [ "marketPercent", "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() {
        renderviz(d3.select('select').property('value'))
      }
  
      data.forEach(function(d,i) {
        d.marketPercent = (d.marketPercent*100).toFixed(2);
     });

    renderviz(key)
};

function renderviz(key) {

    var circs = []
    data.forEach(function(d){ circs.push(d[key])})
    //console.log(d3.sum(circs).toFixed(0))
    var rscale = d3.scaleSqrt()
           .domain([0,(d3.sum(circs)).toFixed(0)])
           .range([0,100])
    data.forEach(function(d,i) {
      d.name = d.venueName;
      d.value = rscale(d[key]).toFixed(2);
      d.interval = d3.timeMinute;
      d.format = d3.format(",");
    });
        data =  sanitize(data)
        
     data.forEach(function(d,i) {
      d.radius = i*2*20;

    });
  console.log(data)
    var color = d3.scaleOrdinal(d3.schemeCategory20c);;

  
  
  
    color = function(d) {
      if(d.name == "IEX"){return "orange"}
      return "darkcyan";
    }
    
    window.color = color;
  

    updateviz(key);
    //setuptip(key);
}



function setuptip(key) {
    var format = d3.format(",")

    tip = d3.tip()
      .attr('class', 'd3-tip')
      .html(function(d) { return d.name + ": " + format(d[key]) }); 

      
    d3.selectAll(".arc").call(tip)
    
    d3.selectAll('.arc')
      .data(data)
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide);
}



function sanitize(data) {

  data.sort(function (a, b) {
    var v1 = a.value;
    var v2 = b.value;
    return (v1 - v2 )
  });
  return data;
}

formatAbbreviation = function(x) {
        var formatNumber = d3.format(".0f"),
            formatPercent = d3.format(".2f"),
            formatBillion = function(x) { return "$" + formatNumber(x / 1e9) + "B"; },
            formatMillion = function(x) { return "$" + formatNumber(x / 1e6) + "M"; },
            formatThousand = function(x) { return "$" + formatNumber(x / 1e3) + "k"; };

        var v = Math.abs(x);
        return (v >= .9995e9 ? formatBillion
            : v >= .9995e6 ? formatMillion
            : v >= .9995e3 ? formatThousand
            : formatPercent)(x);
      }