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.scale.linear()
           .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);
    });
    var color = d3.scale.category20c();
  
    color = function(d) {
      if(d.name == "IEX"){return "orange"}
      return "darkcyan";
    }
    
    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) { return d.name + ": " + format(d[key]) }); 

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