Comparing Star Wars starships

100%

Comparing Star Wars starships

✓ Published1🌍 Public

Last edited Aug 1, 2019

Created on Jul 29, 2019

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Star Wars vehicles comparison

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.

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

78% match

Loading thumbnail…

Planets test

This interactive visualization displays the distribution of fictional Star Wars planets from the SWAPI dataset, mapping their diameter and population values through a bubble chart. Each planet appears as a circle positioned along the axes, with the plot built using SVG rendering and D3’s `scaleLinear`, `scaleSqrt`, and `d3.pack` for hierarchical layout. The visualization also incorporates `d3.axisBottom` and `d3.axisLeft` for coordinate scales, while a custom size legend is generated via the `sizeLegend` function to indicate population scaling.

HHenri Lappalainen

73% match

Loading thumbnail…

Star Wars dismemberments

A dot chart visualizes every limb lost across the Star Wars films, with dot size proportional to the number of dismembered limbs and color indicating the victim’s alignment. Interactive buttons sort the chronological data by film episode, alignment, or body part, while navigation buttons step through movies. The visualization uses D3.js to render SVG circles and axes, with data sourced from starwars.com. The code includes responsive sizing considerations and placeholders for further sorting improvements.

PPatrick Wojda

70% match

Loading thumbnail…

Fork of Simple Scatter Plot for DIVA

This scatter plot visualizes character properties from a Star Wars social network, showing PageRank against betweenness centrality on log-scaled axes. Each circle represents a character, with positions revealing correlations between these network influence metrics. The visualization uses d3's `scaleLog`, `extent`, `axisLeft`, and custom `viz` and axis label functions from `@curran/axis-labels` to render the chart within an SVG container. Data comes from the included `starwars_nodes_prop.csv` file, and circles are rendered with fixed radius and opacity values.

Aanishbudhi@gmail.com

69% match

Loading thumbnail…

D3 Starter Updating only scatter plot

A scatter plot displays movie budget against a selectable metric (revenue, release year, or popularity) for roughly 100 top-budgeted films from 2000-2009. Buttons change the y-axis metric, triggering an animated transition that updates the circles' positions and the axis. The visualization uses D3 v5, with `d3.transition` for smooth updates, `d3.scaleLinear` for axes, and `d3.event` for tooltip positioning. Hovering over a dot reveals a detailed tooltip with title, tagline, and financial and rating statistics.

Mmaxthamt

64% match

Loading thumbnail…

Narrative Charts

This example visualizes the sequence of scenes from a Star Wars film, showing which characters appear in each scene and how their appearances connect through narrative links. It uses the `d3.layout.narrative` module to arrange scenes and character paths. The code wrangles JSON data defining characters and scene memberships, then renders scene rectangles, appearance circles, and character introduction labels as SVG elements using D3 v3.

LLichtphyz

63% match

Loading thumbnail…

Marvel vs DC Scatter Plot

This interactive scatter plot compares Marvel and DC movies by IMDB rating on the x-axis and budget (in tens of millions) on the y-axis, with each point colored by the movie’s company. The visualization uses D3 v5 scales, axes, and a legend to map data from a CSV file containing movie statistics. SVG circles are positioned via `d3.scaleLinear` for both dimensions, while `d3.scaleOrdinal` with `schemeCategory10` assigns company colors, and the `d3.legend` plugin renders the categorical color legend.

Hhappymail6

62% match