Skip to main content
SimilarExport ZIP
100%

Cars Scatter Plot

✓ Published0🌍 Public
SSushanta77
Last edited Jul 31, 2019
Created on Jul 30, 2019
Forked from The d3 test

This D3.js v5 scatter plot visualizes fuel efficiency data from the cars2017_new.csv dataset, plotting each car model's average city MPG as a horizontal bar. The y-axis displays car makes using a band scale, while the x-axis represents city MPG values with a linear scale. Built with SVG rendering, the visualization uses D3's `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `scale.category20` APIs. The code reads the CSV file, converts numeric fields, and appends styled rectangles to the SVG canvas to represent each data point.

AI-generated description

Make,Fuel,EngineCylinders,AverageHighwayMPG,AverageCityMPG Acura,Gasoline,4,35,25 Acura,Gasoline,6,28,21 Alfa Romeo,Gasoline,4,33,24 Alfa Romeo,Gasoline,6,24,17 Aston Martin,Gasoline,12,19,12 Audi,Gasoline,4,31,23.5 Audi,Gasoline,6,27,19 Audi,Gasoline,8,26,17 Audi,Gasoline,10,22,14 Bentley,Gasoline,8,22,13 Bentley,Gasoline,12,20,12 BMW,Diesel,4,36.5,26.5 BMW,Diesel,6,28.5,21 BMW,Electricity,0,109,133 BMW,Gasoline,2,33,36 BMW,Gasoline,3,29,28 BMW,Gasoline,8,23,15 BMW,Gasoline,12,20,13 Buick,Gasoline,4,27,20 Buick,Gasoline,4,31,23 Buick,Gasoline,6,26,18 Cadillac,Gasoline,4,30,22 Cadillac,Gasoline,6,25,17 Cadillac,Gasoline,8,21,14 Cadillac,Gasoline,4,32,22 Cadillac,Gasoline,6,26,18 Cadillac,Gasoline,8,21,15 Chevrolet,Diesel,4,29,21 Chevrolet,Electricity,0,110,128 Chevrolet,Gasoline,4,31,21 Chevrolet,Gasoline,8,23,15 Chevrolet,Gasoline,4,34,27 Chevrolet,Gasoline,6,24,17 Chevrolet,Gasoline,8,21,15 Chrysler,Gasoline,8,25,16 Chrysler,Gasoline,4,36,23 Chrysler,Gasoline,6,29,20 Dodge,Gasoline,8,24,15 Dodge,Gasoline,8,23,14 Dodge,Gasoline,10,19,12 Dodge,Gasoline,4,25,19 Dodge,Gasoline,6,27,18 Ferrari,Gasoline,8,22,16 Ferrari,Gasoline,12,16,12 Fiat,Electricity,0,103,121 Fiat,Gasoline,4,34,26 Fiat,Gasoline,4,30,22 Ford,Electricity,0,96,118 Ford,Gasoline,4,25,19 Ford,Gasoline,6,18,11 Ford,Gasoline,8,21,14 Ford,Gasoline,3,40,29 Ford,Gasoline,4,31,24 Ford,Gasoline,6,23,17 Ford,Gasoline,8,22,15 Genesis,Gasoline,6,24,17 Genesis,Gasoline,8,23,15 Genesis,Gasoline,6,27,17 GMC,Diesel,4,29,21 GMC,Gasoline,4,27,20 GMC,Gasoline,6,23,17 GMC,Gasoline,8,21,15 Honda,Gasoline,4,38,30 Honda,Gasoline,4,37,29 Honda,Gasoline,6,28,19 Hyundai,Electricity,0,122,150 Hyundai,Gasoline,4,34,27 Hyundai,Gasoline,6,25,18 Infiniti,Gasoline,4,30,22 Infiniti,Gasoline,6,27,20 Infiniti,Gasoline,8,22,15 Infiniti,Gasoline,4,27,25 Jaguar,Diesel,4,39,30 Jaguar,Gasoline,4,30,21 Jaguar,Gasoline,6,26,18 Jaguar,Gasoline,8,23,15 Jeep,Gasoline,6,27,19 Jeep,Gasoline,8,22,14 Jeep,Gasoline,4,31,24 Jeep,Gasoline,8,19,13 Jeep,Gasoline,4,27,21 Jeep,Gasoline,6,22,17 Kia,Electricity,0,92,120 Kia,Gasoline,8,23,15 Kia,Gasoline,4,33,27 Kia,Gasoline,6,25,18 Lamborghini,Gasoline,10,21,14 Lamborghini,Gasoline,12,17,10 Land Rover,Diesel,6,28,22 Land Rover,Gasoline,4,27,20 Land Rover,Gasoline,6,23,17 Land Rover,Gasoline,8,19,14 Lexus,Gasoline,4,30,22 Lexus,Gasoline,6,28,21 Lexus,Gasoline,8,22,16 Lexus,Gasoline,4,36,39 Lexus,Gasoline,6,28,20 Lincoln,Gasoline,4,29,23 Lincoln,Gasoline,6,24,16 Lotus,Gasoline,6,24,17 Maserati,Gasoline,6,24,16 Maserati,Gasoline,8,20,14 Mazda,Gasoline,4,34,26 Mazda,Gasoline,4,35,27 McLaren Automotive,Gasoline,8,23,16 Mercedes-Benz,Electricity,0,82,85 Mercedes-Benz,Gasoline,4,30,23 Mercedes-Benz,Gasoline,6,25,19 Mercedes-Benz,Gasoline,8,22,16 Mercedes-Benz,Gasoline,12,20,13 MINI,Gasoline,4,33,24 Mitsubishi,Electricity,0,102,121 Mitsubishi,Gasoline,6,27,20 Mitsubishi,Gasoline,3,42,35 Mitsubishi,Gasoline,4,31,24 Nissan,Electricity,0,101,124 Nissan,Gasoline,4,31,26 Nissan,Gasoline,6,26,18 Nissan,Gasoline,4,33,26 Nissan,Gasoline,6,25,18 Nissan,Gasoline,8,20,14 Porsche,Gasoline,4,27,21 Porsche,Gasoline,6,26,19 Porsche,Gasoline,8,21,14 Ram,Gasoline,8,21,14 Ram,Gasoline,4,28,21 Ram,Gasoline,6,24,17 Rolls-Royce,Gasoline,12,19,12 Roush Performance,Gasoline,8,23,14 smart,Gasoline,3,39,32 Subaru,Gasoline,4,27,21 Subaru,Gasoline,4,33,25 Subaru,Gasoline,6,28,20 Tesla,Electricity,0,98,92 Toyota,Gasoline,4,30,23 Toyota,Gasoline,4,35,32 Toyota,Gasoline,6,25,20 Toyota,Gasoline,8,18,13 Volkswagen,Gasoline,4,28,21 Volkswagen,Gasoline,4,33,24 Volkswagen,Gasoline,6,25,18 Volvo,Gasoline,4,29,22 Volvo,Gasoline,4,32,23

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Scatter

This scatter plot visualizes the relationship between fuel efficiency (MPG) and horsepower for a dataset of cars, with each car represented as a semi-transparent circle. The chart uses D3 v5’s scaleLinear, extent, axisLeft, and axisBottom APIs to map data values to SVG coordinates, with gridlines and axis labels. The data is loaded asynchronously from an external CSV file via d3.csv, and numeric fields are parsed before rendering. Styling is applied through CSS classes for circles and text elements.

TTrey Billing
90% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between fuel efficiency (MPG) and horsepower for a dataset of automobiles, with each car represented as a semi-transparent circle. The visualization uses D3 v5's linear scales (`scaleLinear`) to map data values to coordinates, and axes are rendered with `axisLeft` and `axisBottom`, including grid lines and custom tick formatting. The SVG canvas is populated by appending circle elements, and the data is loaded asynchronously from a CSV file using the `csv` function.

Ssara17585
90% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between fuel efficiency (MPG) and horsepower for a dataset of automobiles, with each car represented as a semi-transparent circle. The visualization uses D3 v5's linear scales (`scaleLinear`) to map data values to coordinates, and axes are rendered with `axisLeft` and `axisBottom`, including grid lines and custom tick formatting. The SVG canvas is populated by appending circle elements, and the data is loaded asynchronously from a CSV file using the `csv` function.

Ssara17585
90% match
Loading thumbnail…

Cars Scatter Plot with D3.js

This scatter plot visualizes the relationship between miles per gallon and model year for a dataset of cars. The visualization uses red, semi-transparent circles to represent individual vehicles, with axes labeled for MPG and Year. The code leverages D3.js v7 functions including `csv` for data loading, `scaleLinear` for scaling, and `axisBottom`/`axisLeft` for axis generation. The SVG rendering includes grid lines, axis labels, and a title, with data parsed from an external CSV file.

CCarloWK1202
89% match
Loading thumbnail…

Cars scatter plot

This scatter plot shows the relationship between fuel efficiency (mpg) and horsepower for a dataset of automobiles, with each car represented as a semi-transparent green circle. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes and gridlines, while the data is loaded from a remote CSV using `d3.csv`. The chart includes labeled axes, a title, and margins calculated from the SVG’s dimensions, rendering all elements as SVG shapes.

Eevapavlinek
88% match
Loading thumbnail…

Cars: scatter plot

This scatter plot displays the relationship between horsepower and fuel efficiency (MPG) for a dataset of cars, with each circle representing a vehicle. The visualization uses D3 v5’s `scaleLinear` and `extent` functions to map the data to SVG coordinates, while `axisLeft` and `axisBottom` create labeled axes with gridlines. The circles are semi-transparent yellow, and the chart includes a title and rotated axis labels styled via CSS. Data is loaded asynchronously from a CSV file using D3’s `csv` method.

AAnthony-coding
87% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between fuel efficiency (MPG) and engine displacement for a dataset of cars, with each circle representing an individual vehicle. The chart uses D3 v5’s `scaleLinear` for both axes, `axisLeft` and `axisBottom` for grid lines and tick labels, and SVG circles with a fixed radius. Data is loaded asynchronously from a CSV file via `csv()`, with numeric fields parsed before rendering. The graph includes rotated axis labels and a title, while the styling applies semi-transparent brown circles through CSS.

Jjlongwellchc
87% match
Loading thumbnail…

Car's Scatter Plot

This scatter plot shows the relationship between vehicle weight and fuel efficiency (MPG) for a dataset of cars, with each red circle representing an individual car model. The visualization uses D3.js v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data values to SVG coordinates and render labeled axes with gridlines. Data is loaded asynchronously via `csv` from a remote file, then parsed into numeric values before being drawn to the SVG canvas. The chart includes a title and axis labels, with circles having partial opacity to reveal overlapping points.

MModalMBS
87% match