bar chart test

<!DOCTYPE html>
<head>
  <meta charset='utf-8'>
  <script src='https://code.jquery.com/jquery-3.1.1.js'></script>
  <script src='https://d3js.org/d3.v3.min.js'></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #output { width: 100%; height: 100%; overflow-y: scroll; }
    .pop { display: inline; float: right; clear: right;
      		 font-size: smaller; font-weight: 100 }
  </style>
</head>

<body>
  <div id='output'></div>
  <div id='pie'></div>
  
  <script>
    var sensors = [
      {'name':'sensor1','orientation':'NW','ppm':'1.7'},
      {'name':'sensor2','orientation':'SW','ppm':'0.8'},
      {'name':'sensor3','orientation':'SE','ppm':'0.9'},
      {'name':'sensor4','orientation':'NE','ppm':'1.2'}
    ]
    ndiv = d3.select('#output')   
    names(ndiv,sensors, {})
    
    function names(dom, data, config) {
      var width = config.width || 500
      var height = config.height || 500

var color20c = d3.scale.category20c()
      var color10 = d3.scale.category10()
      var color20b = d3.scale.category20b()
      
      var rows = dom.selectAll('div.row')
                      .data(data.sort(function (a,b) {
      								  				return d3.descending(a.ppm, b.ppm) })) 
      rows.enter()
      	.append('div')
        .style('width', function(d) { return d.ppm * 200 + 'px'})
        .classed('row',true)
        .append('span')
          .style('background',function(d) { return color20c(d.ppm) })
      	  .style('color', 'black')
          .text(function(d) { return d.name })
      	  .on('mouseover', function(d) {
          	d3.select(this)
              .style('color','white')
              .style('background',
                   function(d) { return color10(d.name) })
	        })
      	  .on('mouseout', function(d) {
        	  d3.select(this)
           	  .style('color', 'black')
              .style('background',
                   function(d) { return color20c(d.ppm) })
	        })
        .append('span')
         	.classed('pop',true)
          .style('background',function(d) { return color20c(d.ppm) })
        	.style('color', 'black')
          .attr('top','5px')
          .text(function(d) {return '  ppm: '+d.ppm })
    }
    </script>
</body>

https://code.jquery.com/jquery-3.1.1.js

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