Skip to main content
SimilarExport ZIP
100%

Comparing Star Wars planets

✓ Published2🌍 Public
HHenri Lappalainen
Last edited Aug 5, 2019
Created on Jul 27, 2019

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.

AI-generated description
MIT Licensed

Similar vizzes

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
86% match
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
78% match
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
73% match
Loading thumbnail…

Untitled

This example shows the diameters of planets in kilometers, with each planet represented as a dot on an SVG scatterplot rather than a bar chart. The x-axis maps planet names using `d3.scaleBand`, while the y-axis uses `d3.scaleLinear` for diameter values. Data is loaded from a CSV via `d3.csv`, and circles are appended to a group container with an explicit transform offset. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the visualization is built entirely with D3 v7 and SVG, drawing from a dataset of planet measurements.

Hhollyjpotter
73% match
Loading thumbnail…

D3 Barchart

This example visualizes the diameters of planets in our solar system using a horizontal bar chart built with D3.js. The bars are rendered as SVG rectangles, scaled using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis, which lists planet names sorted in descending order by diameter. The chart imports data from `planets.csv`, converts the diameter strings to numbers, and displays axes generated with `d3.axisLeft` and `d3.axisBottom`. The SVG canvas is 960 by 500 pixels, with margins applied via a group transformation.

Ddabrze3@gmail.com
72% match
Loading thumbnail…

DV vizualization 1

This visualization displays the physical characteristics of planets in SVG using D3.js v6. It loads planetary data from a CSV file and maps each planet’s Diameter to a linear scale, `d3.scaleLinear`, for potential horizontal positioning. The code initializes an SVG canvas with fixed dimensions and sets a white background, while the rendered output remains incomplete as data loading and drawing logic are only partially implemented. The visualization relies on D3’s selection and scale APIs, with styling defined in an external CSS file.

Sskszymon20
71% match
Loading thumbnail…

Exoplanets

A circle-packing visualization displays the relative sizes of planets in our solar system alongside hundreds of confirmed exoplanets, with each circle’s area proportional to its radius. A quantized color scale encodes planet radius, while a tooltip reveals the exoplanet’s name, radius, and distance from its star. The data comes from the Planetary Habitability Laboratory, and the layout is computed using d3.pack with padding, rendered as SVG circles. The code filters the CSV data to separate solar-system planets from exoplanets and uses d3.scaleQuantize for color mapping.

Mmbostock
71% match
Loading thumbnail…

data viz d3

This example shows a horizontal bar chart of planetary diameters, sorted in descending order from Jupiter to Pluto. The visualization uses D3 v6’s `scaleLinear` and `scaleBand` to map diameter values and planet names, rendering SVG rectangles bound to data from a CSV file. The chart reads the `planets.csv` dataset, converting the `Diameter` field to numbers, and displays a clean, static layout with margins and a white background.

Aannprzy
70% match