mshoer

@mshoer·2 public vizzes

Circular Geometric Patterns

Five circles appear around the center of an SVG, each drawn at a radius influenced by a factor of seven and connected by a closed polyline. The circles are sized by the distance between the first two points, creating an overlapping geometric composition. Implemented with React and D3 v5, the visualization uses `range`, `line`, and `curveLinearClosed` to generate the points and path, with the circles and stroke rendered directly as SVG elements. The example explores ordered circular symmetry through minimal code.

Apr 26, 2020

Loading thumbnail…

Vega-Lite API Template

This example plots meteorite landings by longitude and latitude, with point size encoding mass and color encoding the year of impact. It uses the Vega-Lite API wrapper (`vl.markCircle`, `.encode`, and field specifications) to declaratively build the chart, which is then rendered to SVG. Data is loaded via D3’s `csv` function from a gist URL, and a custom config adjusts axis colors and font sizes. The chart auto-fits the window and includes a tooltip handler from vega-tooltip.

Apr 26, 2020