IEX Historical - 60 Day HBar Chart

IEX API

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

body {
  font: 10px sans-serif;
}

.bar rect {
  fill: orange;
}

.bar text.value {
  fill: black;
}

.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 = 3000 - margin.top - margin.bottom;
    m = [30,300,0,120]
var x = d3.scale.linear().range([0, w]),
    y = d3.scale.ordinal().rangeRoundBands([0, h/4], .1);

var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-h),
    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.date;
     d.marketShare = (d.marketShare*100).toFixed(3);  
  });
  var data2=data

var option = ["volume", "litVolume", "routedVolume", "marketShare"]
    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) + ")"; });

bar.append("rect")
      .attr("width", function(d) { return x(d.value); })
      .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 == "marketShare") { 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