Fork Circular calendar

100%

Fork Circular calendar

✓ Published2🌍 Public

Last edited Apr 7, 2024

Created on Mar 27, 2024

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

circular calendar

This circular calendar visualizes a year as a ring of colored arcs, with each month shaded by season and individual days marked as small strokes. The visualization plots specific project dates (labeled DS, N, S, and special) as points on the ring, using a custom degree conversion from day-of-year. Built with D3 v4 and SVG, the code draws concentric arc segments via `d3.arc()`, positions them with trigonometric calculations, and applies CSS classes to color months, weeks, and days.

PPatrick Wojda

83% match

Loading thumbnail…

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.

LLiml

82% match

Loading thumbnail…

Fork of Donut

A fork of a donut chart, this example displays the current day of the year as a percentage of the total days in the year. The visualization renders a semi-circular progress gauge using D3’s `arc` generator, with a gray background arc and an orange foreground arc that advances as the year progresses. The code calculates the progress by dividing the day-of-year by the total days, using D3’s `timeFormat`. Built with React and rendered as SVG, the gauge includes a centered text label showing the rounded percentage.

Ddriftcafe

77% match

Loading thumbnail…

Fork of Fork of reproduction of somethind 4th cell

This example shows a radial bar chart plotting five data series as concentric circular rings, with each series represented by a wedge extending from the center to a value on a 0–100 scale. The visualization uses D3.js version 7.8.4 to generate an SVG, employing `d3.lineRadial` with `curveLinearClosed` to create the series paths, `d3.scaleLinear` for the radius mapping, and SVG circles as grid levels. Axis labels are positioned using trigonometric calculations based on the angle slice for each series.

Rrwata97

77% match

Loading thumbnail…

Fork of Rendering Data with React & D3

A radial burst visualization displays CSS named colors as colored arcs arranged in a full circle, with each arc’s fill matching its corresponding color’s hex value. The example loads color data from a CSV file using `d3.csv`, then manually computes each arc’s start and end angles by dividing 2π evenly among the data points. React manages the loading state and renders the SVG paths, while D3’s `arc` generator constructs the geometry. The code uses React hooks (`useState`, `useEffect`) alongside D3 utilities, with all rendering performed in SVG.

SSampras Dsouza

75% match

Loading thumbnail…

Fork of Rendering Data with React & D3 FORK

A radial burst of CSS named colors fills an SVG canvas, with each color represented as an arc segment emanating from the center. The visualization uses D3's `pie` layout and `arc` generator to compute the path geometry, while React handles the component rendering and state management. Data loads asynchronously from a remote CSV file containing color names and their RGB hex values, which are then mapped directly to the `fill` attribute of each `<path>` element. The example demonstrates integrating D3's computational utilities with React's declarative UI paradigm.

CChristopher Perisho

75% match

Loading thumbnail…

Fork of Rendering Data with React & D3

A radial burst chart visualizes CSS named colors as equal-width arcs around a central point, with each arc filled using the color’s RGB hex value. Built with React for the UI and D3 v5 for data loading and geometry, the code uses `d3.csv` to fetch the dataset, `d3.pie` to compute arc angles, and `d3.arc` to generate SVG path commands. The SVG is rendered by React.

SSunbinSong

75% match

Loading thumbnail…

Fork - Colors pie view with D3 and React

A circular pie chart displays color swatches in a color wheel, with each slice filled by a color from a CSV dataset loaded from a GitHub gist. This D3.js and React example uses `d3.arc` to generate the pie slice paths and `d3.pie` to compute angular values, though the code manually calculates start and end angles. The chart is rendered as an SVG, centered within a fixed 960 by 400 viewport. Individual color values from the CSV's "HEX" column directly determine the fill of each path, creating a rainbow-like ring of distinct hues.

DDeepak Tomson

75% match