Skip to main content
SimilarExport ZIP
100%

Lunar Eclipse

✓ Published0🌍 Public
SStellaSong1
Last edited Nov 14, 2020
Created on Nov 13, 2020
Forked from Cars Scatter Plot

This scatter plot visualizes lunar penumbral eclipses from 1970 to 2050, plotting gamma against penumbral eclipse duration in minutes. Each blue dot represents an individual eclipse event, with axes labeled accordingly. The visualization uses D3 v5 to load CSV data from a local file, applying `scaleLinear` and `extent` to compute scales, and rendering circles via SVG. Axis ticks include grid lines, with a title and rotated y-axis label for clarity.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set.

MIT Licensed

Similar vizzes

Loading thumbnail…

Eclipses paths

This visualization maps the paths of total solar eclipses from 1961 to 2045 as animated ribbons across a world map. Each eclipse path is drawn as a curved band, colored by date, and labeled with its year. Built with D3 v5 and SVG, it uses a custom topoJSON pipeline to simplify eclipse geometry while preserving accurate winding across the antimeridian. Hovering over a path triggers an animation showing the eclipse’s progression over time, with labels placed along the arcs for readability. The responsive design and d3-inertia enhance interactivity.

PPhilippe Rivière
71% match
Loading thumbnail…

Scatterplot

An animated scatterplot visualizes synthetic planetary data, cycling the x-axis among diameter, moon count, and orbital period while plotting moons on the y-axis. Points are colored green with hover tooltips showing name, type, diameter, and moons. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and transition methods to smoothly update positions every 2.5 seconds. Data loads from a CSV file, rendered as SVG circles with a dark theme.

AALIMINETI SPOORTHY REDDY
69% match
Loading thumbnail…

Untitled

A lunar phase calendar displays each day of 2023 as a small orthographic moon, arranged by day along the x-axis and month along the y-axis. The SVG chart uses d3.geoCircle and d3.geoOrthographic projections within d3.geoPath to render moon phases from a computed lunar period. It includes axes via d3.axisLeft, d3.axisTop, and d3.axisBottom, with scales from d3.scaleLinear and d3.scalePoint. Clicking the SVG triggers a red animated pulse, expanding via a .transition().duration().attr() chain to highlight the current day's position.

HHéctor del Castillo
67% 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…

Solar_System_Scatter_Plot

This scatter plot visualizes the diameters of planets and their moons, with each dot colored by its base planet name and labeled with an emoji on the x-axis. The visualization uses D3.js v7 to load CSV data from a GitHub gist, render an SVG with d3.scaleBand and d3.scaleLinear axes, and display tooltips showing type, diameter, and moon count. Hovering over a dot reduces its opacity to highlight the data point.

AALIMINETI SPOORTHY REDDY
66% match
Loading thumbnail…

Moon Calendar 2020

The Moon Calendar 2020 displays the moon’s phase for every day of the year in a grid, with months on the y-axis and days on the x-axis. Each moon is rendered as an orthographic projection of a circle using `d3.geoPath` and `d3.geoOrthographic`, with phase computed from a simple lunar-cycle formula. Clicking anywhere highlights the current day’s moon with a fading red ring, animated via `transition`. The visualization uses `d3.scaleLinear` for days, `d3.scalePoint` for months, and `d3.timeDays` to generate the date sequence.

AAjayyy
65% match
Loading thumbnail…

Moon Calendar 2020

This visualization presents a year-long moon calendar for 2020, showing each day’s lunar phase as a small orthographic projection of the moon arranged by month and day. User clicks trigger an animated red ring that expands and fades around the current day’s moon. The code uses D3 v5 with SVG, `d3.geoPath` and `d3.geoOrthographic` for rendering, and computes phases from a simple formula based on a fixed new moon reference time. Axis labels are generated with `d3.axisLeft` and `d3.axisTop`.

IInnan Yuan
65% match
Loading thumbnail…

Fork of Moon Calendar 2022

This visualization displays a full year of moon phases as a calendar grid, with months on the y-axis and days on the x-axis. Each day renders a small moon using d3.geoPath and d3.geoOrthographic, with phase computed from a simple lunar period calculation based on a 1970 reference new moon. A click on the visualization adds a red pulsing ring around the current day’s moon via a transition. The code uses d3.timeDays and d3.axis scales to layout the calendar, with SVG animation for the highlighting effect.

Ppkdvalis
65% match