Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Mmadalahyndavi123@gmail.com
Last edited Oct 19, 2025
Created on Oct 19, 2025
Forked from HTML Starter

This example demonstrates sales trends for two products and advertising spend across 150 monthly data points using Plotly's JavaScript API. It renders two interactive charts: a multi-series line chart tracking product sales and scaled ad spend, and a combined bar-and-line chart with dual axes comparing Product A sales against ad spend. The synthetic dataset is generated programmatically in `index.js` with trend, seasonality, and random noise components. Both charts use `Plotly.newPlot` with responsive layouts, unified hover mode, and customized axis styling.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a multi-series line chart comparing sales, profit, and expense data across 150 synthetic data points. The chart uses D3.js v7 to generate random values for each series, which are then plotted as three distinct colored lines using `d3.line()` and `d3.scaleLinear()` scales. The visualization includes axis labels, a title, and a manual legend, all rendered as SVG elements within a single `<svg>` container. The code explicitly handles margin calculations and applies `d3.axisBottom()` and `d3.axisLeft()` for axis generation.

Yyazneshpara2@gmail.com
80% match
Loading thumbnail…

Fork of HTML Starter

This chart shows the distribution of product sales across 100 products, using a bar chart to display each product’s sales amount. The visualization uses D3.js v7 to load the `product_sales.csv` data, with `d3.scaleBand` for the horizontal product axis and `d3.scaleLinear` for the vertical sales axis. Bars are rendered as SVG rectangles in steelblue, with rotated labels on the x-axis for readability. The axes are generated using `d3.axisBottom` and `d3.axisLeft`, and the chart includes axis labels for "Product Name" and "Sales Amount."

YYamini Malikireddy
78% 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
78% 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
77% match
Loading thumbnail…

Fork of 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.

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

Fork of HTML Starter

A bar chart displays product sales distribution across 100 products, with steelblue bars showing sales amounts for each product name. The visualization uses D3.js v7 to load CSV data via `d3.csv`, map products to an x-axis using `scaleBand`, and map sales values to a y-axis with `scaleLinear`. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with rotated x-axis labels, and section titles label the chart axes.

YYamini Malikireddy
76% match
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
76% 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
75% match