//Importing the required libraries import { select, csv,
scalePoint, // Changed from scaleTime to scalePoint
scaleLinear, max, axisLeft, axisBottom, line, } from 'd3';
// Rendering svg tag from HTML const svg = select('svg');
const width = +svg.attr('width'); const height =
+svg.attr('height'); // Creating Line graph const render =
(data) => { // Declaring constants we are using const title
= 'Monthly Sales of Electronics in 2023'; const xValue = (d)
=> d.Month; // Display dates on x axis const xAxisLabel =
'Month'; const yValue = (d) => d.ElectronicsSales; //
Display sales value on y axis const yAxisLabel =
'Electronics Sales'; const margin = { top: 60, right: 40,
bottom: 88, left: 150, }; const innerWidth = width -
margin.left - margin.right; const innerHeight = height -
margin.top - margin.bottom; // Center g in svg const g = svg
.append('g') .attr( 'transform',
`translate(${margin.left},${margin.top})`, ); // Create X
scale with month names const xScale = scalePoint()
.domain(data.map(xValue)) // Use month names directly
.range([0, innerWidth]) .padding(0); // Provides padding
between points // Creating xAxis const xAxis =
axisBottom(xScale) .tickSize(-innerHeight) .tickPadding(15);
// Create Y scale with sales values const yScale =
scaleLinear() .domain([0, max(data, yValue)])
.range([innerHeight, 0]) .nice(); // Creating yAxis const
yAxis = axisLeft(yScale) .tickSize(-innerWidth)
.tickPadding(10); // Appending Y axis label to svg const
yAxisG = g.append('g').call(yAxis);
yAxisG.selectAll('.domain').remove(); yAxisG .append('text')
.attr('class', 'axis-label') .attr('y', -90) .attr('x',
-innerHeight / 3) .attr('fill', 'black') .attr('transform',
`rotate(-90)`) .text(yAxisLabel); // Appending X axis label
to svg const xAxisG = g .append('g') .call(xAxis)
.attr('transform', `translate(0,${innerHeight})`);
xAxisG.select('.domain').remove(); xAxisG .append('text')
.attr('class', 'axis-label') .attr('y', 70) .attr('x',
innerWidth / 2) .attr('fill', 'black') .text(xAxisLabel); //
Creating line graphs between x and y axis const
lineGenerator = line() .x((d) => xScale(xValue(d))) .y((d)
=> yScale(yValue(d))); // Coordinates in pixels // Appending
line graph to svg g.append('path') .attr('class',
'line_path') .attr('d', lineGenerator(data)); // Appending
title of graph to svg g.append('text') .attr('class',
'title') .attr('y', -10) .text(title); }; // Loading data
from URI csv(
'https://gist.githubusercontent.com/Akshitha-Rapala/2a6804121ef1c8aaafc98541e935f327/raw/c26cca755b92c66c3cab552fb5e255a3652ce9d2/ElectronicsSales.csv',
).then((data) => { data.forEach((d) => { d.ElectronicsSales
= +d.ElectronicsSales; // No need to convert month names to
Date objects }); render(data); });