<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
meta
property
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
.0"/>
<
title
>GeeksforGeeks</
title
>
<
script
src
=
</
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
>