Skip to main content
SimilarExport ZIP
100%

Planets test

✓ Published0🌍 Public
HHenri Lappalainen
Last edited Aug 5, 2019
Created on Aug 5, 2019

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Planets dataset

This visualization of a solar system dataset combines several D3.js v7 chart types. A bar chart compares planet diameters in kilometers, while a circular layout and a mini planet strip show relative distances from the Sun and planet sizes. The code uses `d3.csv` with `d3.autoType` to load a GitHub Gist dataset, then builds the charts using SVG elements. Custom CSS enhances the design with a radial gradient background and card-based layout. A header starfield with a stylized sun is generated using `d3.range` and random values.

RRuthvik Bairaboina
76% match
Loading thumbnail…

ScatterPlot

This animated scatter plot visualizes planetary data, showing each planet’s diameter, number of moons, and orbital period as a colored, sized circle on a dark, space-themed SVG canvas. The planets continuously wander and bounce off the plot’s edges using a `d3.timer` loop that updates circle positions. Hovering reveals a tooltip with details like discovery date, while a legend groups planets by type. The code loads a CSV dataset, applies linear scales for axes and a sqrt scale for size, and uses `d3.axisBottom` and `d3.axisLeft`.

AALIMINETI SPOORTHY REDDY
74% 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
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
72% 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…

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
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
72% match