horizontal bar

forked from jooziv's block: horizontal bar

<!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; }
    .chart {
  background: #b0e0f8;
  margin: 5px;
}
  </style>
</head>

<body>
  <script>
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11 ];
var w = 600,
        h = 300,
        padding = 25,
        maxValue = 25

var yScale = d3.scaleBand()
						.domain(d3.range(dataset.length))
						.rangeRound([0, h], 0.05)
            .paddingInner(0.05);

var xScale = d3.scaleLinear()
               .domain([0, d3.max(dataset)])
               .range([0, h]);

// create svg element
var svg = d3.select('body')
  .append('svg')
  .attr('width', w)
	.attr('height', h);	
    
let bar = svg.selectAll('g')
	.data(dataset)
	.enter()
	.append('g')
	.attr('class', 'bar');
    
bar.append('text')
	.attr('y', function(d, i){
  	return yScale(i);
	})
	.attr('height', function(d, i){
  		return yScale.bandwidth();
	})
	.text(function(d){
  	return d;
  })

bar.append('rect')
    .attr('x', function(d, i) {
    return 100;
  })
    .attr('y', function(d, i) {
    return yScale(i);
  })
    .attr('width', function(d){
    return xScale(d);
  })
    .attr('height', function(d) {
    return yScale.bandwidth();
  })
    .attr('fill', function(d) {
    return "rgb(0, 0, " + (d * 10) + ')';
  })

// create labels
// svg.selectAll('text')
//   .data(dataset)
//   .enter()
//   .append('text')
//    .text(function(d) {
//     return d;
//   })
//    .attr('text-anchor', 'middle')
//    .attr('x', function(d, i ) {
//     return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
//   })
//    .attr('y', function(d) {
//     return h - yScale(d) + 14;
//   })
//    .attr('font-family', 'sans-serif')
//    .attr('font-size', '11px')
//    .attr('fill', 'white');

</script>
</body>

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