HTML Starter_mohammed

100%

HTML Starter_mohammed

✓ Published0🌍 Public

Last edited Oct 6, 2025

Created on Oct 5, 2025

This example presents a dataset summary dashboard for DFW public library weekly visits in 2025, showing five key metrics in a dark-themed card layout. The visualization uses D3 v7 to load CSV data via `d3.csv`, calculates aggregate statistics with `d3.mean` and `d3.max`, and renders metric cards using `d3.select` with a data join. The SVG badge and styled metric cards are built with HTML and CSS, while the data-driven values update dynamically through D3's data binding.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

htmlq3

This dark-themed visualization displays a preview of the first five rows from a CSV file detailing weekly visits to Dallas-Fort Worth public libraries in 2025. It renders the data as an HTML table within a rounded card container, using D3.js v7 to fetch and parse the remote CSV via the `d3.csv` API. The code leverages D3's selection and join operations (`d3.select`, `.join`) to dynamically generate table headers and cells from the dataset's column names and row values, with alternating row striping for readability.

Mmodydxx@gmail.com

83% match

Loading thumbnail…

Fork of HTML Starter

This visualization presents a summary of a Texas coffee shop dataset, displaying key performance indicators for traffic, staffing, and revenue alongside a bar chart of total monthly revenue by city. The dark-themed interface uses D3.js v7 to load and parse CSV data from a GitHub Gist, calculating aggregates with d3.mean and d3.min. Cards display computed statistics, while an SVG bar chart renders the revenue comparison. The code demonstrates D3's data-loading capabilities, CSS styling for visual design, and programmatic selection and text assignment.

Ddineshsingiri18@gmail.com

77% 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

76% 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

75% match

Loading thumbnail…

Fork of HTML Starter

This example displays a library book dataset summary and a static SVG illustration. It fetches CSV data from a user-provided URL and uses D3.js version 7 to parse and analyze the columns, categorizing them as numeric or categorical and computing statistics like min, max, and mean. The summary section lists row and column counts, while a separate SVG image shows five basic shapes (rectangle, circle, polygon, line, and text), utilizing D3's `d3.csvParse` and aggregation functions.

Ppriyankachary1701@gmail.com

75% match

Loading thumbnail…

ice6_part1

A bar chart shows total weekly visits per public library from a DFW libraries dataset, with libraries sorted in descending order and bars colored red. The code uses D3 v7’s `d3.text`, `d3.csvParse`, and `d3.rollup` to load and aggregate the CSV data, then renders an SVG chart with `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. Data is sourced from a GitHub gist containing the 2025 weekly visits CSV.

Mmodydxx@gmail.com

75% match

Loading thumbnail…

Fork of HTML Starter

This dashboard displays 180 days of synthetic student performance data, presenting study hours, practice tests, and scores. One card shows a multi-series line chart with dual y-axes, plotting study hours and practice tests on the left and score on the right, using `d3.scaleLinear` and `d3.line`. A second card combines a bar chart of practice tests with a line for average score, using `d3.select`, `d3.append`, and `d3.scaleTime`. The data is generated client-side with a seeded random number generator and a downloadable CSV is provided via a custom `toCSV` function.

SSYAM TEJ

75% match

Loading thumbnail…

Fork of HTML Starter

This dashboard displays AI model data through an interactive bar chart, with summary cards showing the total rows, minimum, average, and maximum values of the selected metric. Users can switch between Parameters (Billions) and Release Year via the metric selector. The visualization uses d3.scaleBand and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for rendering, and animated transitions on bar height. Data loads from a CSV file via d3.csv. Tooltips appear on bar hover, and decorative circles and a legend enhance the SVG output.

YYamini Malikireddy

75% match