D3 Examples - reusable updating 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>
​
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
​
      <script src="pDxbp.js"></script>
      <script src="explodingBoxplot.js"></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>
         // boxPlotFunctions.defaultDistribution('popover');
         boxPlotFunctions.defaultDistribution('d3-tip');
         boxPlotFunctions.demoSetup();
      </script>
   </body>
​
</html>
​
    