Skip to main content
SimilarExport ZIP
100%

act3_task4

✓ Published0🌍 Public
Rravularasesh3102@gmail.com
Last edited Apr 14, 2024
Created on Apr 14, 2024

This example combines a D3.js v7 bubble chart with an animated smiley face to demonstrate DOM manipulation. The bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes, using `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `d3.interpolateTurbo` for color, and interactive tooltips on circle hover. The smiley face uses `d3.select` and `transition` to animate its eyebrows up and down. The chart loads data from a CSV file, while the face is built entirely with SVG shapes.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_Task4

This example uses D3 v7 to render an animated SVG bubble chart exploring the relationship between average horsepower, torque, and highway MPG across car makes. It imports data from a local CSV file and uses linear scales for axes, an ordinal color scale with interpolateTurbo, and a size scale. Interactive tooltips appear on mouseover, while a legend encodes bubble size for highway MPG values. The visualization also includes axis labels and a title.

Vvemulasai306@gmail.com
86% match
Loading thumbnail…

act8_task4

This visualization uses a bubble chart to show the correlation between average horsepower, torque, and highway MPG for various car makes, with bubble size encoding MPG and color distinguishing makes. The code leverages d3.v7 with an SVG rendering approach, using d3.csv to load data, d3.scaleLinear for positioning and sizing, and d3.scaleOrdinal with d3.interpolateTurbo for coloring. Interactive tooltips appear on mouseover via d3 event handling. A legend displays the MPG bubble-size scale and a color-coded list of car makes.

Rravularasesh3102@gmail.com
84% match
Loading thumbnail…

act8_task4

This visualization uses a bubble chart to show the correlation between average horsepower, torque, and highway MPG for various car makes, with bubble size encoding MPG and color distinguishing makes. The code leverages d3.v7 with an SVG rendering approach, using d3.csv to load data, d3.scaleLinear for positioning and sizing, and d3.scaleOrdinal with d3.interpolateTurbo for coloring. Interactive tooltips appear on mouseover via d3 event handling. A legend displays the MPG bubble-size scale and a color-coded list of car makes.

Rravularasesh3102@gmail.com
84% match
Loading thumbnail…

act8_task4

This visualization uses a bubble chart to show the correlation between average horsepower, torque, and highway MPG for various car makes, with bubble size encoding MPG and color distinguishing makes. The code leverages d3.v7 with an SVG rendering approach, using d3.csv to load data, d3.scaleLinear for positioning and sizing, and d3.scaleOrdinal with d3.interpolateTurbo for coloring. Interactive tooltips appear on mouseover via d3 event handling. A legend displays the MPG bubble-size scale and a color-coded list of car makes.

Rravularasesh3102@gmail.com
84% match
Loading thumbnail…

Activity 6 Task 4

This bubble chart visualizes the correlation between average horsepower (x-axis), torque (y-axis), and highway MPG (bubble size) for various car makes, with colors distinguishing each make. The D3 v7 code loads data from a CSV file, draws circles using `d3.scaleLinear` for positioning and sizing, and applies the `d3.interpolateTurbo` color scale. Interactive tooltips appear on mouseover, and a legend shows bubble size values and make-colored dots. The rendered SVG includes animated hover effects through CSS opacity transitions.

Rrahulnathmukkolla@gmail.com
84% match
Loading thumbnail…

Activity-6_Task-4

This animated D3.js bubble chart explores the correlation between average horsepower, torque, and highway MPG for various car makes, using data from a GitHub-hosted CSV file. SVG circles are positioned by horsepower on the x-axis and torque on the y-axis, with radius encoding highway MPG and color distinguishing makes via a d3.scaleOrdinal with interpolateTurbo. Interactive tooltips appear on mouseover, while custom legends for bubble size and car makes clarify the encodings.

Hhoneyravuri.711@gmail.com
84% match
Loading thumbnail…

Activity6_Task4

This animated bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across car makes using a CSV dataset. D3.js v7 renders SVG circles scaled by MPG and colored with a turbo-scaled ordinal palette. Interactive tooltips appear on mouseover, while the legend displays both bubble size reference circles and color-coded make labels. The implementation uses d3.csv, scaleLinear, scaleOrdinal, and event handlers for hover interactions.

Aadapasaidivya99@gmail.com
84% match
Loading thumbnail…

Activity6_Task4

This animated bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for 31 car makes, with each circle’s position on the x- and y-axes encoding horsepower and torque, while its radius encodes highway MPG. Rendered as an SVG using D3 v7, the chart includes interactive tooltips on mouseover and a dual legend for bubble size and categorical color scale. Data is loaded from a CSV file via `d3.csv`, with scales defined using `d3.scaleLinear` and color assignment via `d3.scaleOrdinal` combined with `d3.interpolateTurbo`.

Ssumanthnaidu213@gmail.com
83% match