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