<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
.0">
<
script
type
=
"text/javascript"
</
script
>
</
script
>
</
head
>
<
body
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
h3
style
=
"color:green"
>voronoi.extent()</
h3
>
<
script
>
d3.csv("data.csv", function(error, data){
var svg = d3.select("body")
.append("svg")
.attr("height", 400)
.attr("width", 400)
.append("g")
.attr("transform", "translate
(" + 20 + ", " + -20 + ")");
var y = d3.scaleLinear()
.domain([2, 20])
.range([400, 0]);
var x = d3.scaleLinear()
.domain([2, 15])
.range([0, 400]);
svg.append("g")
.call(d3.axisLeft(y));
svg.append("g")
.attr("transform", "translate(0, " + 400 + ")")
.call(d3.axisBottom(x));
var voronoi = d3.voronoi()
.x(function(d) { return x(d.x); });
voronoi.y(function(d) { return y(d.y); })
// Setting the extent using voronoi.extent() function
.extent([[0, 50], [250, 380]]);
svg.append("g").selectAll("path")
.data(voronoi(data).polygons())
.enter()
.append("path")
.attr("d", (d)=>{ return d ? ("M" + d.join("L") + "Z") : null; })
.attr("fill", "green")
.attr("stroke", "black");
});
// Data for CSV file
// x, y, group
// 45, 4.4, H
// 9.1, 4.4, H
// 9.9, 9.9, H
// 4.45, 9.6, H
// 4, 7.6, H
// 9, 45, H
// 4, 9.7, H
// 9.7, 4.7, H
// 9.9, 4.5, H
// 4, 4.5, H
// 7.9, 9, H
// 9.9, 45, H
// 9, 4.4, H
</
script
>
</
body
>
</
html
>