D3 Examples - d3js | box and whiskers (boxplot)

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} }

xxxxxxxxxx
 
<!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="https://d3js.org/d3.v3.min.js"></script> -->
  <!-- <script src="boxplot.js"></script> -->
    <script src='dist.js'></script>
​
<script>
  var d3 = window.d3
  var data = [
    {
     "id": "id-1",
     "low": 14,
     "high": 65,
     "median": 33,
     "lower_quartile": 20,
     "upper_quartile": 35,
     "value": 22
    },
    {
     "id": "id-2",
     "low": 20,
     "high": 73,
     "median": 35,
     "lower_quartile": 25,
     "upper_quartile": 50,
     "value": 170
    },
    {
    "id": "id-3",
     "low": 15,
     "high": 40,
     "median": 25,
     "lower_quartile": 17,
     "upper_quartile": 28,
     "value": 185
    },
    {
     "id": "id-4",
     "low": 18,
     "high": 55,
     "median": 33,
     "lower_quartile": 28,
     "upper_quartile": 42,
     "value": 135
    },
    {
     "id": "id-5",
     "low": 14,
     "high": 66,
     "median": 35,
     "lower_quartile": 22,
     "upper_quartile": 45,
     "value": 150
    },
    {
     "id": "id-6",
     "low": 22,
     "high": 70,
     "median": 34,
     "lower_quartile": 28,
     "upper_quartile": 42,
     "value": 170
    },
    {
     "id": "id-7",
     "low": 14,
     "high": 65,
     "median": 33,
     "lower_quartile": 30,
     "upper_quartile": 50,
     "value": 28
    }
  ]
​
  // 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>
​
    