Skip to main content
SimilarExport ZIP
100%

Activity-6 Task-2

✓ Published2🌍 Public
Kkrishna444battula@gmail.com
Last edited Oct 20, 2024
Created on Oct 19, 2024

This example visualizes the low and high emission ranges for various transportation modes as a stacked bar chart, with the total height of each bar representing the high emission value and the lower segment representing the low emission value. It also displays a usage count label above each bar. Built with D3 v7, it loads data from a CSV file and uses `d3.stack` to create the stacked series, `d3.scaleBand` for the x-axis, and `d3.scaleLinear` for the y-axis. Hovering over a bar triggers a tooltip showing the exact emission value for that mode.

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…

Fork of Activity-6 Task-2Q-3

This example shows a stacked bar chart comparing low and high CO2 emissions per kilometer across six transportation modes, with usage counts labeled above each bar. The chart uses D3 v7’s `d3.stack()` and `d3.scaleBand()` to build the stacked rectangles, and displays a tooltip on hover showing the mode and emission range. SVG rendering with axes and styled labels is handled through D3 selections, while the dataset is hardcoded as JavaScript objects rather than loaded from the provided CSV.

Kkrishna444battula@gmail.com
91% match
Loading thumbnail…

Fork of Activity-6 Task-2,Q-3

This example displays a stacked bar chart comparing low and high CO2 emissions per kilometer for various transportation modes, with usage counts labeled above each bar. It uses D3 v7 to load data, stack the emission values, and render the SVG. The code demonstrates hover tooltips showing emissions details, axis labeling, and custom styling through CSS. The bars are colored distinctly for low and high emission ranges, and the chart is built using `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack`.

Kkrishna444battula@gmail.com
90% match
Loading thumbnail…

Activity6_Task2 Question 2

This example presents a stacked bar chart depicting CO2 emissions by vehicle type (Sedan, SUV, Truck, Motorcycle) and fuel type (Petrol, Diesel, Electric, Hybrid). The visualization uses proportional data from a local CSV file, rendered as SVG rectangles. It leverages D3.js v7 APIs, including `d3.stack` for stacking series, `d3.scaleOrdinal` for color coding, `d3.scaleBand` for categorical axes, and `d3.axisLeft`/`d3.axisBottom` for labeled axes. A custom legend and title complete the chart, with all styling handled via external CSS.

Gguttavenkata745@gmail.com
80% match
Loading thumbnail…

activity 6 task 2 Q1

This stacked bar chart shows the proportional CO2 emissions of four vehicle types—Sedan, SUV, Truck, and Motorcycle—split across four fuel categories: Petrol, Diesel, Electric, and Hybrid. Each horizontal bar is normalized to 100%, with colored segments representing fuel-type proportions. Built with D3 v7, the visualization uses `d3.stack()` to compute stacked series, `d3.scaleBand` for the vehicle-type axis, and `d3.scaleLinear` for the percentage scale. Data comes from a local CSV file, rendered as SVG with a color legend and percentage-formatted x-axis ticks.

Ssumanthpenna0221@gmail.com
80% match
Loading thumbnail…

Activity 6 Task2

This example displays a stacked bar chart of normalized car statistics (horsepower, torque, and highway MPG) for 31 makes, with each row showing the proportional contribution of each metric. The visualization uses D3 v7 to load CSV data, normalize values via `d3.sum`, and render the chart as SVG with `d3.stack`, `d3.scaleBand`, and `d3.scaleOrdinal` for colors. Interactive tooltips appear on mouseover, revealing the percentage share of each stat, alongside a custom legend. The data comes from `data.csv`, and the code demonstrates modular ES6 imports and UNPKG loading.

Ssharanyabobbala@my.unt.edu
78% match
Loading thumbnail…

Activity_6_Task2_Q2

This stacked bar chart visualizes the distribution of horsepower, torque, and highway MPG across 31 car makes, using d3.stack with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. Each bar segment represents one attribute, colored via d3.scaleOrdinal, and hover interactions display the precise attribute value in a tooltip. The SVG renders data from a local CSV, with axes, labels, and gridlines styled using D3’s axis methods and external fonts.

Vvarmanithish5@gmail.com
78% match
Loading thumbnail…

Activity6_Task2

This stacked bar chart displays car specifications—horsepower, torque, and highway mpg—for five vehicle makes, using d3.stack to compose the horizontal segments. Each bar’s segments are colored via d3.scaleOrdinal, with an x-axis linear scale and a y-axis band scale. The SVG rendering includes mouseover tooltips that show exact values, while the legend identifies each specification. Data comes from an inline CSV array within the code.

Ssahithigovindaraju@my.unt.edu
77% match
Loading thumbnail…

Activity 6_Task 2

This stacked horizontal bar chart shows the percentage breakdown of energy sources—fossil fuels, nuclear, hydroelectric, solar, wind, and other renewables—for eight countries, with each bar segment colored by source and an interactive tooltip revealing exact values. The visualization uses D3 v7's `d3.stack()` to compute layered series, `d3.scaleBand()` and `d3.scaleLinear()` for axes, and `d3.scaleOrdinal()` for color mapping. Data is loaded from `data.csv` and rendered as SVG rectangles, with a custom mouseover tooltip built via D3 selections and a legend generated dynamically from the column headers.

Kkblikitha22@gmail.com
77% match