Activity6_Task2 Question 2

100%

Activity6_Task2 Question 2

✓ Published1🌍 Public

Last edited Oct 18, 2024

Created on Oct 18, 2024

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.

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 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

91% match

Loading thumbnail…

Question 2

This visualization shows the proportional distribution of CO2 emissions by fuel type across different vehicle categories. Using a horizontal stacked bar chart, each vehicle type displays segments for Petrol, Diesel, Electric, and Hybrid fuel sources, colored with a categorical scale. The D3.js code loads data from a CSV file, stacks the fuel-type columns using the `d3.stack` API, and renders the result as SVG rectangles scaled by the linear x-axis. A legend identifies each fuel type, while the y-axis labels the vehicle types. The chart enables quick comparison of fuel-source shares within each vehicle category.

Nnitishsurneni@gmail.com

85% match

Loading thumbnail…

Activity6 Question2

A stacked bar chart displays the normalized proportions of horsepower, torque, and highway MPG for six car makes, with each bar summing to 100%. The x-axis uses percentage formatting, and a categorical color legend identifies the three metrics. Built with D3 v7, the chart uses `d3.stack()` to compute stacked series, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the numeric x-axis. Data is loaded from an inline array derived from the provided CSV, and SVG rectangles render each segment.

Kkoushikkumarreddykoorapati@my.unt.edu

82% 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

82% 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

82% match

Loading thumbnail…

Activity-6-Question-2

This example uses a diverging stacked bar chart to display the breakdown of vehicle types by torque and horsepower. The chart renders as horizontal bars for each vehicle make, with segments colored by rating category. The visualization uses D3 v7 APIs including `d3.stack`, `d3.scaleOrdinal`, and `d3.scaleBand` to construct the layout. Hover interactions reveal precise percentage values via a tooltip. Data comes from a CSV file containing make, horsepower, torque, and highway MPG values, which are transformed into stacked proportions for each bar.

Pphanisrivinnakota@gmail.com

82% 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

81% match

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

81% match