block by micahstubbs ac0faf07e5c83e97003b5a45e437e767

Voronoi clipCells() end[1] null Example II

Full Screen

a minimal example to reproduce the Cannot read property '0' of null in clipCells() error message described in d3-voronoi github issue 16

the code for the d3-voronoi-scatterplot chart plugin is at https://github.com/micahstubbs/d3-voronoi-scatterplot

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
<title>Scatterplot with Distance-Limited Voronoi</title>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.js'></script>
<script src='d3-voronoi-scatterplot.js'></script>
<link href='//fonts.googleapis.com/css?family=Open+Sans:700,400,300' rel='stylesheet' type='text/css'>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style>
  body {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #525252;
    text-align: center;
  }
  html, body { 
    width:auto; 
    height:auto; 
  }
  .axis path,
  .axis line {
    fill: none;
    stroke: #B3B3B3;
    shape-rendering: crispEdges;
  }
  .axis text {
    font-size: 10px;
    fill: #6B6B6B;
  }
</style>
</head>
<body>
<div>
  <div id='chart'></div>
</div>
<script>
  d3.csv('data.csv', function (error, data) {
    var tooltipColumns = [
      {
        name: 'x',
        type: 'numeric',
        format: ',.4f'
      },
      {
        name: 'y',
        type: 'numeric',
        format: ',.4f'
      }
    ];

    var numericColumns = [
      'x',
      'y'
    ];

    var marks = {
      r: 2,
      fillOpacity: 0.3,
      colors: [
        '#1f78b4',
        '#ff7f00',
        '#33a02c',
        '#e31a1c',
        '#6a3d9a',
        '#b15928',
        '#a6cee3',
        '#fdbf6f',
        '#b2df8a',
        '#fb9a99',
        '#cab2d6',
        '#ffff99'
      ]
    };

    var categoricalColumns = [];

    var options = {
      width: 960,
      xVariable: 'x',
      yVariable: 'y',
      idVariable: undefined,
      tooltipColumns,
      numericColumns,
      xLabelDetail: undefined,
      wrapperId: 'voronoiExample',
      wrapperLabel: 'Voronoi clipCells() end[1] null Example',
      dependent: true,
      globalExtents: undefined,
      marks,
      categoricalColumns
    }

    d3VoronoiScatterplot.drawVoronoiScatterplot('#chart', data, options);
  })
</script>
</body>
</html>