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 total = formatAbbreviation(d3.sum(circs).toFixed(0))
    window.total = total
    var rscale = d3.scale.sqrt()
           .domain([0,(d3.sum(circs)).toFixed(0)])
           .range([0,200])
    data.forEach(function(d,i) {
      d.name = d.venueName;
      d.value2 = d[key];
console.log(formatAbbreviation(d.value2))
      d.value = rscale(d[key]).toFixed(2);
    });
    color = d3.scale.category20c(); 
  
    
    window.color = color;
  
    d3.select("body").selectAll("svg").remove(); 
    updateviz(key);
    setuptip(key);
}


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

    tip = d3.tip()
      .attr('class', 'd3-tip')
      .html(function(d,i) { 

      return d.name + ": " + format(d[key]) }); 

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



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