Michael Milano

@mmilano6·13 public vizzes

Data Tree Of Meetings

This interactive visualization shows a hierarchical tree of world regions and countries using a horizontal icicle layout, with the root "World" branching into continents, subregions, and individual nations. The SVG rendering uses D3.v5’s `tree()` layout and `linkHorizontal()` path generator, while custom zooming is enabled via D3’s `zoom()` interaction module. Text labels are sized inversely to depth, and the underlying JSON data structure is parsed with `hierarchy()` before layout.

Apr 27, 2020

Loading thumbnail…

Smiley Face Max: React Round 2

This visualization presents a large, stylized smiley face constructed from overlapping SVG circles and a custom arc for the mouth. Built with React and D3.js, it demonstrates component-based rendering where separate modules define the face's background, body, eyes, and mouth. The eyes feature layered circles of varying sizes and colors, creating a complex, cartoonish appearance. The static composition uses D3’s `arc` generator to shape the smile, while React manages the SVG elements and their positioning within a 960x500 canvas.

Feb 15, 2020

Loading thumbnail…

Smiley Face Max: React

This example shows an oversized smiling face constructed from multiple SVG circles and a curved path, rendered with React components. The face includes elaborate layered eyes built from a series of scaled yellow circles with white and outlined highlights, along with a simple mouth created using the D3 arc generator. Each facial feature is a separate React component, such as `BackgroundCircle`, `Eyes`, and `Mouth`, receiving props for positioning and sizing. The visualization demonstrates reusable component architecture with D3’s `arc()` for the mouth geometry and ReactDOM for rendering the SVG output.

Feb 14, 2020

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.

Feb 6, 2020

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.

Jan 21, 2020

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.

Jan 21, 2020

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.

Jan 15, 2020

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.

Jan 14, 2020

Loading thumbnail…

Data Tree

This visualization shows a hierarchical tree of world regions and countries, with countries nested under their respective continents and subregions. The tree is rendered with SVG paths connecting parent and child nodes, using a horizontal layout where text labels display country names at sizes that decrease with depth. The code uses D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` APIs to compute the layout, and includes zoom functionality via `d3.zoom`. Data comes from a static JSON file containing the geographic hierarchy.

Jan 9, 2020

Loading thumbnail…

Melting and Munging

A line chart displays projected population trends from 1950 to 2100 for major world regions, using data from UN population estimates. The visualization uses D3 v5 with React, rendering SVG paths via `d3.line` and `curveBasis`. Data is processed through a custom "melting" function that reshapes wide CSV data into tidy form, with `d3.nest` grouping by region and `d3.scaleOrdinal` assigning colors. A color legend is generated using a reusable `colorLegend` component.

Jan 9, 2020

Loading thumbnail…

A Week of Temperatures Around the World

This visualization displays temperature readings for a week, using a line chart to show how temperatures change over time for a set of cities. The chart uses time on the x-axis and temperature on the y-axis, with each city assigned a distinct color from a sequential color scale. The visualization is built with D3 version 5, specifically using `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` with a curve basis to smooth the data. A legend showing the color-to-city mapping is rendered via a custom `colorLegend` component, and the project is structured as a React application that loads data from a CSV file.

Jan 3, 2020

Loading thumbnail…

making a bar chart

This example shows a horizontal bar chart comparing the populations of ten countries, with each bar’s length encoded by population and its vertical position by country name. It loads data from a CSV file using `d3.csv`, then renders the chart with D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` utilities. The bars are drawn as SVG rectangles inside a translated group, with axes appended via `g.call()`. The visualization highlights the stark population differences among the listed nations.

Jan 1, 2020

Loading thumbnail…

smiley face

A yellow circle with black outlines forms a smiley face, complete with eyes, eyebrows, and a smiling mouth. The eyebrows animate by moving upward and then returning to their original position over four seconds. Built with React and D3.js v5, the visualization uses SVG shapes like circles and rectangles, with the mouth drawn via the `arc` function. The animation is achieved through chained `transition` calls that modify the eyebrow group's transform attribute.

Dec 30, 2019