D3 Examples - X A Bar Chart 2

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.

xxxxxxxxxx
 
<!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>
​
  
<script>
d3.jsonp("https://api.iextrading.com/1.0/stats/historical/daily?callback=visualise&last=60");
  
​
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];
        });
      
     
      
​
​
var svg = d3.select("body").append("svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
    .append("g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
  // Parse numbers, and sort by value.
  data.forEach(function(d) { d.value = +d.value; });
if(key2 == "sortvalue") {
  data.sort(function(a, b) { return b.value - a.value; });
} 
​
  
  
  // 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>
​
    