Liml

React YearWheel

Fork of Hello VizHub

Fork of YearWheel CodeAnalyze

YearWheel CleanUp

Fork of Webpage testing matrix

YearCalendar

D3 Imagemap

This example demonstrates an interactive image-mapping tool built with React and D3 v7, allowing users to draw rectangular regions over a base map image. Users create selections by dragging the mouse on an SVG canvas, then attach URLs to each marked rectangle via a prompt. The interface includes a list of all selections with edit capabilities, where coordinates and dimensions can be modified or items deleted through a dialog. The implementation uses D3's event handling for mouse interactions, SVG `rect` elements with red transparent styling, and DOM manipulation to update the selection list dynamically.

Rotate svg

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst chart visualizes hierarchical data from the Observable Flare dataset, with each arc representing a node and its size proportional to its value. Users click on arcs to zoom into that subtree, triggering a smooth 750ms animation that repositions and rescales all visible elements. The visualization is built with D3 v5, using `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while color encoding is derived from a rainbow interpolator applied to top-level branches. Transitions employ `transition.attrTween` with an interpolator to animate arc paths and labels during zoom interactions.

Fork of yearwheel b4 adding zoom

Fork of yearwheel b4 fullcricle

Fork of Fork of yearwheel b4 animation

Fork of yearwheel b4 eventcheck

Fork of Fork of yearwheel b4 overflowcheck

Fork of yearwheel b4 360 degreefix

SVG fundamentals

A circular calendar visualization maps events across a year using SVG arcs. The chart displays quarterly color bands and overlaid event markers, with special styling for specific projects. Data includes dates and project names rendered as colored segments. The implementation uses D3 v4's arc generator to create ring sections, with custom date utilities calculating day-of-year positions and converting them to angular coordinates in radians.

Fork of Fork of yearwheel b4 occupiedcheck

Fork of yearwheel b4 occupiedcheck

Fork of Fork of yearwheel with occupiedcheck

Fork of Fork of Fork Circular calendar

Fork of Placing text within a arc year calendar

Arc and path lab

Fork of Fork Circular calendar

Placing text within a arc

Fork Circular calendar

This radial "fork" calendar arranges a full year of days along the circumference of a circle, with months (and quarters) drawn as concentric colored arc segments. Events are encoded as thicker, prominent arcs positioned by their start and end dates, using `d3.arc()` with angles computed from the day of the year. The visualization is rendered as an SVG in a React app with D3 v4, with month and quarter bands colored distinctly and event arcs highlighted. The circular layout supports at-a-glance comparison of seasonal and quarterly spans, and the minimal code example includes commented-out event data for customization.

Fork of D3 v5 Zoomable Sunburst with local json

Fork of Fork of D3 v5 Sunburst diagram

Fork of D3 v5 Zoomable Sunburst using local json

Fork of D3 v5 Zoomable Sunburst