Skip to main content
SimilarExport ZIP
100%

task_9&10 question_2

✓ Published0🌍 Public
Sskykarthik97@gmail.com
Last edited Apr 22, 2024
Created on Apr 22, 2024
Forked from Hello VizHub

This example shows the average horsepower, torque, and highway MPG for 31 car brands as a stacked area chart rendered as SVG. The data is aggregated by brand and drawn using D3 v5’s `d3.stack()`, `d3.area()`, and `d3.scaleBand()` on a categorical x-axis. Each layer is filled with a `d3.schemeCategory10` color, and the y-axis is scaled linearly. The chart is built with standard D3 selections and the `join()` pattern for the path elements.

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…

Activity8_question-2

This stacked bar chart displays car brand performance ratings across three metrics: horsepower, torque, and highway MPG. The visualization uses D3.js v6 to render an SVG representation of 31 automotive brands sorted by horsepower values. The chart implements a linear y-scale for rating magnitudes and a band x-scale for categorical brand names. Each bar segment reveals a single metric value through the rectangular SVG elements, with the chart's data sourced from a local CSV file containing performance specifications.

HHarika Metta
87% match
Loading thumbnail…

Task-8Q2

This chart visualizes horsepower, torque, and highway MPG for various car makes using a horizontal stacked bar chart. Each bar represents a single car brand, with segment lengths proportional to the three attribute values. The visualization uses D3.js v7 with SVG rendering, employing `d3.stack()` to aggregate the data from a CSV file. The scales are created with `d3.scaleLinear` and `d3.scaleBand`, while `d3.axisLeft` and `d3.axisBottom` generate the axes.

Rreddyswethuvahana@gmail.com
86% match
Loading thumbnail…

Task-8(Question-2)

This visualization shows a horizontal stacked bar chart comparing three car attributes—horsepower, torque, and highway MPG—across 31 car makes. The data is loaded from a CSV file using d3.csv, and the stacked layout is created with d3.stack(). The x-axis uses a linear scale to represent cumulative values, while the y-axis uses d3.scaleBand for categorical car makes. Color encoding is applied via d3.scaleOrdinal with a defined range, and the chart includes an x-axis, y-axis labels, and a legend rendered in SVG.

Ttallurisaiteja96@gmail.com
86% match
Loading thumbnail…

task2_question3

This stacked bar chart shows how horsepower, torque, and highway MPG values contribute to the total specifications for each car manufacturer, with each bar segment colored by specification type. The visualization uses d3.stack() to compute the stacked series, d3.scaleLinear and d3.scaleBand for positioning, and built-in SVG mouse events with a tooltip to display exact segment values on hover. A legend identifies the three color-coded specifications, while the x-axis represents the cumulative value scale. Data comes from a CSV file loaded directly into the d3.v7 environment.

VVrushikaKanaparthy@my.unt.edu
85% match
Loading thumbnail…

Activity6_Q2

This stacked bar chart visualizes the normalized proportions of horsepower, torque, and highway MPG for 31 car brands, showing how each metric contributes to a total value of 100% per make. The code uses d3.stack() to compute the layered segments, d3.scaleBand() for the categorical y-axis, and d3.scaleLinear() for the proportional x-axis. Data is embedded directly in the script and rendered as SVG rectangles, with a legend and percentage-formatted axis ticks.

Ddabbararakshitha@gmail.com
85% match
Loading thumbnail…

Activity 7 Task 5

This visualization displays a bubble chart correlating average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its radius represents highway MPG and color distinguishes car brands. The chart includes interactive tooltips on hover, a legend for MPG sizing, and a color-coded brand legend. Rendered as SVG with D3 v7, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.interpolateTurbo`, and `d3.csv` to load data from a local CSV file.

MmNamratha25
85% 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
85% match
Loading thumbnail…

Fork of Activity6_task2 question3

A stacked horizontal bar chart compares normalized proportions of horsepower, torque, and highway MPG across selected car brands, with each bar summing to 100%. The data, drawn from a CSV, is processed in D3 v7 by mapping each metric to a fraction of its total; `d3.stack()` creates the series, `d3.scaleBand` positions brands on the y-axis, and `d3.scaleLinear` maps the 0–1 range on the x-axis. SVG rectangles are colored via `d3.scaleOrdinal`, with axes formatted as percentages and a legend identifying the three metrics.

Ppuppireddyarchana@gmail.com
85% match