Skip to main content
SimilarExport ZIP
100%

Activity 7-Q 2

✓ Published0🌍 Public
Ttallapanenisahithi@gmail.com
Last edited Nov 6, 2024
Created on Nov 6, 2024
Forked from Activity 7-Q 1

This stacked area chart visualizes monthly sales volumes across eight chocolate types—including Dark, Milk, White, Ruby, Vegan, Caramel, Hazelnut, and Almond—using a color-coded legend. The visualization loads CSV data from a GitHub repository via `d3.csv`, then applies `d3.stack` with `.keys` and `d3.area` to generate layered SVG paths. It scales the x-axis with `d3.scaleBand` for months and the y-axis with `d3.scaleLinear` for total counts, while `d3.axisBottom` and `d3.axisLeft` render the 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 & Q2 Area chart for Chocolate Sales

This area chart visualizes chocolate sales by plotting boxes shipped over time using D3.js. The visualization loads CSV data from a GitHub gist, parses dates and numeric values, and renders a filled brown area to show the sales trend. It uses `d3.area` to generate the area path, with `scaleTime` and `scaleLinear` for the axes, and `axisBottom`/`axisLeft` for tick marks. The chart includes labeled x and y axes plus a descriptive title, with SVG rendering sized to the browser window.

Ddivya.matavalam828@gmail.com
85% match
Loading thumbnail…

Activity 7-Q 1

This example displays the distribution of chocolate sales percentages across eight chocolate types using a pie chart with a manually constructed legend and axis labels. It loads sales data from a remote CSV file and renders the chart as an SVG using D3 v6. The code uses `d3.csv` to fetch data, `d3.pie` to compute arc angles, `d3.arc` to generate SVG paths, and `d3.scaleOrdinal` to assign colors to each chocolate type. A static legend lists each type alongside its percentage, while text labels are placed at arc centroids.

Ttallapanenisahithi@gmail.com
85% match
Loading thumbnail…

Activity6_Task2 - Q2 (3)

This stacked bar chart shows chocolate sales (in units) across five regions for six chocolate types, with sales values accessible via interactive tooltips on mouseover. It uses D3.js v7 with SVG rendering, loading data from a CSV file. The chart employs `d3.stack` for stacking, `d3.scaleOrdinal` for color assignment, and `d3.axisBottom`/`d3.axisLeft` for axes. A manually drawn legend and CSS-styled tooltips enhance interactivity, while region colors follow `d3.schemeSet2`.

Nnavyabade05@gmail.com
84% match
Loading thumbnail…

Activity - 7_Question - 2

This area chart displays monthly sales data over time, with the date on the x-axis and sales figures on the y-axis. The visualization loads CSV data from a GitHub Gist, parses date strings using `d3.timeParse`, and renders a filled area path with a steelblue color. The chart uses `d3.scaleTime` and `d3.scaleLinear` for axis scaling, `d3.area` for the area generator, and `d3.axisBottom`/`d3.axisLeft` to draw the axes, all within an SVG container.

Mmalisettisaisumanth@gmail.com
81% match
Loading thumbnail…

Activity 7 Question 1

This area chart displays monthly sales figures, using a filled path to emphasize the trend over time. Built with D3 v7, the visualization maps categorical month labels to the x-axis via `scalePoint` and a linear scale for sales values on the y-axis. The code fetches CSV data from a GitHub gist and renders the area with a steel-blue fill, adding labeled axes for clarity. The SVG output is generated programmatically through D3’s `area` generator and standard axis functions.

MMahimaChowdaryKasthala@my.unt.edu
81% match
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
81% match
Loading thumbnail…

Activity 7 question 2

This example demonstrates a stacked area chart that visualizes fruit quantities across years. The visualization uses D3.js v7 to load CSV data from a GitHub repository and render the stacked areas with a categorical color scheme. The code employs D3's `d3.stack()`, `d3.area()`, `d3.scaleBand()`, and `d3.scaleLinear()` APIs to construct the chart, along with `d3.axisBottom()` and `d3.axisLeft()` for axes. The SVG output is styled with semi-transparent areas and labeled axes for year and fruit quantity.

SSowjanya Devupalli
81% match
Loading thumbnail…

Activity6-Question2

This visualization shows quarterly sales data for product categories using a stacked horizontal bar chart. Each bar segment represents a quarter’s sales contribution, with an interactive tooltip displaying the specific category and sales amount on mouseover. The example demonstrates D3 v7’s `d3.stack` for data shaping, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for rendering. Data comes from an inline CSV file loaded via `d3.csv`, and the chart is rendered as SVG with a custom legend.

SSaiKiranReddyKancharla@my.unt.edu
80% match