//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); });