mfoslan14@gmail.com

@reddishmatthew·15 public vizzes

Meteor Landings Project - Final

This visualization maps meteorite landings worldwide, with each landing point color-coded by meteorite classification category—chondrites, achondrites, irons, and stony-irons—and sized by mass. The map uses d3.geoNaturalEarth1 projection with d3.geoPath to render country boundaries from TopoJSON data. Interactive hover states display details via a tooltip, while color scales and square-root sizing convey the distribution and magnitude of meteorite falls across the globe.

Dec 7, 2024

Loading thumbnail…

Meteor Landings Project V.6

A world map displays meteorite landings, with each point colored by meteorite category—chondrites, achondrites, irons, and stony-irons—using predefined color scales and sized by mass. The visualization loads country boundaries from TopoJSON data and renders them with `d3.geoNaturalEarth1` and `d3.geoPath`. Meteorite records from `data.csv` are projected onto the map, and hovering over a point reveals a tooltip with additional details.

Dec 6, 2024

Loading thumbnail…

Meteor Landings Project V.5

This map of meteorite landings plots each fall as a scaled circle, with point size encoding mass and a color scheme that categorizes samples into chondrites, achondrites, irons, and stony-irons. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and renders countries from a TopoJSON world atlas using `d3.geoPath`. A tooltip supplies per-point details, and the display is built with D3’s selection and data-join methods in an SVG container.

Nov 30, 2024

Loading thumbnail…

Meteor Landings Project V.4

This interactive world map visualizes meteorite landing data from a CSV file. Colored dots representing different meteorite types are plotted using their latitude and longitude coordinates, with colors mapping to broad categories like Chondrites, Achondrites, Irons, and Stony-Irons. The visualization uses `d3.geoNaturalEarth1` projection, `d3.geoPath` for rendering map features, and `topojson-client` to load world atlas data. A clickable legend allows filtering the points by category and subcategory.

Nov 16, 2024

Loading thumbnail…

Meteor Landings Project V.3

This visualization presents the locations and characteristics of meteorite landings on a world map. Using D3.js with the `geoNaturalEarth1` projection and `geoPath`, it renders landings as scaled circles based on mass. The map uses the D3 `scaleSqrt` for radius and color-codes points by meteorite class. An interactive legend filters visible points by broad category and subcategory. Geographic data is fetched from a TopoJSON world atlas via `topojson-client`; landing data comes from a CSV file.

Nov 9, 2024

Loading thumbnail…

Meteor Landings Project V.2

This world map visualization displays meteorite landing locations, using a custom D3.js projection and geoPath to render country outlines and graticules. Each meteorite is plotted as a circle with size scaled by its mass and color-coded by broad category—chondrites, achondrites, irons, or stony-irons—derived from the recclass field, with a legend explaining the scheme. The data comes from a CSV file, and the map’s base geography is loaded from TopoJSON via topojson-client.

Oct 30, 2024

Loading thumbnail…

Meteor Landings Project V.1

A natural Earth projection world map displays meteorite landing sites as red points, layered over country outlines and graticule lines. The visualization loads world geography from a TopoJSON file via `topojson.feature` and projects it with `d3.geoNaturalEarth1` and `d3.geoPath`. Meteorite coordinates from a local CSV are plotted as circles using the same projection, with `d3.select` and `.join` managing the SVG elements.

Oct 25, 2024

Loading thumbnail…

World Map Landings

This world map visualization plots meteorite landing sites using a Natural Earth projection, with each landing marked by a small circle. The map renders country boundaries and a graticule using `d3.geoPath` and `geoNaturalEarth1`, with the `topojson-client` library converting the world atlas data into GeoJSON features. Meteorite locations come from the `@reddishmatthew/meteorite-landings` package, while city coordinates are sourced from a Simplemaps database. The visualization projects each landing's latitude and longitude onto the map to show their global distribution.

Oct 24, 2024

Loading thumbnail…

Pseudo-Viz of Spacewalks

This pseudo-visualization uses horizontal bars to show the duration of spacewalks, with their lengths proportional to the data values. Overlaid circles use categorical colors to distinguish different spacewalkers, each positioned at a corresponding vertical index. The visualization employs the d3 selection API to build the SVG scene, combining a `length` module that renders rectangles with a `hue` module that draws colored circles. The data is a simple array of five values, and the design imitates a rough sketch of spacewalk tracks.

Sep 26, 2024

Loading thumbnail…

Meteor Landing Scatter Plot

This scatter plot maps meteorite landings by their longitude and latitude coordinates, effectively forming a world map from the NASA Meteorite Landings dataset. The visualization uses D3's `scaleLinear` for both axes, with fixed ranges of -180 to 180 and -90 to 90, and renders semi-transparent circles at each landing site. Axes and labels are generated via D3's `axisLeft` and the `@curran/axis-labels` helper library. The code imports data from the `@reddishmatthew/meteorite-landings` package and builds the chart within an SVG container.

Sep 18, 2024

Loading thumbnail…

Spacewalks

This visualization displays 433 spacewalks chronologically, grouped by spacewalker, with each walk shown as a bar whose length represents duration. The data comes from NASA and is loaded from a CSV file. The view also ranks spacewalkers by total number of walks and by cumulative duration. The code uses D3 to parse the data and render the SVG elements.

Sep 10, 2024

Loading thumbnail…

Near Earth Comets

A near-Earth comet dataset is loaded from a CSV file, and its orbital elements are displayed as JSON. The visualization shows the raw quantitative attributes for a single comet, including eccentricity, inclination, perihelion, aphelion, and orbital period. The code parses the data and prints it to the screen as a text-based representation, using plain JavaScript and the `data.csv` import. This example emphasizes the data structure rather than a graphical rendering of the orbits.

Sep 10, 2024

Loading thumbnail…

Meteorite Landings

The visualization maps meteorite landings across the globe, encoding each fall's mass (g) through mark size and layering class type and chronological order over geographic position. It uses D3's `geoPath` for the base map and applies a sequential color scale to distinguish meteorite classifications, while a time-based slider filters year ranges. The dataset from NASA's Meteoritical Society is loaded via ESM imports, with numeric parsing of mass and coordinates handled in the data preprocessing phase.

Sep 10, 2024

Loading thumbnail…

Largest Black Holes

This animation visualizes the relative solar masses of the ten largest known black holes, starting with the Sun and scaling up to TON 618. Each black hole appears as a colored circle that grows sequentially, with its name and rank labeled beneath. The visualization uses D3.js transitions to animate the circle radii and text opacity over time, with data sourced from largest.org’s list of the nine largest black holes.

Sep 10, 2024

Loading thumbnail…

Circle Practice W/ D3

This example builds a static, abstract pictogram from hardcoded arrays of circle objects, rendering each with D3's `selectAll` and data joins. The data list defines positions, radii, and fill colors, producing a tree-like figure with green foliage, a brown trunk, and layered semicircular shapes on both sides. The SVG canvas has a bright cyan background, and all circles use a uniform opacity of 0.708. It demonstrates D3's declarative approach to binding data to SVG circle elements without any interactive or animated behavior.

Aug 28, 2024