Skip to main content
SimilarExport ZIP
100%

Scatter_plot_iCE7

✓ Published0🌍 Public
Nnikhilagopi
Last edited Mar 21, 2023
Created on Mar 21, 2023

This scatter plot shows the relationship between average horsepower and average torque for various car brands, with each point colored by manufacturer. The visualization uses D3.js v6 within a React framework, rendering as an SVG. The code reads data from a CSV file and employs `d3.csv`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to construct axes. Interactive tooltips appear on hover, displaying the brand and exact values, while a categorical color scale (`d3.scaleOrdinal`) differentiates brands in the legend.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also [React Starter] https://gist.githubusercontent.com/MalempatiSaranya/4f04acbbd2765a277f53e082013ec320/raw/3d04ec7df174657c1ce724ea0274e482da0efcb1/stripechart.csv

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 7 scatter plotting - saranya

This scatter plot visualizes the relationship between average horsepower and average torque across car brands, with each brand represented by a colored point and a legend. The chart uses a D3 v6 linear scale for both axes, and circles are colored via `d3.scaleOrdinal` with `d3.schemeCategory10`. A custom tooltip, displayed on mouseover, shows the brand and exact values. Data is loaded from a CSV file using `d3.csv`, and the visualization is rendered as an SVG within a React framework.

MMalempatiSaranya
89% match
Loading thumbnail…

Scatter plot

This scatter plot displays the relationship between average horsepower and average torque for various German car brands. Each circle represents a brand, positioned along the axes and colored by manufacturer using a D3 ordinal color scale. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and d3.select to build the SVG. Hovering reveals a tooltip with exact values, generated via d3.csv and event handlers. Data comes from the CSV file `stripechart1.csv`.

Pprateekvasi
88% match
Loading thumbnail…

scatter plotting

A scatter plot shows average engine horsepower versus torque for various German car brands, using one point per car make. The visualization relies on a D3.js v6 SVG rendering, reading data from a CSV file, and mapping the `Avg_Torque` values to the x-axis and `Avg_Horsepower` values to the y-axis. Points are colored by car make using `d3.scaleOrdinal` with the `d3.schemeCategory10` palette, and a tooltip appears on hover displaying the make and both axis values. The chart includes axis labels, a title, and a legend indicating the car brand identity.

MMalempatiSaranya
88% match
Loading thumbnail…

Assignment 6 -- Scatter plot with a qualitative color scale

This scatter plot shows the relationship between average horsepower and average torque for various car makes, with each point colored by the manufacturer using a qualitative color scale. The visualization uses D3.js v4 to render an SVG chart, employing `d3.scaleLinear` for both axes and `d3.scaleOrdinal` with `d3.schemeCategory10` for the categorical colors. Tooltips display the make and exact values on hover, while a legend identifies the color mapping. The data is loaded from an external CSV file (`stripechart1.csv`) containing average engine statistics.

Vvishusikka
84% match
Loading thumbnail…

Assignment 6 updated -- Scatter plot with a qualitative color scale

This scatter plot visualizes the relationship between average horsepower and torque for 46 car brands, with each brand represented as a white circle with a colored outline. A qualitative color scale using `d3.scaleOrdinal` with `d3.schemeCategory10` distinguishes manufacturers, while a legend and interactive tooltip, implemented with D3 v6 event handlers, reveal brand names and exact values on hover. The chart, rendered as SVG, loads data from `stripechart1.csv` via `d3.csv` and positions points using `d3.scaleLinear` for both axes.

Vvishusikka
84% match
Loading thumbnail…

DV2_5 _Bubble Chart

This bubble chart plots average horsepower against average torque for various car brands, with each circle's size encoding the brand's highway miles per gallon, and its color encoding the brand name. Built with D3.js, the visualization reads from a CSV file and implements a custom legend for the categorical color mapping. Circle positions are defined by the x- and y-axes, which use linear scales, while the size scale is also linear. Interactive tooltips appear on mouseover, showing the car make. The chart is rendered as an SVG with transitions for tooltip display.

NNagateja99
82% match
Loading thumbnail…

Untitled

This example presents a static scatter plot that visualizes the relationship between engine horsepower and fuel efficiency (MPG) for a small set of car brands, including Ford and BMW. Built with React and D3.js (v7), the SVG visualization uses `d3.scaleLinear` to map data to axes and `d3.schemeCategory10` for color coding, with a legend identifying each brand. Mouse interactions trigger a tooltip that displays the brand, horsepower, and MPG values. The chart includes labeled axes and a title, all rendered through SVG elements.

Ssaikrishnabussa
81% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between miles per gallon and horsepower for various car models, with each point representing a vehicle. The visualization uses D3.js v6 within a React framework to scale and position circles on an SVG canvas. The code employs `scaleLinear`, `axisLeft`, and `axisBottom` to construct axes and plot the data, which is loaded from a CSV file. The visualization also includes axis labels, a title, and a semi-transparent steelblue fill for the circles.

Nnsadath
81% match