Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Ssahithya.voleti@gmail.com
Last edited Apr 12, 2024
Created on Apr 12, 2024
Forked from HTML Starter

This area chart visualizes monthly grocery sales revenue using D3.js v6 with SVG rendering. It fetches CSV data from a GitHub Gist, then displays revenue trends across months with labeled axes and steelblue fill. The code employs D3's `scaleBand`, `scaleLinear`, `area`, and `axisBottom`/`axisLeft` APIs, with data converted to numeric values via unary plus operator.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of HTML Starter abc

This visualization presents electronics sales data over time using a line and area chart, with monthly values plotted along a categorical x-axis and a linear y-axis for sales figures. The render function uses d3’s scaleBand, scaleLinear, line, and area generators with curveBasis smoothing to draw the paths, while axisLeft and axisBottom add labeled axes with gridlines. The data is loaded asynchronously from a CSV file via d3.csv, and the chart is rendered inside an SVG element. The code also includes a separate scatterplot.js module with d3.scaleLinear for potential scatter plot rendering.

Aakshitha.rapala@gmail.com
86% match
Loading thumbnail…

Fork of HTML Starter

This example displays an area chart of programming language popularity, showing the number of users for each language. The chart is rendered as an SVG within an HTML page, using D3.js v6 to fetch a CSV file from a GitHub gist. The code constructs the visualization with `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, then applies the `d3.area` generator to create the filled area path. Axis labels are added using `d3.axisBottom` and `d3.axisLeft`. The data source is loaded via `d3.csv`, and the final SVG is styled with a steelblue fill.

Ssahithya.voleti@gmail.com
85% match
Loading thumbnail…

Fork of Fork of HTML Starter

This visualization displays sales figures for each state-category combination as vertical bars on an SVG chart. The code loads CSV data via d3.csv, computes scales with d3.scaleBand and d3.scaleLinear, and renders axes with d3.axisBottom and d3.axisLeft. Bars are drawn using SVG rect elements, with x-axis labels rotated for readability, and a bold "Sales" label annotates the y-axis.

Sson.sultan@yahoo.com
84% match
Loading thumbnail…

Fork of HTML Starter

This dashboard presents three dark-themed D3 v7 charts visualizing monthly sales and profit data embedded as CSV strings. A bar chart highlights peak sales with an annotated circle on a square root scale, while a scatter plot maps sales against profit using ordinal color encoding for each month. A multi-series chart combines bars for sales and a monotone line with circles for profit, using dual axes. All charts use SVG rendering with grid lines and rotated axis labels.

GGorantla Sravani
84% match
Loading thumbnail…

Fork of Fork of HTML Starter

A line chart visualizes cost data from 2000 to 2013, plotting expenses against time with a green line. The visualization uses D3 v5 to load CSV data, create time and linear scales, and render axes with custom tick styling. The chart highlights the upward trend in sales, with red axis labels and a bold title, set against a light blue background. The code employs d3.select, d3.csv, d3.scaleTime, d3.scaleLinear, and d3.line to construct the SVG-based chart.

NNandini Maddula
83% match
Loading thumbnail…

Fork of HTML Starter

This multi-series line chart displays three synthetic data streams—sales, profit, and expense—across 150 indexed points. The visualization uses D3 v7 to generate the data and render an SVG line chart with distinct colored lines for each series. The chart includes labeled axes for the index and value, a chart title, and a manual legend identifying each line. The code uses d3.range to create the data, and d3.scaleLinear, d3.line, d3.axisBottom, and d3.axisLeft to construct the visualization.

Ssaiabhishekmunnangi@gmail.com
82% match
Loading thumbnail…

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.

Ppriyapravallika44@gmail.com
82% match
Loading thumbnail…

Fork of Fork of Fork of D3 Starter

This visualization analyzes daily sales, revenue, and profit trends using two D3.js v7 SVG charts. A multi-series line chart displays all three metrics over time, while a combined chart overlays sales as bars with a profit line, both featuring custom tooltips and a styled interface using the Poppins font. The code loads CSV data via `d3.csv`, constructs scales with `d3.scaleTime` and `d3.scaleLinear`, and renders paths and bars with `d3.line` and `d3.axisBottom`, applying color-coded series and gridlines for readability.

Ssainishanthreddyk@gmail.com
82% match