Fireballs round 2

100%

Fireballs round 2

✓ Published0🌍 Public

Last edited Jan 11, 2020

Created on Jan 11, 2020

This example visualizes fireball impact data from NASA, showing each event as a link in a force-directed graph. The code maps impact energy to link sources (categorized into ranges), with targets as the calculated impact energy values and types as full event details. Using d3.forceSimulation, it renders curved SVG path links between nodes, with circles and labels for each node. The data is loaded from a CSV file and processed with d3.csv, and the visualization supports drag interactions on the nodes.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Fireballs round 2

This visualization displays fireball impact events from NASA’s Center for Near Earth Object Studies dataset, using a force-directed graph to show relationships between impact energy categories and event details. The code employs d3-force.v2 for the simulation and D3’s layout.force API to position nodes and links, with SVG markers and elliptical arcs to encode directional links. Energy values are discretized into bins, and each link connects an energy range to a descriptive label containing the event’s timestamp, latitude, longitude, and calculated impact energy in kilotons. The visualization relies on d3.csv for data loading and React for the application framework.

MMichael Milano

93% match

Loading thumbnail…

Fireballs Through Time

A force-directed network diagram maps fireball impact energy and timing from NASA's CNEOS fireballs dataset. Central nodes represent energy ranges (e.g., "0-0.15" kilotons) with linked satellite nodes showing individual events and their date, location, and energy. The visualization uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceX`/`forceY` to position interactive, draggable circles rendered as SVG. Impact energy is categorized into logarithmic bins, revealing clusters and outliers over the May 2017–December 2019 period.

MMichael Milano

86% match

Loading thumbnail…

Fireballs and Bolides Around The World

This visualization combines a natural Earth projection map and a time-series histogram to show fireball and bolide impacts worldwide. The map places scaled circles at each impact location, with circle size encoding impact energy, while the histogram aggregates monthly impact energy over time. Built with React and D3 v5, the map uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for geographic rendering, while `scaleSqrt`, `scaleTime`, and `histogram` bin the temporal data. Impact coordinates and energy values come from the NASA CNEOS fireballs dataset.

MMichael Milano

78% match

Loading thumbnail…

Fireballs round 3

This visualization shows the movement of foreign soccer players between countries and clubs in the Chinese Super League, using a force-directed network with SVG rendering. The code uses `d3.forceSimulation` and a custom `bboxCollision` force to position country, team, and player nodes, with links representing player transfers. Data comes from the `csl_foreign_players.csv` file, and the visualization is built with D3 v4 within a React framework.

MMichael Milano

74% match

Loading thumbnail…

making a bar chart

This example displays a horizontal bar chart of impact energy from fireball events, using the totalImpactEnergy field as the bar lengths and PeakBrightnessDateTimeUT as the category labels. The D3 v5 code employs `scaleLinear` and `scaleBand` for axes, with `axisLeft` and `axisBottom` for tick marks. Bars are rendered as SVG rects, colored steelblue via CSS, and the chart is built in a React environment from a local CSV file.

MMichael Milano

70% match

Loading thumbnail…

Untitled

Interactive bubble charts use force simulation to show relative values across categories. Circles sized by a linear scale and colored by an ordinal scale are initially centered, then repel and collide until settling into a packed layout. Dragging nodes repositions them with the simulation restarting, while hovering reveals a tooltip with the exact value. The visualization loads CSV data from a GitHub gist, renders with SVG in React, and relies on d3.forceSimulation, forceCenter, forceManyBody, and forceCollide to animate the layout.

SSitanshu Rupani

69% match

Loading thumbnail…

Untitled

This example visualizes a dataset from a CSV file using D3.js force simulation, rendering nodes and links in an SVG container. The code loads data.csv and applies d3.forceSimulation with forces for charge, center, and link to position elements. Nodes are drawn as circles with fill colors and labels, while links appear as lines. The visualization updates positions on each simulated tick, demonstrating a standard network graph layout.

TTetizera

68% match

Loading thumbnail…

Force Layout

This example demonstrates an interactive force-directed graph built with React and D3 v6. A hierarchical dataset is flattened into nodes and links, then rendered as circles and lines using SVG. The simulation uses `d3.forceSimulation` with center, charge, collide, and link forces. Moving the mouse dynamically adds `forceX` and `forceY` forces that pull nodes toward the pointer, with strength varying by node depth. Clicking applies a `forceRadial` orbit force around the clicked point and draws a green circle to indicate the orbit radius.

MMinwoo Pak

68% match