d3js | box and whiskers (boxplot)

Box and whiskers with the following config options:

    config = {
        colors: ['#eee'], // array of colours (one if you want all one colour)
        fixedScale: null, // pass in a fixed scale e.g. [0, 100]
        customColor: true, // boolean if using `colors` 
        boxWidth: null, // null or number for set width e.g. 30
        width: 800, // svg width
        height: 500, // svg height
        margin: {top: 50, right: 50, bottom: 50, left: 80}
    }

<!DOCTYPE html>
<title>blockup</title>
<link href='dist.css' rel='stylesheet' />
<body>
  <div id="vis"></div>
	<script src='https://d3js.org/d3.v4.min.js'></script>
  
  
	<script src='dist.js'></script>

// render a chart
  var chart = d3.boxPlot
  chart(
    '#vis', // dom element
    data, // data
    { // config overrides
      fixedScale: [0, 100],
      colors: ['#f77e5e']
    }
  )

function createData (amount) {
    return d3.range(amount).map(d => {
      return {
        id: 'id-' + d,
        low: Math.round(d3.randomUniform(2, 20)()),
        high: Math.round(d3.randomUniform(70, 99)()),
        median: Math.round(d3.randomUniform(40, 50)()),
        lower_quartile: Math.round(d3.randomUniform(20, 40)()),
        upper_quartile: Math.round(d3.randomUniform(55, 70)()),
        value: Math.round(d3.randomUniform(50, 150)())
      }
    })
  }
  // tet some updates and config
  d3.interval(function () {
    var _data = createData(Math.round(d3.randomUniform(5, 10)()))
    chart(
      '#vis',
      _data,
      {
        fixedScale: null, // let the scale work it out
        customColor: false // show the rainbow!
      }
    )
  }, 4000)
</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

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

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