D3 Examples - min en max onderscheiden

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Data-driven modification of selection</title>
</head>
​
<style>
rect {
  fill: grey;
 }
rect.max {
  fill: orange;
 
}
  rect.min {
   fill:#ddd;
 }
</style>
​
<body>
  <svg width="760" height="600">
    <g transform="translate(70, 70)">
      <rect width="30" height="30" y="0" />
            <rect width="30" height="30" y="40" />
            <rect width="30" height="30" y="80" />
            <rect width="30" height="30" y="120" />
        <rect width="30" height="30" y="160" />
    </g>
  </svg>
​
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
​
var myData = [ 10, 40, 20, 30, 50 ];
​
var s = d3.selectAll('rect');
var maxdata=d3.max(myData);
var mindata=d3.min(myData);
​
s.data(myData);
​
s.attr('width', function(d) {
  return d;
  })
  .classed('max', function(d) {
    return d >= maxdata;
  })
    .classed('min', function(d) {
    return d <= mindata;
    })
  .attr('y', function(d, i) {
    return i * 40;
  });
​
  </script>
</body>
</html>
​
    