<!DOCTYPE html>
<
html
>
<
head
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
h1
style
=
"color:green"
>
GeeksforGeeks
</
h1
>
<
script
>
// Import the CSV data for
// specifying the Voronoi
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));
// Using the d3.voronoi() function
// to create a Voronoi diagram
var voronoi = d3.voronoi()
.x(function (d) { return x(d.x); })
.y(function (d) { return y(d.y); })
.extent([[0, 0], [400, 400]]);
// Adding data to represent the Voronoi
// and displaying it
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");
});
</
script
>
</
body
>
</
html
>