Skip to main content
SimilarExport ZIP
100%

Goldilocks Zone

✓ Published0🌍 Public
MMuhammad Meigooni
Last edited Nov 4, 2020
Created on Nov 4, 2020
Forked from React Starter

This visualization plots confirmed exoplanets by mass (y-axis) against their star’s habitable zone distance (x-axis), with circle size encoding radius and color encoding temperature regime (too hot, just right, too cold). Built with React and D3 v5, it uses `scaleLinear` and `scaleLog` for the y-axis with toggle buttons, `scaleThreshold` for color, and `scaleLinear` for both x and radius scales. SVG circles render from a CSV, with custom `AxisLeft` and `AxisTop` components.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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

Exoplanet_Emotional_Resonance

This interactive dashboard visualizes a synthetic dataset of exoplanets, plotting each world’s distance in light-years against its observation score. Dot size encodes the Emotional Resonance Index, while dot color represents light color, with legend chips for filtering. Built with D3 v7, it uses `d3.csv` to load data, renders a scatterplot in SVG, and displays computed KPI statistics. A fixed tooltip appears on hover, and a separate inline SVG shows a custom radial-gradient planet icon.

JJaswanthKoorapati@my.unt.edu
71% match
Loading thumbnail…

Activity6-question3

This visualization displays the Exoplanets dataset as a scatter plot, with orbital period on the x-axis and mass on the y-axis. The code uses D3 v6 to load CSV data from a GitHub repository and render SVG circles, color-coded by detection method (Radial Velocity, Transit, or other). It applies scaleLinear for both axes, axisLeft and axisBottom for ticks, and custom CSS styling for labels. The plot also encodes distance and year values as rx and ry attributes on the circles, though these do not visually affect the circle rendering since the radius is fixed.

Ssushanthkodipyaka@gmail.com
71% 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
68% 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
67% match
Loading thumbnail…

Exoplanets Paralle Coordinates

This interactive parallel coordinates chart visualizes a dataset of exoplanet properties, including orbital period, mass, and discovery method, across multiple axes. Users can brush along any axis to filter the displayed polyline series, which are rendered as SVG axes and an overlaid semi-transparent Canvas layer for performance. The visualization uses D3.js for scales, axes, and brushing interactions, with a custom render-queue script to manage the Canvas drawing and achieve smooth filtering.

Mmuzzheng
67% match
Loading thumbnail…

new

This visualization displays a line chart of energy sector intensity forecasts over time, using a dataset from an external JSON API. The x-axis represents forecast years, while the y-axis maps intensity values, with a colored legend distinguishing intensity levels from "Very Low" to "V.High." Built with D3 v6 in a React framework, the code employs `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the axes, and `line` with `curveCatmullRom` to draw the smoothed path. Data points are rendered as circles, colored conditionally based on intensity thresholds, with grid lines and labels styled via CSS.

AAkshay
66% 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
66% match