Skip to main content
SimilarExport ZIP
100%

Star Wars vehicles comparison

✓ Published0🌍 Public
HHenri Lappalainen
Last edited Aug 18, 2019
Created on Jul 31, 2019

A scatterplot compares Star Wars vehicles across three selectable attributes, mapping length, max speed, crew, passengers, cargo capacity, or cost to the x-axis, y-axis, and circle size. Users toggle between all vehicles or those under 20 meters via a checkbox. The SVG visualization uses d3.scaleLinear, d3.scaleSqrt, and d3.axisBottom/Left, with animated transitions on axis changes. Vehicle data comes from vehicles.json, filtered for numeric fields. Clickable column headers rebuild the axes and circles, while hover reveals vehicle names.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Comparing Star Wars starships

This interactive scatterplot compares Star Wars starships by cost, length, and crew, using the SWAPI dataset. Users can dynamically select which numeric attribute maps to the x-axis, y-axis, and circle size, with axes and legend labels updating accordingly. A checkbox filters out expensive capital ships, and a smooth D3 transition animates the repositioning of circles when a new column is selected. The visualization is built with D3 v5 and rendered as an SVG, featuring a size legend for the third variable.

HHenri Lappalainen
86% match
Loading thumbnail…

Comparing Star Wars planets

This scatterplot compares Star Wars planets by their diameter and population, with each planet’s diameter also determining the size of its circular mark. The visualization uses D3 v5’s `scaleLinear` for the x- and y-axes and `scaleSqrt` for the radius encoding, rendering the SVG with circles. A size legend encodes the diameter scale, and data are loaded from `planets.json`. Axis tick labels are formatted using D3’s `format` function.

HHenri Lappalainen
73% 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
70% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between vehicle weight and horsepower for a dataset of cars, with each point representing an individual model. The visualization uses D3.js v7 with a React framework and SVG rendering to draw semi-transparent blue circles on a Cartesian grid. Axis labels and tick marks are rendered using D3’s `axisLeft` and `axisBottom` functions, with gridlines extending across the plot. Data is loaded from a CSV file via `d3.csv` and parsed into numeric values before scaling with `scaleLinear`.

CConnor Trump
70% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a collection of cars, with each circle representing an individual vehicle. The visualization uses D3.js v5 with SVG rendering, employing d3.scaleLinear for both axes and d3.axisLeft and d3.axisBottom to generate the tick marks and grid lines. The code loads car data from a CSV file via d3.csv and maps the numeric fields before rendering the circles with a fixed radius and semi-transparent steelblue fill.

BbeauMarko
70% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each point representing an individual vehicle. The SVG rendering uses d3.scaleLinear with extent-derived domains, d3.axisBottom and d3.axisLeft for axes, and d3.csv to load the auto-mpg dataset. The circles have a fixed radius with red fill and partial opacity, while axis labels and title are styled via CSS classes. Grid lines are drawn using tickSize to span the inner chart area.

Jjeelong
70% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each point representing an individual vehicle. The visualization uses D3.js v5 to load CSV data, create linear scales, and render SVG circles with red, semi-transparent fill. Axis labels and a title are included through D3's axis components and SVG text elements. The chart employs square-root-free linear scaling with nice tick values, and the data is cleaned by converting string values to numeric types before rendering.

DDaniel Prevoznik
69% match
Loading thumbnail…

Cars Scatterplot

This scatterplot displays the relationship between vehicle weight and horsepower for a dataset of cars, with each circle representing an individual car. The visualization uses D3 v7 to load the auto-mpg CSV data, then employs `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes. The code renders SVG circles with a red fill and 50% opacity, while library functions like `extent` and `nice` help determine the scales. Title and axis labels are added directly to the SVG group elements.

JJadeITNT
69% match