Python

100%

✓ Published0🌍 Public

Last edited Apr 26, 2024

Created on Apr 26, 2024

This example presents a curated collection of e-commerce visualizations, allowing users to switch between nine distinct charts showing new cases over time, orders by state, order status proportions, and pre- vs. post-COVID comparisons. Users select a chart via buttons, which dynamically replaces the displayed image or canvas. The code loads remote SVG files generated externally and uses Chart.js for canvas-based bar charts, while managing display visibility through JavaScript DOM manipulation.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Tableau

This interactive dashboard displays a collection of pre-rendered SVG charts covering COVID-19 statistics and e-commerce analytics. Users select a topic from a set of buttons, which loads corresponding SVG images hosted on GitHub. The interface uses HTML buttons with event listeners in JavaScript to toggle between chart displays, while Chart.js is loaded for potential canvas-based visualizations, though the primary interaction relies on swapping SVG image sources.

Ssannihitha.k23@gmail.com

79% match

Loading thumbnail…

Fork of WEBPAGE

This example is an interactive dashboard that presents a set of pre-rendered SVG charts, including a COVID-19 cases timeline, a scatter plot, a heatmap, and an orders comparison. Users select charts via buttons, which trigger the loading and display of external SVG files from a GitHub repository. The interface uses HTML, CSS, and vanilla JavaScript to manage button events and swap between a Chart.js bar chart rendered on a Canvas and the static SVG images. The chart views are designed for comparison and quick access, with a focus on switching between different data representations.

Ssannihitha.k23@gmail.com

73% match

Loading thumbnail…

Prjct1

This example demonstrates multiple D3.js visualizations of cleaned online order data, including a bar chart of order counts by state, a line chart tracking total sales over time, a histogram of order totals, and a status count breakdown. The code loads a CSV from GitHub using `d3.csv`, transforms the data with `d3.rollup` and `d3.sum`, and renders each chart as SVG. It uses D3 v7 scales, axes, and line/band generators, with hover effects on bars and custom labels for improved readability.

Ssannihitha.k23@gmail.com

71% match

Loading thumbnail…

project

This bar chart displays the number of e-commerce healthcare orders for each state, sorted from highest to lowest count. Built with D3 v6, it loads data from a GitHub gist via `d3.csv`, groups records by state, and renders the result as an SVG using `d3.scaleBand` and `d3.scaleLinear` for the axes and bars. The x-axis labels are rotated 45 degrees for readability.

Ssannihitha.k23@gmail.com

71% match

Loading thumbnail…

Prjct

This example presents four coordinated visualizations of order data, including a bar chart of order counts by state, a line chart of total sales over time, and a histogram of order totals. It uses D3.js v7 to load a CSV file from GitHub and render the charts as SVGs. The code employs D3's `rollup` function for grouping and aggregation, `scaleBand`, `scaleLinear`, and `scaleTime` for axes, and `bin` for histogram creation, with interactive hover effects applied to bars.

Ssannihitha.k23@gmail.com

71% match

Loading thumbnail…

project task1

A bar chart displays the number of e-commerce healthcare orders for each state, sorted in descending order to highlight the states with the highest order counts. The visualization uses D3 v6 to load a CSV dataset from a GitHub gist, roll up the records by state, and render an SVG with an X and Y axis. Data processing relies on `d3.rollups`, `d3.descending`, and scaling via `d3.scaleBand` and `d3.scaleLinear`, while the bars are created with `d3.selectAll(...).join("rect")`. State labels are rotated for readability on the axis.

Ssannihitha.k23@gmail.com

70% match

Loading thumbnail…

Online shopping rate in Covid-19 Pandemic

This example visualizes the rise in online shopping rates during the COVID-19 pandemic, showing a clear temporal trend of increased digital commerce. The visualization uses a line chart or similar time-series plot to display the rate over time, with the pandemic period highlighted to emphasize the surge. The code is built with JavaScript, specifically using the D3.js library for rendering the chart and handling data transformations. It loads data from an external source and plots it using SVG paths and axes, with the pandemic period marked to contextualize the spike in adoption.

Iillyyo

70% match

Loading thumbnail…

new shivsai

This example presents COVID-19 statistics through two coordinated D3 v7 visualizations: a pie chart and a bar chart. The pie chart breaks down global confirmed cases by WHO Region, while the bar chart displays confirmed cases per country. Both visualizations load data from the same CSV file using `d3.csv` and update interactively via mouseover tooltips showing detailed case counts. The charts use `d3.pie`, `d3.arc`, `d3.scaleBand`, and `d3.scaleLinear` to render SVG elements, with `d3.schemeCategory10` providing distinct colors for categorical data.

Vvikramkotlo9@gmail.com

70% match