ICE-5-Prathima

Last edited Mar 7, 2024

Created on Mar 6, 2024

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.

AI-generated description

I gave details of Coffee shop

which contains different varieties of coffees available in a cafe and also some bakery items and their prices added styles also.

once the project is executed it will show a option to enter some input in that if we give the word "Menu" as input and click on execute it will display all the dataset content.

MIT Licensed

Similar vizzes

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.

94% match

ICE-6-Prathima -coffee-Bar chart

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.

81% match

Kkotlavamsireddy@gmail.com

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`.

77% match

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.

72% match

ICE-5 Scientific Data Visualization

This example displays a simple web page titled "ICE-5 Scientific Data Visualization." It loads a CSV file from a GitHub gist using the D3.js library's `d3.csv` function, then shows the file's size, row count, and column count in a `<pre>` element. Below that, it displays an SVG star image using an `<img>` tag. The page’s styling is set via CSS in `index.css`, and the code runs in a React framework with D3 v7.

Ddivyageethanjali

ICE-5 Dhanusree Kodali

This web page presents an interactive online order system interface. It displays a title, welcome message, and a home appliance SVG image, all styled with custom CSS for colors and layout. The visualization leverages an embedded SVG with a base64-encoded JPEG image pattern, while the system uses D3.v5 for potential data manipulation, with the page structure built using React.

DDhanusree Kodali

ICE7 Reusable Scatter

This interactive scatter plot uses D3 v6 to visualize restaurant menu data, showing Total Sales against Orders Count with points colored by Menu Category. The visualization animates the X-axis, periodically toggling between Orders Count and Stock Availability using setInterval. Built with React-compatible reusable chart components, the example imports scatterPlot.js and the d3 csv, scaleLinear, axisLeft, and axisBottom APIs. SVG circles render with custom colors for Main Course, Beverages, Desserts, and Appetizers, alongside a manually constructed legend and axis labels.

MMahendraGullinkala

ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and summarize a CSV dataset using D3.js. It fetches data from a remote gist-hosted text file via `d3.csv` and displays the calculated file size in kilobytes, total row count, and column count in a styled HTML `<pre>` element. The page also includes three static restaurant-related images. The visualization uses a React framework with SVG rendering and relies on the D3 v7 API for data parsing and formatting.

Aavinashchinta99