Skip to main content
SimilarExport ZIP
100%

Fork of Activity6_tutorial2

✓ Published1🌍 Public
Yyadlapallisaisathvik@gmail.com
Last edited Oct 22, 2024
Created on Oct 22, 2024

This visualization displays the distribution of horsepower percentages across different car models using a stacked horizontal bar chart. Each bar represents a car model, with colored segments corresponding to horsepower ranges. The chart uses D3.js v7’s `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to compute and render stacked segments as SVG rectangles. Interactive tooltips, styled via CSS, reveal the exact percentage for each range on hover. Data originates from the included `data.csv`, read as a static D3 dataset.

AI-generated description

What to do now?

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_task2

This visualization shows the distribution of horsepower across ten car models, using a horizontal stacked bar chart where each bar represents a model and segments show the proportion of its power falling into five ranges from below 200 to above 800 horsepower. The chart uses a divergent color scale from green through purple, blue, yellow, and red, with model names on the y-axis and percentage on the x-axis. Built with d3.v7, it employs d3.stack() to create the stacked layout, d3.scaleBand() for the categorical y-axis, and d3.scaleLinear() for the continuous x-axis. Interactive tooltips display the exact percentage for each segment on mouseover, with data sourced from a CSV file containing proportional values that sum to one per car.

Yyadlapallisaisathvik@gmail.com
91% match
Loading thumbnail…

Fork of Activity6_Task2

This horizontally stacked bar chart displays average horsepower, torque, and highway MPG by car make, using a color-coded segment for each spec. The data is loaded from a CSV file and rendered as SVG rectangles via `d3.stack()`, with `d3.scaleBand` and `d3.scaleLinear` handling the axes. UI text uses custom fonts, and the visualization includes axis labels and a title.

IILYAS AHMED
87% match
Loading thumbnail…

Fork of Activity6_Task2

This horizontally stacked bar chart displays average horsepower, torque, and highway MPG by car make, using a color-coded segment for each spec. The data is loaded from a CSV file and rendered as SVG rectangles via `d3.stack()`, with `d3.scaleBand` and `d3.scaleLinear` handling the axes. UI text uses custom fonts, and the visualization includes axis labels and a title.

IILYAS AHMED
87% match
Loading thumbnail…

Fork of Activity_6_task_2_3

This stacked bar chart displays car make ratings across three metrics: horsepower, torque, and highway MPG. It uses d3.stack() to prepare the data and d3.scaleOrdinal() for color coding. The chart renders in SVG with axes generated using d3.axisLeft() and d3.axisBottom(), and includes interactive tooltips that appear on mouseover, showing metric values. Data is loaded from the bubblechart.csv file via d3.csv().

Lleelakrishnadivi7@gmail.com
86% match
Loading thumbnail…

Fork of Activity6_q3

This stacked bar chart visualizes car make ratings by comparing three metrics—horsepower, torque, and highway MPG—for each brand. Using d3.stack and d3.scaleBand, the horizontal bars aggregate total ratings per make, with color-coded segments for each metric. Interactive tooltips display exact values on mouseover. The chart loads data from a CSV file, leveraging D3 v7's d3.csv and scaleOrdinal for consistent color mapping.

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

Fork of Activity6_Q3

This interactive scatter plot visualizes the relationship between horsepower and torque for various car models, using distinct D3 symbols to differentiate vehicle makes. The visualization employs scales from d3.scale, including scaleLinear for axes and scaleOrdinal with symbolsFill to map makes to shapes. Data is loaded asynchronously via d3.csvParse from a GitHub-hosted dataset, with axes and a custom shape legend rendered through modular functions. The chart updates dynamically when new data arrives, displaying a color-coded legend for categorical identification.

Aaashrithas2000@gmail.com
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