<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
property="viewport"
content="width=device-width,
initial-scale=1.0"/>
<title>GeeksforGeeks</title>
<!--Fetching from CDN of D3.js -->
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<div style="width:300px; height:300px;">
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
line.y();
</h2>
</center>
<svg width="300" height="300">
</svg>
</div>
<script>
// Selecting SVG and appending group tag
var svg = d3.select("svg")
.append("g")
.attr("transform",
"translate(80, -80)");
// Data for the CSV file
// year, population
// 110, 20
// 130, 25
// 135, 20
// 140, 25
// 180, 20
// Fetching data from CSV file
d3.csv("data.csv",
(data)=>{
// Setting domain and range of x-scale
var x = d3.scaleLinear()
.domain([100, 200])
.range([ 0, 200]);
// Appending x-axis
svg.append("g")
.attr("transform", "translate(0, 300)")
.call(d3.axisBottom(x));
svg.append("text")
.attr("transform", "translate(100, 340)")
.text("Year");
// Setting domain and range of y-scale
var y = d3.scaleLinear()
.domain([0, 100])
.range([ 200, 0 ]);
// Appending y-axis
svg.append("g")
.attr("transform", "translate(0, 100)")
.call(d3.axisLeft(y));
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -50)
.attr("x", -250)
.attr("dy", "1em")
.text("Population");
// Constructing line generator
var line=d3.line();
line.x(function(d) { return x(+d.year) });
// Using line.x() Function
line.y(function(d) { return y(+d.population) });
// Appending the path i.e the line
svg.append("path")
.datum(data)
.attr("stroke", "green")
.attr("stroke-width", "2")
.attr("fill", "none")
.attr("d", line)
.attr("transform", "translate(0, 80)");
});
</script>
</body>
</html>