D3 Examples - commission bars

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .axis--y path { stroke: gray; stroke-width: 1.5px; }
    .axis--x path { stroke: gray; stroke-width: 1.5px; }
    .tick line { opacity: 0.2; stroke: #9b9999; }
    .focus { fill: #FEE9DA; opacity: 0.7; }
    .bar { fill: steelblue; }
    .legend { pointer-events: none; }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var size = {
      'width': 762, 'height': 320,
      'margin': {
        'left': 70, 'top': 20, 'right': 20, 'bottom': 40
      }
    };
    
    var clientWidth = size.width - size.margin.left - size.margin.right;
    var clientHeight = size.height - size.margin.top - size.margin.bottom;
    var barHeight = 70;
    
    var svg = d3.select("body").append("svg")
      .attr("width", size.width)
      .attr("height", size.height)
​
    d3.json('data.json', function (error, data) {
           
    if (error){
      console.log(error);
      return;
    }
​
    var maxValue = d3.max([data.YTD, data.LastYr], function(d) {
        return d;
      });
        
    var xScale = d3.scaleLinear().domain([0, maxValue + maxValue/10]).range([0, clientWidth]);
    var xAxis = d3.axisBottom(xScale).tickSizeInner(-clientHeight);
    
    var yScale = d3.scaleLinear().domain([0, 3]).range([0, clientHeight]);
    var yAxis = d3.axisLeft(yScale).ticks(0);
    
    var plot = svg.append('g')
        .attr('class', 'plot-area')
        .attr('transform', 'translate(' + size.margin.left + ', ' + size.margin.top + ')');
    
   
    plot.append('rect')
      .attr('width', clientWidth)
      .attr('height', clientHeight)
        .attr('class', 'focus')
        .attr('x', 0)
      .attr('y', 0);
​
    var chart = plot
        .append('g')
        .classed('chart', true);
    
    var barsData = [data.YTD, data.LastYr];
    
    var bars = chart.selectAll('g')
        .data(barsData).enter()
        .append('g')
        .attr('transform', function(d, i) {
            return 'translate(0, ' + (yScale(i + 1) - barHeight / 2) + ')'
        })
            .append("rect")
            .attr("class", "bar")
            .attr("id", function(d, i) { return "bar"+i })
            .attr("width", function(d) { return xScale(d); })
            .attr("height", barHeight)
            .attr("opacity", function(d, i) {
           return i === 0 ? 1: 0.7;
        }).on('mouseover', function() {
          var e = d3.event;
          var target = e.target;
                    var id = target.id;
          d3.select(target)
            .style('opacity', function () {
                return id === "bar0" ? 0.8: 0.5;
            });
        }).on('mouseleave', function() {
          var e = d3.event;
          var target = e.target;
          var id = target.id;
          
          d3.select(target)
            .style('opacity', function () {
                return id === "bar0" ? 1: 0.7;
            });
        });
    
    
    plot.append('g').attr('class', 'axis axis--x')
        .attr('transform', 'translate(0, ' + clientHeight + ')')
      .call(xAxis);
    
    plot.append('g').attr('class', 'axis axis--y')
        .attr('transform', 'translate(0, 0)')
      .call(yAxis);    
    
    var text1ypos = yScale(1) + 25;
    var text2ypos = yScale(2) + 25;
    
    svg.append('text').text('YTD')
      .attr('x', 10)
        .attr('y', function() { return yScale(1) + 25; })
        .style('font-family', 'helvetica')
        .style('font-size', '8pt')
        .style('font-weight', 'normal')
    
    svg.append('text').text('LAST YR')
      .attr('x', 10)
        .attr('y', function() { return yScale(2) + 25; })
        .style('font-family', 'helvetica')
        .style('font-size', '8pt')
        .style('font-weight', 'normal')
    
    svg.append('text').text(data.YTD.toFixed(3).toString())
        .attr('x', function() {
        return xScale(data.YTD - 70)
        })
        .attr('y', text1ypos)
        .classed('legend', true)
        .attr('fill', 'white')
    
    svg.append('text').text(data.LastYr.toFixed(3).toString())
        .attr('x', function() {
        return xScale(data.LastYr - 70)
        })
        .attr('y', text2ypos)
        .classed('legend', true)
        .attr('fill', 'white')
    
    svg.append('text').text('USD($)')
        .attr('x', 0).attr('y', size.height - 10)
        .style('font-family', 'helvetica');
    });
  </script>
</body>
​
    