D3 Examples - Updating Scatterplot using voroni diagrams for mouseover

reusable updating voroni scatterplot

Features:

Dynamic data transitions

Highlighting of data points

Zoom option for selections (Legend Clicks)

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

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

Accessors:

by default accessors with no parameters return current values

chart.duration(transition-time) // duration of transitions

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.highlight(identifier) // highlight datapoint (configurable in options)

operations on data held in chart instance

chart.pop()

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

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Scatterplot with Voronoi</title>
​
   <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>
​
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:700,400,300' rel='stylesheet' type='text/css'>
​
    <link href='./scatterPlot.css' rel='stylesheet' type='text/css'>
    <link href='./scatterShot.css' rel='stylesheet' type='text/css'>
​
  </head>
  <body>
​
    <div id="container" class="container-fluid text-center">
      <h5 id='title' style="color: #3B3B3B;"></h5>
      <div class="col-sm-9">
         <div id="scatterPlot"> </div>
      </div>
      <div class="col-sm-3">
         <div id="scatterPlot_legend"> </div>
      </div>
      <div class="col-sm-3">
         <div id="controls">
         </div>
      </div>
    </div>
​
   <script src="scatterPlot.js"></script>
   <script src="scatterShot.js"></script>
​
  </body>
</html>
​
    

Updating Scatterplot using voroni diagrams for mouseover

reusable updating voroni scatterplot

Design based on original by NadiehBremer at Visual Cinnamon

See this block in production with Live Data

Find the Latest Code on GitHub

Features:

Accessors:

by default accessors with no parameters return current values

operations on data held in chart instance