Trio-

@DoubleTrio·4 public vizzes

Polygons

This interactive visualization explores polygon triangulations through codewords, combinatorial representations of how diagonals partition an N-gon. Users can select different N values and codewords from dropdown menus to see the corresponding interior edges drawn as animated paths with staggered stroke-dashoffset transitions. The application uses D3 v7 selections and transitions to animate points, edges, and labels, while codeword generation and geometry calculations are handled by custom JavaScript modules. Colors for interior edges are mapped using `d3.interpolateViridis` based on vertex positions, with buttons to restart or start the animation sequence.

Nov 19, 2023

Loading thumbnail…

Fork of React Starter

This example shows a minimal React application rendering a single SVG visualization: a yellow circle positioned inside an arc segment, centered on a 860×500 canvas. It demonstrates how to integrate D3’s `arc` generator with React’s JSX syntax, computing the arc path from static start and end angles. The code uses React 18’s `createRoot` for rendering and imports D3 v7’s `arc` API directly. The visualization is purely illustrative, with no external data source, and highlights the basic pattern of combining D3 shape generators with React components for SVG output.

Nov 19, 2023

Loading thumbnail…

Fork of Polygons

This example visualizes all valid codewords for an N-polygon, with each codeword represented by a set of interior edges connecting polygon vertices. Users select a codeword from a dropdown menu to see its corresponding geometric interpretation. The visualization animates the drawing of interior edges using stroke-dashoffset transitions, while color mapping interpolates between purple and orange. Built with D3 v7, the code leverages `d3.line`, `d3.transition`, and custom geometry functions to generate polygon points, edges, and codeword-derived diagonals.

Nov 16, 2023

Loading thumbnail…

Fork of Polygons2

This visualization explores the combinatorial structure of polygon dissections by displaying an N-polygon with its interior edges determined by a user-selected codeword. The code uses D3 v7 to render an SVG, with a menu that lets viewers switch between different codewords, dynamically redrawing the polygon's interior line segments based on the selected combinatorial representation. A subtle animation transitions the polygon's points into place on initial load.

Nov 15, 2023