Skip to main content
SimilarExport ZIP
100%

Planets dataset

✓ Published0🌍 Public
RRuthvik Bairaboina
Last edited Oct 5, 2025
Created on Oct 5, 2025
Forked from HTML Starter

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.

AI-generated description

ICE-5: The Shapes of Data — Planets of the Solar System

Course: CSCE 5320 Scientific Data Visualization

Objective:
Visualize physical and orbital characteristics of planets in our solar system using D3.js.

Dataset:
A custom-created CSV file hosted on GitHub Gist — includes columns:

  • planet
  • distance_from_sun_million_km
  • diameter_km
  • gravity_m_s2
  • moons
  • orbital_period_days
  • color

Visualizations:

  1. Bar Chart — compares planet diameters in km.
  2. Circle Layout — shows relative distances from the Sun.
  3. SVG image Tools Used:
  • HTML, CSS, and JavaScript
  • D3.js (for data loading and visualization)
  • VizHub (for live hosting and sharing)

Author:
Ruthvik Bairaboina — University of North Texas (CSCE 5320)

MIT Licensed

Similar vizzes

Loading thumbnail…

Solar_System_Bar_Graph

A bar chart displays the diameters of planets in the solar system, sourced from a CSV dataset hosted in a GitHub gist. The chart uses D3.v7 to map planet names along the x-axis and diameter values on the y-axis, with bars colored by planet type and tooltips revealing additional attributes like type and moon count. The static, SVG-based visualization is rendered without animation, featuring a clean, bordered bar style, axis labels, and a legend.

AALIMINETI SPOORTHY REDDY
85% match
Loading thumbnail…

Solar_System_Bar_Graph

This visualization shows the diameters of planets in kilometers using a bar chart, with each bar colored distinctly and a corresponding legend. The data is loaded from a CSV file via `d3.csv`, parsed, and sliced to the first 12 entries. The bars are rendered as SVG rectangles using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with colors assigned via `d3.scaleOrdinal` and `d3.schemeCategory10`. Both axes are labeled, and axis ticks are rotated for readability.

AALIMINETI SPOORTHY REDDY
84% 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
82% match
Loading thumbnail…

SolarSystem_BarGraph

This scatter plot visualizes the diameters of planets and moons, with each dot colored by its base planet and labeled with emoji icons. The chart uses a D3.js v7 SVG rendering, with a band scale on the x-axis for categorical names and a linear scale on the y-axis for diameter in kilometers. Data is loaded from a CSV file hosted on GitHub, and tooltips provide details on type, diameter, and moon count for each celestial body.

AALIMINETI SPOORTHY REDDY
81% match
Loading thumbnail…

Solar_System_Multi_Series_Chart

This example visualizes planet diameters and orbital periods with a combined bar chart and line chart. Purple bars represent each planet’s diameter in kilometers, while a yellow curved line with dots indicates orbital period in days. The visualization is built with D3 v7 using SVG rendering, and it loads planetary data from a remote CSV file. It uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axes, and `d3.line` with `d3.curveMonotoneX` to draw the line.

AALIMINETI SPOORTHY REDDY
80% match
Loading thumbnail…

Solar_System_Scatter_Plot

This scatter plot displays the relationship between the orbital period and diameter of planets, with each point colored by its base planet name and accompanied by a legend. The visualization uses D3 v7 to load CSV data, apply linear scales, render SVG axes and circles, and generate an ordinal color scale with a category palette. The data is sourced from a GitHub gist containing planetary measurements.

AALIMINETI SPOORTHY REDDY
79% match
Loading thumbnail…

DV Group 1

This chart shows the diameters of the planets in our solar system as a horizontal bar chart, using data loaded from a CSV file. The bars are drawn as SVG rectangles, with a linear scale for the diameter values and a band scale for the planet names, sorted in descending order. The visualization is built with D3 v6, using `d3.csv` to load the data and `d3.axisBottom` and `d3.axisLeft` for the axes. The chart is rendered into an SVG element within an HTML page.

Ddabrze3@gmail.com
78% 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
78% match