X A Bar Chart 2

This simple bar chart demonstrates two new features of D3 2.6:

Namespaces are now optional! You can now append an SVG element by just saying append("svg"), without specifying the namespace explicitly as "svg:svg". Adding an element whose name is a known prefix (in d3.ns.prefix) implies a namespace; similarly, appending or inserting an element will inherit the namespace from its parent.
The axis component now supports ordinal scales. The labels on the left side of the bar chart are rendered with the axis component.

forked from mbostock's block: A Bar Chart

forked from karthiir's block: X A Bar Chart

<!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