Fork of Scatter plot for Electronics sale

Scatter plot for Electronics sale

This scatter plot displays monthly electronics sales figures as teal circles, with months on the x-axis and sales values on the y-axis. Built with D3 v6, the reusable chart function (using a closure pattern) renders an SVG, employs `d3.scaleBand` for the categorical month axis, and `d3.scaleLinear` for the sales scale. The code defines a reusable scatter plot builder with settable width, height, data, and axis labels, though the visible example is static with six months of sales data.

93% match

Fork of Line chart for electronics sales

This fork shows monthly electronics sales from January through June, with a steel-blue line tracing sales figures that peak in June. The chart uses D3.js v6 to render an SVG path via the line generator, with point and linear scales mapping months and dollar amounts. Axis labels are added using d3.axisBottom and d3.axisLeft, while a fixed dataset is defined inline in the script.

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes monthly sales data across product categories. The chart uses D3’s `scaleOrdinal` and `scaleLinear` to map months and sales values to SVG circle positions, with a color scale distinguishing six categories. An axis and legend are rendered via `axisBottom`, `axisLeft`, and appended SVG elements. The code samples data from a static array, demonstrating a reusable `scatterPlot` function with configurable accessors and margins.

Fork of Fork of Reusable D3 Scatter Plot

This scatter plot displays monthly sales figures across six retail categories, with each circle’s horizontal position encoding the month, vertical position encoding sales amount, and color distinguishing product types. The visualization uses a reusable custom D3 module that employs `scaleOrdinal` for the categorical x-axis and legend colors, `scaleLinear` for the sales axis, and `axisLeft`/`axisBottom` for tick labels. The SVG output is generated from hardcoded data via the provided `index.js` and `scatterPlot.js` files.

UUday Kiran

Fork of Area chart for electronics sale

This area chart displays electronics sales figures across six months, from January through June, with a semi-transparent steel-blue filled region bounded by a dark-blue line. The SVG visualization uses D3 v6 scales and generators, including `d3.scalePoint` for the month axis, `d3.scaleLinear` for the sales axis, and `d3.area` and `d3.line` to produce the filled and stroked paths. Axis labels for "Month" and "Sales ($)" are added via `d3.axisBottom` and `d3.axisLeft`, with styling applied through CSS classes. Sales data is hardcoded in the script, with values ranging from 49,000 to 57,000 dollars.

Area chart for electronics sale

This area chart displays electronics sales figures across six months, from January through June, with a semi-transparent blue fill and a darker boundary line. The visualization uses D3.js v6 with SVG rendering, employing `d3.scalePoint` for the month-based x-axis and `d3.scaleLinear` for the sales values on the y-axis. The area and line paths are generated using the `d3.area()` and `d3.line()` generators, while axes are created with `d3.axisBottom` and `d3.axisLeft`. Sales data comes from a hardcoded array with monthly dollar amounts.

81% match

Fork of pie chart for monthly sales

A fork of a pie chart displays six monthly sales snapshots, each broken into category shares (electronics, clothing, groceries, furniture, toys, books) with slice labels and a legend. The D3.js v6 code flattens monthly objects, applies a d3.pie layout and d3.arc generators to draw SVG paths, and uses d3.scaleOrdinal with schemeCategory10 for colors. Each month’s chart is offset vertically, with text labels positioned via labelArc.centroid, and data is hardcoded in the script.

80% match

Line chart for electronics sales

This line chart displays electronics sales over six months, from January to June, with monthly sales values ranging between $49,000 and $57,000. A single steelblue line connects the data points, plotted using d3.line with a point scale for months on the x-axis and a linear scale for sales on the y-axis. The visualization, rendered as an SVG, includes labeled axes for month and sales amount, with data hardcoded in the script rather than loaded externally. Axis ticks are generated via d3.axisBottom and d3.axisLeft.