Skip to main content
SimilarExport ZIP
100%

Đồ án thực hành

✓ Published0🌍 Public
Nnamkhang0807@gmail.com
Last edited Dec 31, 2023
Created on Dec 29, 2023
Forked from HTML Starter

This dashboard displays ten interactive charts analyzing a supermarket sales dataset. It shows the average customer rating per city as a bar chart, and visualizes the percentage distribution of payment methods. Built with D3.js v4 and raw JavaScript, the code uses `d3.nest()`, `d3.scaleLinear()`, and `d3.scaleBand()` to aggregate and render data. The SVG charts include tooltips on mouseover, and data is loaded from CSV files like `supermarket_sales.csv` and `city.csv`.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Đồ án thực hành

The visualization presents a multi-question analysis of supermarket sales data, beginning with the average customer rating per city. It renders each question in its own bordered SVG panel on a responsive canvas, using a bar chart to compare ratings across Yangon, Naypyitaw, and Mandalay. The code loads four CSV datasets concurrently via a `d3.queue()` and processes them with `d3.nest()` and `d3.mean()`, then builds the chart using `d3.scaleLinear()`, `d3.scaleBand()`, `d3.axisBottom()`, and `d3.axisLeft()`. The interface is built with D3 v4 and React, using SVG for static displays and animation for interactive updates.

Dduytu0501@gmail.com
86% match
Loading thumbnail…

Đồ Án Thực Hành

This visualization presents a multi-question analysis of supermarket sales data, beginning with a bar chart that displays the average customer rating for each city (Yangon, Naypyitaw, and Mandalay). The D3.js v4 code loads data from CSV files, including `supermarket_sales.csv` and `city.csv`, and uses `d3.nest()` and `d3.mean()` to aggregate ratings. Interactive mouseover events change bar colors and display values, while SVG text elements label the chart axes. The entire layout is constructed using D3 selections and scales within a React framework.

Nnamkhang0807@gmail.com
84% match
Loading thumbnail…

dashboard

This dashboard presents a multi-panel data visualization built with Vue, using D3.js v5 to render SVG graphics with animation. It includes a bar plot displaying sales by category with hover tooltips, a scatterplot of randomly generated points, and additional plot areas within a grid layout. The bar chart reads from a CSV dataset of retail orders, applying D3 scales, axes, and transitions to update the visualization dynamically, while the scatterplot uses D3's scaleLinear and random data generation.

Llanphuonglenguyen
77% match
Loading thumbnail…

dboard

The dashboard displays four interactive charts—a bar chart, line chart, scatter plot, and pie chart—built from a Superstore sales dataset. It visualizes metrics like sales by category, order trends over time, and product performance. The visualization uses D3.js v5 for data binding and SVG rendering, with Moment.js for date parsing. A tooltip appears on hover to show detailed values, driven by D3 event handlers. The layout is managed through a CSS grid, and the code imports the `select` function from D3 to manipulate the DOM.

PPLD3508A
75% match
Loading thumbnail…

dboard

This dashboard displays sales data from the Superstore dataset across four synchronized views: a pie chart of sub-category sales, a bar chart for category totals, a scatter plot of individual orders by date and sales amount, and a geographic map of US regions. The visualization uses D3 v6 with `d3.pie`, `d3.arc`, `d3.scaleBand`, `d3.scaleTime`, and `d3.geoAlbersUsa` for the map projection. Data is loaded from a CSV file, and interactive tooltips appear on hover. SVG rendering with transitions updates the charts when data changes, while Moment.js parses date strings for the time axis.

TToky R
74% match
Loading thumbnail…

dboard

This dashboard presents a multi-panel visualization of Superstore sales data, showing a US map, bar chart, scatter plot, and pie chart. It uses D3.js v6 with SVG rendering and animations. The scatter plot maps product sales over time, colored by sub-category, while the pie chart displays sales distribution by sub-category with interactive tooltips. The visualization loads GeoJSON for the US map and CSV data for all charts, using `d3.geoPath` for the map and `d3.pie` for the donut chart.

PPLD3508A
73% match
Loading thumbnail…

dboard

The dashboard displays four synchronized visualizations of retail sales data from a CSV file: a US map with geographic projections, a bar chart, a scatter plot, and a pie chart. Built with Vue and D3 v6, it uses `d3.geoAlbersUsa` and `d3.geoPath` for the map, `d3.pie` and `d3.arc` for the pie, and `d3.scaleTime` for the scatter plot. All charts feature animated transitions and interactive tooltips showing customer and product details.

Ffkara09
73% match
Loading thumbnail…

Untitled

This example shows sales data for supermarket orders, broken down by city, with stacked bars representing categories like Furniture, Office Supplies, and Technology. A dropdown menu filters the display by customer segment, and a checkbox toggles between sorting bars by total sales or by city order. Built with React and D3 v5, it uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to render the SVG chart, with `transition` methods animating updates when filters change. The data comes from a CSV file containing individual order records.

Hhyejinid
73% match