Skip to main content
SimilarExport ZIP
100%

Fork of Vanilla D3 Vibecoding Template

✓ Published0🌍 Public
Ssrinathkarumuru@my.unt.edu
Last edited Oct 5, 2025
Created on Oct 5, 2025

This interactive dashboard displays sales data loaded from a cleaned CSV file hosted on GitHub. It provides a dataset summary, a full HTML table of all rows, and an SVG bar chart showing total sales by region. Built with D3 v7, it uses `d3.csv` and `d3.autoType` for parsing, `d3.rollup` and `d3.sum` for aggregations, and `scaleBand`/`scaleLinear` with SVG `rect` elements for the chart.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This example presents a data-summary dashboard that loads a CSV file with d3.csv, displays basic row and column counts, and previews the first five rows in an HTML table. It also renders a simple bar chart of categorical counts as SVG. The code uses D3 v7 selection methods and d3.csv for asynchronous data loading, with data sourced from a public GitHub gist.

RRithvik
88% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

An area chart displays monthly sales data from a CSV file, with a monotone-smoothed line and translucent fill. The time series x-axis uses UTC date parsing and monthly tick formatting. Built with d3 v7, the chart constructs SVG output via the `areaChart` fluent API, `d3.scaleUtc`, `d3.axisBottom`, and `d3.curveMonotoneX`, rendering the data through d3.select and the charting function.

Ssuddala2001@gmail.com
86% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This example demonstrates a data summary and preview dashboard, loading a CSV of fictional individuals and presenting it through a card-based interface. It shows key dataset metrics like row and column counts, a preview table of the first five rows, and a bar chart visualizing categorical counts. The implementation uses d3.csv for data loading, D3 selections to dynamically build HTML elements for the summary and table, and an SVG bar chart for the visualization. The interface features a dark-themed, responsive layout with hover effects on table rows.

RRithvik
85% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive dashboard displays sports statistics from a CSV file, offering four switchable D3 v7 visualizations. A scatter plot compares athletes' goals or points against their assists, color-coded by sport, while a pie chart shows the proportional share of players per sport. Line and area charts plot matches played against goals or points, with the area chart filling the space beneath the line. All charts are rendered as SVG and include interactive tooltips on data points, using d3.csv for data loading and d3.rollups for aggregation.

Ssandyman2109@gmail.com
84% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This dashboard displays a summary of an e-scooter sales dataset, using D3.js v7 to load CSV data and populate stat cards with aggregate metrics like total units and revenue. A bar chart shows total units by region using `d3.rollup` and `d3.sum` with sorted descending bars. The visualization is rendered as SVG and features a dark-themed card layout with an inline scooter icon. Data is fetched from a remote Gist URL, and the page uses `d3.format` for number display.

LLokesh
82% match
Loading thumbnail…

Fork of Fork of D3 Starter

This visualization presents daily sales, revenue, and profit trends from a CSV dataset across two SVG charts. The first chart displays three overlaid time-series lines for each metric, with colored dots for each data point. The second combines bars for sales with a line for profit, using hover-triggered tooltips for interactivity. Built with D3 v7, it uses `d3.csv` for data loading, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` for path generation. Gridlines, axis labels, and a legend support readability.

Ssainishanthreddyk@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
81% match
Loading thumbnail…

Fork of HTML Starter

This D3.js v7 example summarizes a remote Retail Sales CSV dataset and visualizes the first ten records as a bar chart using `d3.scaleBand` and `d3.scaleLinear`. The page also renders two decorative SVG illustrations—a car and a smartphone—drawn with primitive shapes like `rect` and `circle`. The dashboard displays dataset statistics in a styled summary box and uses `d3.axisBottom` and `d3.axisLeft` for chart axes.

Vvijaysaichigullapally1@gmail.com
81% match