Skip to main content
SimilarExport ZIP
100%

TP2

✓ Published0🌍 Public
SSeegson
Last edited Oct 3, 2022
Created on Sep 26, 2022
Forked from TP1_2

This example visualizes sales data from a CSV file using a bar chart rendered as SVG. It shows individual product IDs on the x-axis and their corresponding sales figures on the y-axis, with purple bars and axis labels. The visualization is built with D3 v5, using `csv`, `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to load the data and construct the chart. A tooltip appears on mouseover, displaying the sales value for each bar.

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…

TD2

This visualization presents a multi-chart dashboard for exploring sales data from a CSV file. It shows a bar chart of total sales by product category, a scatter plot of individual sales over time, and additional panels, with interactive tooltips and click-to-filter behavior. The code uses D3.js v6 (via `d3.rollup`, `scaleBand`, `scaleTime`, and `axisBottom`), Moment.js for date parsing, and animated transitions to update charts with a 1000ms duration. Data is loaded from `data.csv`, and all charts are rendered as SVG elements.

SSeegson
84% match
Loading thumbnail…

TD2

This visualization presents a multi-panel dashboard for exploring sales data from a CSV file. It displays several distinct plots, likely including bar charts and other summaries, within a grid layout. The implementation uses D3 v5 to load the data and render SVG graphics, leveraging scales and axes for plotting. The page is built with Vue and uses Moment.js for any date parsing, with tooltips providing interactivity for detailed values.

AAdrien
79% match
Loading thumbnail…

TEST2 - TD2 - dboard

This dashboard displays a bar chart of sales totals plotted against product sub-categories, using a dataset of individual orders. Each bar's height reflects the sales value for its sub-category, with the SVG canvas also showing rotated category labels on a time-series axis. The visualization is rendered via Vue using D3 v5, parsing data from a CSV file. Tooltips appear on hover, displaying the category and sales value, while the chart is drawn with `d3.scaleBand` and `d3.scaleLinear` for the axes.

MMaeva B
77% match
Loading thumbnail…

TP3_DataViz

This visualization displays a line chart of stock prices over time, with data loaded from an external CSV file. The chart uses an SVG-based D3.js v3 layout, employing a time-scaled x-axis and a linear y-axis to map date and price values. The line itself is drawn using `d3.svg.line`, while axes are generated with `d3.svg.axis` (implied by `d3.axisBottom` and `d3.axisLeft`). Although the code references an area path and dataset.json, the visible rendering is a simple black line, suggesting a minimal line chart focused on temporal price trends.

BBarbierJeremy
76% match
Loading thumbnail…

Fork of Making a barchart

This bar chart shows total sales by product category, using data loaded from a CSV file. The visualization is built with D3 v6 and rendered as SVG, applying linear scaling to sales values and band scaling to categories. It uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, with each rectangle’s height and width determined by the data values. The data is preprocessed by converting sales strings to numbers.

GGinnWG
76% match
Loading thumbnail…

Product Sales Bar Chart

This bar chart displays product sales figures from a CSV file, with each product’s sales value represented by a steelblue bar. The visualization uses D3.js to create an SVG, scaling the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`. Axis labels are rotated, and a title is added, all rendered via the D3 SVG API. Data is loaded asynchronously from a GitHub gist using `d3.csv`.

Aavvarijayakrishna99@gmail.com
75% match
Loading thumbnail…

TD2 new

This visualization presents a stacked bar chart that breaks down the number of orders by product category using the provided Superstore sales data. The chart displays three categories on the x-axis, with each bar segmented to show the proportions of different subgroups. Built with D3 v4 within a Vue framework, the code uses `d3.csv` to parse the data, `d3.stack()` to structure the stacked segments, and `d3.scaleBand` and `d3.scaleLinear` for positioning. The SVG output is rendered into a grid layout with four plot areas, though only the first plot is populated in this example.

GGinnWG
75% match
Loading thumbnail…

TD2 - dboard - Version prof

This dashboard displays sales data from a CSV file across four coordinated visualizations. It shows a geographic map of state-level sales using `d3.geoAlbersUsa` and `d3.geoPath`, an animated bar chart, a time-series scatter plot, and a donut chart of sub-category sales. The bar and scatter plots use transitioned axes, while the pie chart uses `d3.pie` and `d3.arc`. Built with D3 v6 and Vue, it renders SVG with tooltip interactions on hover.

MMaeva B
75% match