Skip to main content
SimilarExport ZIP
100%

ICE-6-Prathima -coffee-Bar chart

✓ Published3🌍 Public
Ppilliprathimarani@my.unt.edu
Last edited Mar 20, 2024
Created on Mar 20, 2024

This bar chart visualizes the sales volume of different coffee shop menu items, with each bar representing a specific coffee type. The data is loaded from a remote CSV file via `d3.csv` and parsed to convert sales figures into numbers. Using D3.js v7, the chart applies `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, rendering bars as SVG rectangles. Axes are added with `d3.axisBottom` and `d3.axisLeft`, and the chart includes a title and axis labels. The x-axis labels are rotated for readability, and bars change color on hover.

AI-generated description
MIT Licensed

Similar vizzes

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
91% match
Loading thumbnail…

ICE6-Prathima-scatter plot

This scatter plot displays the relationship between the price and sales volume of various items, with each data point represented as a circle. The visualization uses D3.js version 7 to fetch data from a remote CSV file via `d3.csv`, then renders the chart as an SVG using `d3.scaleLinear` for both axes. Interactive tooltips appear on mouseover, displaying the item name, price, and sales volume. The axes are labeled and the chart includes a title, with styling applied through a separate CSS file.

Ppilliprathimarani@my.unt.edu
81% match
Loading thumbnail…

ICE-5-Prathima

This interactive data visualization presents a coffee shop menu as an SVG-based webpage. It shows a table of coffee and bakery items with their prices, which appears after a user types "Menu" into an input field. The page displays decorative coffee cup and star SVG graphics alongside the data. Using D3.js v7, the code loads a CSV file from a GitHub gist, then dynamically generates an HTML table from the parsed data. The visualization also provides a summary message indicating the dataset's row and column counts, rendered through D3's asynchronous data loading and DOM manipulation methods.

Ppilliprathimarani@my.unt.edu
81% match
Loading thumbnail…

Fork of ICE-5-Prathima-coffee

This interactive visualization displays a coffee shop menu with item details, initially hidden until a user types “Menu” into a text input and clicks Execute. Using D3 v7, the page fetches CSV data from a GitHub gist via `d3.csv`, then dynamically renders an SVG table populated with the dataset’s columns and rows. The interface also shows data summary information (file size, row and column counts) and features decorative inline SVG graphics, including coffee cups and stars, alongside styled HTML elements. The visualization combines DOM manipulation with pure D3 data loading to create a simple, command-driven table display.

Ppilliprathimarani@my.unt.edu
78% match
Loading thumbnail…

ICE-6

This bar chart displays sales data for various items, with horizontal bars showing the sale amount for each item. The visualization uses React and D3 v5, loading CSV data via `d3.csv` and rendering SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gridlines and axis labels are generated manually using `xScale.ticks()`, while the data values are encoded as rectangle widths.

HHARSHA BUDDANA
77% match
Loading thumbnail…

ICE6 Bar Plot

This example visualizes total sales for five items using a horizontal bar plot rendered as SVG. The React component fetches data from a CSV file via `d3.csv`, then uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. D3's axis utilities generate tick marks and labels for both scales. The bars themselves are plain SVG `<rect>` elements, with their widths proportional to the sales values, and the chart includes a title and loading state.

PPlatoch
76% match
Loading thumbnail…

ICE-6 Nithish Kumar

This horizontal bar chart displays the top cosmetic products by revenue, sourced from a CSV file. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map revenue values and product names, with SVG rectangles representing the bars. Axes are customized by removing domain lines and applying a tick formatter that converts large numbers to abbreviated units. The data is loaded via `d3.csv` and rendered with margins and labels for the title and x-axis.

NNithish Kumar
75% match
Loading thumbnail…

ICE-6

This bar chart displays total sales values by year, with each year’s revenue encoded as a bar’s height and a dollar-formatted y-axis for reference. Built with D3 v4, it loads CSV data from a GitHub gist via `d3.csv`, scales the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`, and renders SVG rectangles. Axis labels for “Year” and “Total Sales Value” are appended directly to the generated axes.

Kkartik900
75% match