Skip to main content
SimilarExport ZIP
100%

Đồ Án Thực Hành

✓ Published0🌍 Public
Nnamkhang0807@gmail.com
Last edited Jan 5, 2024
Created on Jan 3, 2024
Forked from HTML Starter

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.

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

Đồ án thực hành

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

Nnamkhang0807@gmail.com
84% match
Loading thumbnail…

3D Bar Chart using D3.js

This example visualizes supermarket sales data as an interactive 3D bar chart, with each bar representing a city across multiple months. The visualization uses D3.js v5 for data loading and layout, combined with the d3-3d library to extrude bars into three dimensions, and X3DOM for WebGL rendering of the 3D scene. Sales figures are parsed from a CSV file via `d3.csv`, and the chart is created using `d3.x3d.chart.barChartMultiSeries()`, which manages axes and bar positioning in 3D space. The rendering approach leverages the d3-x3d bridge to convert D3 selections into X3D DOM elements for real-time interactivity.

SsreepavanKothapalli
69% match
Loading thumbnail…

Untitled

A stacked bar chart displays the distribution of sales across three product categories—Furniture, Office Supplies, and Technology—for each city in a Superstore dataset. Users select a customer segment from a dropdown menu and can toggle sorting by total sales or city order via a checkbox. Built with React and D3 v5, the visualization uses `d3.csv` to load data, `d3.stack()` to generate layered bars, and `d3.scaleBand` with `d3.scaleLinear` for axes. Smooth transitions animate changes with `transition.duration`, while labels show the total quantity per city.

SSarahKiyani
68% match
Loading thumbnail…

Untitled

A stacked bar chart displays the distribution of sales across three product categories—Furniture, Office Supplies, and Technology—for each city in a Superstore dataset. Users select a customer segment from a dropdown menu and can toggle sorting by total sales or city order via a checkbox. Built with React and D3 v5, the visualization uses `d3.csv` to load data, `d3.stack()` to generate layered bars, and `d3.scaleBand` with `d3.scaleLinear` for axes. Smooth transitions animate changes with `transition.duration`, while labels show the total quantity per city.

SSarahKiyani
68% 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
68% 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
67% 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
67% match