Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Oct 5, 2025

Created on Oct 5, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Coffee shops dataset

This visualization presents a dashboard summary of a Texas coffee shop dataset, displaying key performance indicators in a card layout and a bar chart of total monthly revenue by city. The page uses D3 v7 to load data from a raw CSV file hosted on GitHub Gist, computing aggregate statistics like average customers and employee counts. Custom CSS variables establish a dark theme with accent colors, while D3's SVG rendering generates the responsive bar chart with styled axes and gridlines.

Ddineshsingiri18@gmail.com

88% match

Loading thumbnail…

Coffee shops

This visualization presents summary statistics for a Texas coffee shop dataset. It displays key performance indicators like average daily customers, employees, and monthly revenue, alongside a bar chart showing total monthly revenue by city. The page loads data from a raw CSV file hosted on GitHub Gist using `d3.csv` and builds its UI with D3's selection and DOM manipulation methods. The chart is rendered as SVG, with styling handled by CSS custom properties and layout achieved through a responsive CSS grid.

Ddineshsingiri18@gmail.com

85% match

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This D3.js visualization loads a coffee sales CSV file and displays summary statistics about the dataset on a styled web page. It fetches the remote CSV using the Fetch API, parses it with `d3.csvParse`, and then calculates and displays the file size, row count, and column count in a dedicated summary box. The page also renders a static SVG circle graphic with D3 Data text, combining data loading and parsing with basic stat reporting.

Ssravya7136@gmail.com

82% match

Loading thumbnail…

Fork of HTML Starter

A dark-themed dashboard loads a local CSV file via D3 v7, summarizes the data into three key performance indicators, and renders a bar chart of a selected numeric column. The SVG visualization uses D3 scales, axes, and a linear gradient fill for the bars. The page includes a file picker, controls for selecting columns, and a fixed 420-pixel chart area.

MManeesh Kumar

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

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

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

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

79% match