Skip to main content
SimilarExport ZIP
100%

Activity6_Task2

✓ Published0🌍 Public
Rrajeswariamruthabommaraju@my.unt.edu
Last edited Oct 24, 2024
Created on Oct 24, 2024
Forked from Hello VizHub

This example shows a stacked bar chart of employee projects handled and sales achieved, using data from a CSV file hosted on GitHub. The code loads D3 v6 via UNPKG and reads the remote CSV with `d3.csv`. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.stack` to create the stacked series. A color scale with `d3.scaleOrdinal` assigns distinct colors, while mouseover events log bar data to the console, and an extra blue rectangle is appended to the SVG as a rendering check.

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…

Activity6_Task2

A stacked bar chart displays sales totals for Clothing, Equipment, and Accessories across five named stores, using distinct colors for each category. The visualization relies on D3 v7’s `d3.stack()` to layer the data series, with `d3.scaleBand` positioning bars and `d3.scaleLinear` mapping values to the y-axis. SVG rectangles render each stack segment, while rotated bottom-axis labels and a custom HTML/CSS legend improve readability. The CSV data is embedded directly in the JavaScript, and the chart is generated entirely client-side.

Jjaswanthreddy2715@gmail.com
84% match
Loading thumbnail…

Activity6_Task2_Question_2

A stacked bar chart displays monthly sales totals for Electronics, Clothing, and Groceries across six months. Each bar segment represents a category’s contribution, with tooltips revealing exact values on hover and a color-coded legend identifying series. Using D3 v7, the visualization loads CSV data via `d3.csv`, constructs stacked series with `d3.stack()`, and renders SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Interactive tooltips appear through mouse events, while axes and legend are generated with `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal`.

Aadityatrip9899@gmail.com
83% match
Loading thumbnail…

Activity_6_task2_question-1

This example displays a stacked bar chart of employee churn, breaking down counts of "Yes" and "No" exits per department (Sales, IT, HR, Finance, Marketing). The horizontal bars use a diverging pink and blue color scale. Built with D3 v7, the code loads CSV data, applies `d3.rollup` to aggregate counts by department, and uses the `d3.stack` function to create the stacked layers. It renders as an SVG with a custom legend and axis labels.

11810vineeth@gmail.com
83% match
Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes quarterly sales across four product categories—Electronics, Clothing, Furniture, and Books—with each bar segment colored according to category and overall height reflecting total quarterly revenue. The visualization loads data from a CSV file using `d3.csv`, then applies `d3.stack()` to compute cumulative segment values, `d3.scaleBand()` for quarter positioning, `d3.scaleLinear()` for the y-axis, and `d3.scaleOrdinal()` for categorical colors. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while SVG rectangles represent each stacked segment, and a bold "Total Sales" label marks the highest y-value.

Kkeerthanachinthalapally@gmail.com
82% match
Loading thumbnail…

Fork of Activity6_Task2_q2_3

This stacked bar chart displays finance data over time, breaking down totals into Revenue, Expenses, and Profit segments. Each date shows three colored bars stacked vertically, with a red, blue, and green palette. The code uses d3.csv to load data from a GitHub-hosted Finance_data.csv file. It employs d3.stack() to structure the data, d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.axisBottom and d3.axisLeft to render the axes.

HHema Tummapala
82% match
Loading thumbnail…

Activity 6_Task 2 Q3

This stacked bar chart displays clothing sales across five stores, breaking down revenue into jeans, t-shirts, and shirts. Using D3 v7, the code loads data from a CSV file and applies the `d3.stack()` function to generate segments, with an ordinal color scale distinguishing product categories. Horizontal bars are rendered as SVG rectangles scaled by `d3.scaleLinear` for the x-axis and `d3.scaleBand` for store names. Interactive tooltips appear on mouseover, showing precise sales figures for each category per store.

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

Activity6_Task2_lets_go

A stacked bar chart displays the percentage distribution of letter grades (A through F) across six classes. The code uses D3 v7 with `d3.stack` and `d3.scaleOrdinal` to construct the visualization. Tooltips reveal exact percentages on mouseover via `d3.select` and HTML injection. The chart renders as SVG, sourcing data from a local CSV file, with custom margins and axes created through `d3.axisBottom` and `d3.axisLeft`.

Jjarethodges@gmail.com
81% match
Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes the distribution of sales percentages across four regions for five fruit products, using data from a CSV file. Each horizontal bar is segmented by region, with colors corresponding to a categorical color scale, and the x-axis measures percentage from 0 to 1. The visualization uses `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal` to render the axes and color encoding. Hovering over a segment triggers a tooltip that displays the precise sales percentage for that fruit and region, calculated via `d3.format`. The chart is rendered as an SVG using D3 v7.

Aamarnadhkari98@gmail.com
81% match