Skip to main content
SimilarExport ZIP
100%

Activity6_task3

✓ Published0🌍 Public
Yyadlapallisaisathvik@gmail.com
Last edited Oct 23, 2024
Created on Oct 22, 2024
Forked from HTML Starter

This example shows the relationship between car price and mileage with an interactive scatter plot. Each circle represents a vehicle, positioned by mileage on the x-axis and price on the y-axis, with color encoding price ranges via a `d3.scaleThreshold` (green, yellow, orange, red). Hovering over a point enlarges the circle and reveals the make, model, and price in a temporary text tooltip. The chart uses `d3.csv` to load external data and renders axes and circles as SVG, with a legend summarizing price bins.

AI-generated description

The above scatter plot is about pricing of various cars compared to the miles it has driven.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity6 Tutorial3

A scatter plot visualizes the relationship between vehicle price and mileage for 21 used cars, with each point colored by price tier: green for under $25,000, yellow for $25,000–35,000, orange for $35,000–45,000, and red for over $45,000. Built with D3.js v7, the plot uses `d3.select`, `d3.csv`, `d3.scaleLinear`, `d3.extent`, and `d3.axisBottom`/`d3.axisLeft` to render SVG axes and circles. Hovering over a point triggers a `d3.transition` that enlarges the circle and appends a temporary text tooltip showing the car’s make, model, and price.

Yyadlapallisaisathvik@gmail.com
89% match
Loading thumbnail…

Activity6_Question3.1

This interactive scatter plot displays car mileage and price relationships, with points colored by car type (Camry, Corolla, and other). It uses the D3 v6 API, loading data from a GitHub-hosted CSV file, scaling values with `d3.scaleLinear` and rendering circles in an SVG. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while the full-screen responsive layout adapts to the window size.

Ssaisnehapalle@my.unt.edu
87% match
Loading thumbnail…

Activity6_Question 3.1

This scatter plot displays the relationship between vehicle mileage and price across different car types, using color-coded circles for the Iris dataset. The visualization loads data from a CSV file via d3.csv, parses the numeric values, and maps them to SVG circle elements using d3.scaleLinear scales. Coordinate axes are rendered with d3.axisLeft and d3.axisBottom, while circle colors are determined by a custom marker function that assigns distinct hues to each car type. The chart is built with D3 v6, using the select, extent, and join methods to bind data to SVG elements.

Ssaisnehapalle@my.unt.edu
86% match
Loading thumbnail…

Activity6_Task3

This example displays a scatter plot from a car dataset, showing the relationship between horsepower and highway MPG, with each orange circle representing a car. It loads data from a CSV file via `d3.csv`, parses numeric values, and scales the data using `scaleLinear` with `extent` for the domains. SVG circles are bound to the data, and axes are rendered with `axisBottom` and `axisLeft`. D3 v6 handles all DOM manipulation and data joins, while axis labels are positioned via SVG text and `transform`.

Ssahithigovindaraju@my.unt.edu
84% match
Loading thumbnail…

Fork of Activity6_Question3

This example displays a scatter plot of car prices against model year, using blue circles positioned on an SVG canvas. It loads car price data from a GitHub-hosted CSV file and parses the price field as a number. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map the data to x and y coordinates with labeled axes. The plot fills the entire browser window, with the title styled in red italics.

Ssaimanvith22@gmail.com
84% match
Loading thumbnail…

Scatter plot

This interactive scatter plot displays the relationship between car mileage and price, with individual dots colored by fuel type. Built with D3.js (v7), it renders as an SVG chart with axes, labels, and a hover tooltip that reveals the car name, fuel, mileage, and price. The visualization loads a CSV dataset from a GitHub gist, uses `d3.scaleOrdinal` for color mapping, and applies CSS transitions to highlight dots on hover.

Ccharchana0527@gmail.com
83% match
Loading thumbnail…

Activity6_Task3

This interactive scatter plot, built with D3.js v6, visualizes a car dataset by plotting horsepower against torque. Each circle represents a car model, with its color encoding the vehicle's highway MPG value using a sequential blue color scale. The visualization uses a tooltip that appears on mouseover to display the car's make, horsepower, torque, and MPG. The axes are labeled and scaled using `d3.scaleLinear`, with the SVG output rendered to fill the browser window, pulling data from a remote CSV file.

Ggsdontineni518@gmail.com
83% match
Loading thumbnail…

Activity6_question3

This interactive scatter plot visualizes a car dataset, with each point representing a vehicle plotted by its Total Sales and Product. The chart, rendered as an SVG, uses D3 v6 APIs including `csv`, `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `schemeTableau10` to map data to position and color. A legend identifies the product categories via color. The visualization is loaded from a remote CSV file and fills the browser window, with axes labeled "Highway MPG" and "Horsepower."

Kkandulasunny17@gmail.com
83% match