Skip to main content
SimilarExport ZIP
100%

Acticity 7 tutorial2

✓ Published0🌍 Public
Hhaneesh@gctc.in
Last edited Apr 4, 2024
Created on Apr 4, 2024
Forked from Hello VizHub

This example shows a stacked bar chart comparing average horsepower, torque, and highway MPG for several car makes, using an ordinal color scale and a legend to distinguish the three metrics. It renders the chart as an SVG and relies on D3.js version 7 APIs including `d3.stack` for data stacking, `d3.scaleBand` for categorical positioning, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` with rotated labels to handle long axis text. The data is embedded directly in the script rather than loaded from an external file.

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

This stacked bar chart displays the average horsepower, torque, and highway MPG for various car makes, sorted by total value. The chart uses a horizontal layout with segments colored in shades of orange to represent each specification. It is built with D3 v7 and renders as an SVG, employing `d3.stack()` for the stacked data transformation, `d3.scaleOrdinal` for color mapping, and `d3.axisBottom` and `d3.axisLeft` for axes. The data is loaded from a CSV file and processed with numeric conversion.

Rrahman.mehmood2002@gmail.com
87% 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
86% match
Loading thumbnail…

Activity6_Q2

A stacked bar chart compares car makes by three metrics: horsepower, torque, and highway MPG. Each horizontal bar is segmented by metric, with a color scale distinguishing them and a legend implied by the colors. The visualization loads CSV data via `d3.csv` and uses `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to construct the SVG rendering. Interactive tooltips display the metric value on hover, using mouse events and a styled div.

Ssaiteja.cse.rymec@gmail.com
86% match
Loading thumbnail…

Activity8-Task2

This stacked bar chart visualizes car performance metrics—horsepower, torque, and highway MPG—across seven car makes. Using D3 v7, it groups values per make into horizontal, color-coded segments on a linear scale up to 450. Tooltips reveal exact values on hover, while axes and labels clarify the categories. Data comes from an embedded CSV defining make and the three metrics.

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

Activity6_Q2

This stacked bar chart compares car performance by manufacturer, breaking down horsepower, torque, and highway MPG into color-coded segments along a horizontal axis. It loads CSV data via D3 v7, uses `d3.stack()`, `d3.scaleBand()`, `d3.scaleLinear()`, and `d3.axisBottom()` to render SVG bars, and includes interactive tooltips on mouseover for metric values. A legend maps the three metrics to distinct colors.

SSahithi.R
86% 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
86% match