IEX Market - HBar Chart

IEX API

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.bar rect {
  //fill: orange;
}

.bar text.value {
  fill: white;
}

.axis {
  shape-rendering: crispEdges;
}

.axis path {
  fill: none;
}

.x.axis line {
  stroke: #fff;
  stroke-opacity: .8;
}

.y.axis path {
  stroke: black;
}

</style>
<body align=center>
  <span class=dropdown></span><span class=dropdown2></span><br>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="jsonp.js"></script>

function visualise(data){
        var margin = {top: 30, right: 300, bottom: 0, left:120},
    w = 960 - margin.left - margin.right,
    h = 1000 - margin.top - margin.bottom;
    m = [30,300,0,120]
var x = d3.scale.linear().range([50, w]),
    y = d3.scale.ordinal().rangeRoundBands([0, h/4], .1);

function formatAbbreviation(x) {
  var v = Math.abs(x);
  return (v >= .9995e9 ? formatBillion
      : v >= .9995e6 ? formatMillion
      : formatThousand)(x);
}
var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-h).tickFormat(formatAbbreviation),
    yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);
;

var format = d3.format(",.0f");
var format2 = d3.format(",.2f");

data.forEach(function(d) {
     d.name = d.venueName;
     d.marketPercent = (d.marketPercent*100).toFixed(3);  
  });
  var data2=data

var option = ["volume", "marketPercent", "tapeA", "tapeB","tapeC"]
    var key = option[0]
    var option2 = ["sortvalue", "sortkey"]
    var key2 = option2[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'),d3.select('.select2').property('value'))
      };

var select2 = d3.select('.dropdown2')
      .append('select')
          .style('font-size', '20px')

.attr('class','select2')
      .on('change',onchange2);
    var options = select2
      .selectAll('option2')
      .data(option2).enter()
      .append('option')
      .text(function (d) { return d; }); 
      function onchange2() {
updateviz(d3.select('.select').property('value'),d3.select('.select2').property('value'))      };

function updateviz(key,key2) {
    data=[]
    data2.forEach(function(d){data.push(d)});
    d3.select("svg").remove();
        data.forEach(function(d) {
     d.value = d[key];
        });

// Set the scale domain.
  x.domain([0, d3.max(data, function(d) { return d.value; })]);
  y.domain(data.map(function(d) { return d.name; }));

var bar = svg.selectAll("g.bar")
      .data(data)
    .enter().append("g")
      .attr("class", "bar")
      .attr("transform", function(d) { return "translate(0," + y(d.name) + ")"; });

clist = ["#1b9e77", "#a04a2b", "#9467bd", "#4a4685", "#e7298a", "#66a61e", 
             "#02aee3", "#debf44", "#666666","#d96d02", "#026bd4","#c803d2",
             "#c20346"]
        color = d3.scale.ordinal().domain(data.map(function(d) {
    return d.name;
  })).range(); 
  bar.append("rect")
      .attr("width", function(d) { return x(d.value); })
      .attr("fill",function(d){
   if(d.name == 'TRF Volume') {return clist[0]}
   if(d.name == 'NYSE') {return clist[1]}
   if(d.name == 'NYSE Arca') {return clist[1]}
   if(d.name == 'NYSE MKT') {return clist[1]}
   if(d.name == 'BATS BZX') {return clist[2]}
   if(d.name == 'BATS BYX') {return clist[2]}
   if(d.name == 'EDGX') {return clist[2]}
   if(d.name == 'EDGA') {return clist[2]}
   if(d.name == 'IEX') {return "orange"}
   if(d.name == 'NASDAQ') {return clist[3]}
   if(d.name == 'NASDAQ PSX') {return clist[3]}
   if(d.name == 'NASDAQ BX') {return clist[3]}
   if(d.name == 'CHX') {return clist[4]}

})
      .attr("height", y.rangeBand());

bar.append("text")
      .attr("class", "value")
      .attr("x", function(d) { return x(d.value); })
      .attr("y", y.rangeBand() / 2)
      .attr("dx", -3)
      .attr("dy", ".35em")
      .attr("text-anchor", "end")
      .text(function(d) { 
    if(key == "marketPercent") { return format2(d.value)+"%"}
    return format(d.value); });

svg.append("g")
      .attr("class", "x axis")
      .call(xAxis);

svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);
}

updateviz(key,key2)
}
</script>

https://d3js.org/d3.v3.min.js