Fork of

100%

✓ Published0🌍 Public

Last edited Apr 16, 2026

Created on Apr 16, 2026

This example presents a multi-page gallery of static data visualizations generated from a sample sales dataset. The bubble chart page displays a pre-rendered PNG image showing the relationship between sales and profit, with color encoding regions and bubble size representing customer count. The homepage links to additional static charts, including bar, area, and line charts, each presented as embedded images with explanatory text. The site uses plain HTML and CSS for layout and navigation, with no interactive JavaScript libraries such as D3.js present in the visible code.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This is a multi-page website demonstrating different chart types. The home page links to three separate HTML pages: a stacked and grouped bar chart, a stacked area chart, and a line chart with multiple lines. Each page displays static images of the visualizations, which are embedded via `<img>` tags and hosted from local desktop file paths. The site uses basic inline CSS for image sizing and borders, alongside a linked `style.css` file for typography and layout, creating a simple gallery of pre-rendered charts.

SSYAM TEJ

77% 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 is a multi-page dashboard for exploring a car dataset through different chart types. It uses static PNG images for visualizations, including scatter plots, stacked and grouped bar charts, a stacked area chart, and line charts. The charts are presented on separate HTML pages with CSS styling, all interacting with a provided dataset to show relationships between variables like present price, selling price, year, and fuel type. The charts function as clickable anchor links with a `transition` effect for navigation.

Kkarthikpavan1198@gmail.com

77% match

Loading thumbnail…

Fork of WEBPAGE

This example is an interactive dashboard that presents a set of pre-rendered SVG charts, including a COVID-19 cases timeline, a scatter plot, a heatmap, and an orders comparison. Users select charts via buttons, which trigger the loading and display of external SVG files from a GitHub repository. The interface uses HTML, CSS, and vanilla JavaScript to manage button events and swap between a Chart.js bar chart rendered on a Canvas and the static SVG images. The chart views are designed for comparison and quick access, with a focus on switching between different data representations.

Ssannihitha.k23@gmail.com

76% match

Loading thumbnail…

Fork of HTML Starter

This example presents a dashboard for customer data, featuring a summary of key statistics, a data table, and a prominent SVG visualization. Built with D3.js (d3 v7) and rendered as SVG, the page loads a CSV dataset from a GitHub gist and displays it within a polished, gradient-styled interface. The code uses standard DOM manipulation and D3's data-binding capabilities to populate the visual elements.

AAmrit Adhikari

75% match

Loading thumbnail…

Fork of Bubble Chart - Clustered with CSV import + Tooltip

This example demonstrates a clustered bubble chart with interactive tooltips, using sales data from a CSV file. It visualizes two facets of the data side-by-side: one chart sizes bubbles by "Total Profit" and another by "Total Cost", with each bubble labeled by country. The visualization uses D3 v7's `d3.pack()` layout algorithm to create the cluster arrangement, and implements custom tooltips via HTML elements that display country and profit or cost details on mouseover. The code employs D3's `d3.csv()` to import data from a remote gist, and renders resulting SVG circles and text labels within a React framework, with styling applied through CSS.

GGabriel Ing

75% match

Loading thumbnail…

Fork of Tidied up Bubble Chart

This bubble chart visualizes sales records by country, with circle size representing total profit and color encoding country. Each bubble displays its country name as a label. The visualization uses D3 v7's `d3.pack` layout and `d3.hierarchy` to calculate circle positions and sizes from the CSV data. Interactive tooltips appear on mouseover using HTML and D3 event handlers. A save button clones the SVG and downloads it as a file, preserving computed styles. Data is loaded via `d3.csv` from a gist URL, and the chart is rendered as an SVG in a React-based HTML page.

GGabriel Ing

75% match

Loading thumbnail…

Fork of React & D3 Starter

This chart displays monthly sales data from a CSV file as a light-blue area chart with a blue line overlay, using an SVG rendered in D3 v7 within a static HTML page. The x-axis uses a point scale for months, while the y-axis employs a linear scale for sales values. The code constructs the chart with `d3.area` and `d3.line` generators, and configures axes using `d3.axisBottom` and `d3.axisLeft`. It reads the data asynchronously with `d3.csv`, then applies margins and transforms to position the visualization.

Ppvvaishnavi93@gmail.com

74% match