Coffee shops

100%

✓ Published0🌍 Public

Last edited Oct 6, 2025

Created on Oct 5, 2025

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.

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

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

85% match

Loading thumbnail…

Star Break Coffee

Star Break Coffee displays monthly revenue and profit for a coffee chain using a static bar chart. Data from data.csv is mapped to SVG rectangles via d3.scaleBand, d3.scaleLinear, axisBottom, and axisLeft. The chart features dark blue axis labels, grey bars that turn green on mouseover via d3.select and transition, and uses Bootstrap for layout.

MMerceEscalante

72% match

Loading thumbnail…

sclatterplot

This scatter plot visualizes coffee sales quantities over time, with each circle representing a daily sale. The chart maps dates along the x-axis and sales quantities on the y-axis, making it easy to spot trends and outliers in the data. Built with D3.js v7 using an SVG rendering approach, the visualization loads a CSV file containing the sales records and applies the `scaleBand` and `scaleLinear` methods for axes positioning. The circles are styled with a steelblue fill and black stroke, while the x-axis labels are rotated for readability.

GGorantla Vishnusai

71% match

Loading thumbnail…

Fork of Question 2

This chart shows daily coffee sales quantities as a vertical bar chart, with dates on the x-axis and sales quantity on the y-axis. The code loads CSV data via `d3.csv`, parses the Quantity field into numbers, and renders bars using `d3.scaleBand` and `d3.scaleLinear`. It appends SVG rectangles, styled with a steelblue fill, and adds axes using `d3.axisBottom` and `d3.axisLeft`. The x-axis labels are rotated for readability. The visualization relies on D3 v7 and renders entirely in SVG.

GGorantla Vishnusai

70% match

Loading thumbnail…

Ice-6

A bar chart displays the sales of various coffee products from a CSV dataset. It uses D3.js v3, loading data with `d3.csv` and rendering the chart with SVG. The x-axis uses `d3.scaleBand` for product categories, while the y-axis uses `d3.scaleLinear` for sales values. Bars are drawn as `rect` elements filled with steelblue and labeled with rotated text on the bottom axis. The visualization directly shows comparative sales figures across the coffee product lineup.

GGorantla Vishnusai

70% match

Loading thumbnail…

Html_VizHub

This example shows a web page that summarizes a curated CSV dataset of global coffee varieties. It presents a text-based dashboard displaying the total number of coffee types, the file size of the source data, and the dataset's row and column counts. The page loads its data from a GitHub Gist via a `fetch` request, parses the CSV using `d3.csvParse`, and then injects the calculated statistics into the HTML. The presentation uses custom CSS for a coffee-themed color scheme and includes a hand-drawn SVG coffee mug icon.

Sshaikfayazfz64@gmail.com

70% match

Loading thumbnail…

Fork of ICE-6-Prathima -coffee

This bar chart visualizes sales volumes for different coffee menu items, displaying each beverage name along the x-axis and its corresponding sales quantity on the y-axis. The visualization uses D3 v7’s `d3.csv` to load data from a GitHub gist, then applies `d3.scaleBand` and `d3.scaleLinear` to map categories and values. Bars are rendered as SVG rectangles with a steelblue fill, and axes include rotated labels using `d3.axisBottom` and `d3.axisLeft`.

Kkotlavamsireddy@gmail.com

70% match