Skip to main content
SimilarExport ZIP
100%

Activity_7 Q2

✓ Published0🌍 Public
Kkesava
Last edited Nov 7, 2024
Created on Nov 6, 2024
Forked from Hello VizHub

This area chart displays supermarket sales totals aggregated by product line, using a steelblue filled path to show the distribution of revenue across six product categories. The visualization loads data from a remote CSV file and processes it with d3.rollups to sum the Total field for each product line, then sorts the categories alphabetically. The chart uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.area to generate the path, with d3.axisBottom and d3.axisLeft providing labeled axes.

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…

Activity_7 Q2

This area chart visualizes monthly sales data over time, with a light blue filled region beneath a steel-blue line. The visualization loads a CSV dataset from a GitHub repository and uses D3.js v7 to parse dates and render the SVG chart. It employs `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and a `d3.area` generator to create the shaded region. The chart includes labeled axes for month and sales values.

Aaschowdary.shashi@gmail.com
84% match
Loading thumbnail…

Activity7_2

This area chart visualizes monthly sales data loaded from a remote CSV file. The chart plots sales figures against months, with the area beneath the line filled in steel blue. It is rendered as an SVG using D3.js v7, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis. The area shape is generated with the `d3.area` API, and axes are added using `d3.axisBottom` and `d3.axisLeft`. Axis labels for "Month" and "Sales" are included.

Ssivachandraramanaidu.vnof52@gmail.com
83% match
Loading thumbnail…

Activity_7 Q_2

This area chart visualizes monthly sales data across twelve months, with a smooth monotone curve filling the region beneath the line in steel blue. The SVG chart uses d3.scalePoint for the categorical month axis and d3.scaleLinear for the sales values. The d3.area generator with curveMonotoneX creates the filled path, while d3.axisBottom and d3.axisLeft render the labeled axes. The dataset is hardcoded in the script, and the visualization is rendered entirely with D3 v7 in an SVG container.

Bbhavya.kanyadara@gmail.com
83% match
Loading thumbnail…

Activity_7_2

This example displays an area chart of monthly sales data, using a steel blue filled path to show the trend across categories. It loads data from a CSV file hosted on GitHub and renders the visualization as an SVG. The code uses D3.v7’s `scaleBand`, `scaleLinear`, `area` generator, and axis functions to construct the plot, including an axis label for months and sales, plus a simple legend indicating the series.

Gguruabhay294@gmail.com
81% match
Loading thumbnail…

Activity 7 Q2

This area chart visualizes expense amounts by subcategory, drawing from a remote CSV dataset. The visualization combines a semi-transparent steelblue area with an overlaid steelblue line to show trends. Built with D3 v6, it uses `d3.scalePoint` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and `d3.area` and `d3.line` generators to create the paths. The SVG output includes rotated x-axis labels and axis labels, with data loaded via `d3.csv`.

Vvishnutejareddyambati@my.unt.edu
81% match
Loading thumbnail…

Area chart for electronic sales

This area chart displays total sales across product categories, using a steel-blue filled region beneath a line to emphasize the magnitude of sales for each category. The visualization is built with D3.js v7 and rendered as an SVG. It loads CSV data via `d3.csv`, converts the sales strings to numbers, and uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. The area and line paths are drawn with `d3.area` and `d3.line`, respectively, and axes are labeled using `d3.axisBottom` and `d3.axisLeft`.

Ssreeramyamini@gmail.com
81% match
Loading thumbnail…

Activity-6_Task2(q)

This stacked bar chart shows monthly sales totals for five product categories—Electronics, Clothing, Furniture, Groceries, and Books—across January, February, and March. The data is loaded from a CSV file and rendered as SVG using D3 v7. The visualization uses `d3.stack()` to aggregate the three month values per category, with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. A color scale distinguishes the months, and a legend in the top-right corner labels each segment.

Aaravapalliharika2002@gmail.com
81% match
Loading thumbnail…

Activity_6_Q2

This example visualizes sales distribution across product categories using a stacked horizontal bar chart. Each bar represents a category from a CSV file, segmented by price ranges (less than 100 to above 400) as percentages. The code uses d3.stack() to compute stacked series, d3.scaleBand for the y-axis categories, and d3.scaleLinear for the x-axis percentages, rendered as SVG rectangles. Interactive tooltips appear on mouseover, displaying the exact percentage for each segment. The visualization employs d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal with a custom color palette.

Mmudunurirahulvarma98@gmail.com
81% match