Skip to main content
SimilarExport ZIP
100%

task2_q1

✓ Published0🌍 Public
Bbadiniswetha@gmail.com
Last edited Apr 6, 2025
Created on Apr 4, 2025
Forked from Hello VizHub

This stacked bar chart shows agricultural trade data for Afghanistan from 2014 to 2018, displaying Import, Export, Production, and Consumption values per year. Each bar segment represents one category, with colors distinguishing the four metrics. The visualization uses D3.js v7 with `d3.stack()` to compute the stacked series, `d3.scaleBand()` for the x-axis years, and `d3.scaleLinear()` for the y-axis values. Data is hardcoded in the script rather than loaded from the accompanying CSV file. The chart renders as SVG with axis generators `d3.axisBottom()` and `d3.axisLeft()`.

AI-generated description

D3.js Stacked Bar Chart - Agricultural Data

Overview

This project visualizes agricultural trade data using a stacked bar chart created with D3.js.

Files

  • index.html - Main file containing the D3.js visualization.
  • style.css - Styles for the visualization.
  • README.md - Instructions on how to use the project.
  • Export.csv - The dataset (source file).

Setup & Usage

  1. Open index.html in a web browser.
  2. The stacked bar chart will display Import, Export, Production, and Consumption over the years.
  3. The colors represent different categories:
    • Blue: Import
    • Orange: Export
    • Green: Production
    • Red: Consumption

Dependencies

  • D3.js (included via CDN)

Customization

  • Modify the data array in index.html to use a different dataset.
  • Update style.css to change the chart appearance.

Preview

Stacked Bar Chart (Add a screenshot here)

License

This project is free to use and modify.

Enjoy exploring data with D3.js! 🚀

MIT Licensed

Similar vizzes

Loading thumbnail…

Task_8_Q2

A stacked bar chart displays population totals for ten countries across six years, from 2015 to 2020, using data from a CSV file. Each bar is segmented by year, with colors from `d3.schemeCategory10` and a legend indicating the year mapping. The chart uses `d3.stack()` to compute the stacked series, `d3.scaleBand` for the categorical x-axis, and `d3.scaleLinear` for the y-axis, rendering with SVG rectangles.

DDipesh
71% 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
70% 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
69% match
Loading thumbnail…

Activity 6_Question 2

This stacked bar chart visualizes sales figures for Grocery, Appliances, and Toys across three years (2018–2020), with each bar segment colored by category. Built with D3.js v7, it uses `d3.stack` to accumulate category values, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG rectangles for rendering. Interactive tooltips appear on mouseover, displaying category and exact sales amount. The chart includes axis labels, a legend, and reads data from a local CSV file.

Mmsnikhil2608@gmail.com
68% 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
68% match
Loading thumbnail…

q2

This visualization shows the progression of total COVID-19 cases over time for Afghanistan, with a blue area chart and individual data points that reveal exact values on hover. The y-axis starts at 100 to emphasize the exponential growth curve. Built with D3 v7, it uses `d3.area` for the filled region, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.axisBottom` with rotated date labels. Tooltips appear via mouseover events, while SVG circles mark each reported case count from the supplied `data.csv` file.

Ssindhuja27b@gmail.com
68% match
Loading thumbnail…

Activity 6_ Task 1 - Q2

This bar chart displays the populations of 20 countries for the year 2010, sourced from a CSV file. The visualization uses an SVG canvas with a linear scale for population and a band scale for country names. The code employs d3.v7 APIs such as `d3.axisBottom`, `d3.axisLeft`, `d3.scaleLinear`, and `d3.scaleBand`, along with custom modules like `Marks.js` for drawing light green bars. The x-axis is labeled "POPULATION-2010", and the chart includes a title.

Nnavyabade05@gmail.com
68% match
Loading thumbnail…

Activity6_Task2

This visualization shows stacked bar charts comparing wholesale product expenditures—including Fresh, Milk, Grocery, Frozen, Detergents_Paper, and Delicassen—across three customer regions. Each horizontal bar aggregates spending per region, with segments colored by product category. The chart uses d3.stack() to compute the stacked series, d3.scaleBand for the regional y-axis, and d3.scaleLinear for the spending x-axis. Hovering highlights each segment and displays a tooltip with the category and its value, formatted using d3.format. Data comes from the provided CSV file, rendered as SVG elements.

Jjtulasi05@gmail.com
68% match