D3 Examples - es2015 exploding boxplot

reusable updating exploding boxplot

Design based on original: mcaule

Features:

Dynamic data transitions

Events are configurable as options such that external functions can be seamlessly integrated

e.g. external tooltips can be configured for mouseover events

var container = d3.select('body'); var xbp = explodingBoxplot(); xbp.options({ data: { group: 'Set Score', color_index: 'Set Score', identifier: 'h2h' }, axes: { x: { label: 'Set Score' }, y: { label: 'Total Points' } } }); xbp.data(data); container.call(xbp); xbp.update();

Change the dimension for y axis:

xbp.options( { axes: { y: { label: 'Total Shots' } } }); xbp.update();

Data for this example was generated by mcpParse

Accessors:

by default accessors with no parameters return current values

chart.options(object) // for options that don't have accessors

chart.width(width)

chart.height(height)

chart.data(data) // set data

chart.update() // update chart

chart.colors(object) // chart.colors({'group': 'color1', 'group': 'color2'})

chart.events() // trigger functions for i.e. mouseover/mouseout events

operations on data held in chart instance

chart.pop()

chart.push(row) -or- chart.push([row, row])

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang='en'>
   <head>
      <meta charset='UTF-8'>
      <meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
      <meta name='Keywords' content='Tennis, Set Scores, ATP World Tour, interactive, TennisVisuals, sport, infographic, graphic, data visualisation'>
      <meta name='viewport' content='width=device-width'>
      <title>Point Distributions by Set Scores</title>
      <meta name='twitter:creator' content='@TennisVisuals'>
      <meta name='twitter:url' content='https://TennisVisuals.com/Distributions'/>
      <meta name='twitter:title' content='Point Distributions by Set Score'>
      <meta name='twitter:description' content='Compare Tennis Set Scores by Number of Points and Number of Shots Played'>
      <meta name='twitter:image' content=''>
      <meta name='og:url' content='https://TennisVisuals.com/Distributions'/>
​
      <script src='https://d3js.org/d3.v3.js'></script>
      <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
      <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script>
      <script src='https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js'></script>
      <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js'></script>
​
      <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' rel='stylesheet'>
      <link rel='icon' href='data:;base64,iVBORw0KGgo='>
​
      <script src='pDxbp.js' lang='babel' type='text/babel'></script>
      <script src='explodingBoxplot.js' lang='babel' type='text/babel'></script>
      <link rel='stylesheet' type='text/css' href='./explodingBoxplot.css'>
   </head>
​
   <body id='body'>
      <div id='container' class='container-fluid text-center'>
         <h5 id='title' style='color: #3B3B3B;'></h5>
         <div class='col-sm-9'>
            <div id='pointDistributions'></div>
         </div>
         <div class='col-sm-3'>
            <div id='controls'>
            </div>
         </div>
      </div>
​
      <script lang='babel' type='text/babel'>
         // boxPlotFunctions.defaultDistribution('popover');
         boxPlotFunctions.defaultDistribution('d3-tip');
         boxPlotFunctions.demoSetup();
      </script>
   </body>
​
</html>
​
    

es2015 exploding boxplot

Original `README.md`

reusable updating exploding boxplot

Design based on original: mcaule

See this block in production with Live Data

Features:

Accessors:

by default accessors with no parameters return current values

operations on data held in chart instance