Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Planets dataset

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

845a3fdd51f24d60a26ec0c3dfd9c709

Open

Planets dataset

0 stars0🌍 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.
  2. Circle Layout — shows relative distances from the Sun.

Tools Used:

  • HTML, CSS, and JavaScript
  • D3.js (for data loading and visualization)
  • VizHub (for live hosting and sharing)

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

Instructions:

  1. Open index.html in VizHub preview to view visualization.
  2. Ensure csvUrl in index.js points to your public Gist Raw CSV link.
  3. Save and share your VizHub link for submission.