family calendar

100%

family calendar

✓ Published0🌍 Public

Last edited Oct 17, 2018

Created on Oct 17, 2018

This radial calendar maps each family member’s birthday to an angle around a circle, with age increasing toward the center. A blue sweep highlights the current year’s elapsed days. Hovering reveals name, birth date, and age via a tooltip. The visualization is built with D3 v4, rendering as SVG, with birthdays loaded from a JSON file.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/franknoirot/'>franknoirot</a>'s block: <a href='http://bl.ocks.org/franknoirot/5f1b27d6daa60f5d917736880ed8ab36'>family calendar</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Family tree

A radial family tree plots descendants around a central root, with each node’s radial position mapping birth year. Concentric decade rings and labels provide temporal context, while curved links connect parents to children. The visualization is built with D3.js, using `d3.layout.tree` for hierarchical layout and `d3.svg.diagonal.radial` for curved edge paths. Node colors vary by depth, and the SVG rendering uses a custom year-to-radius scale derived from birth dates in the JSON data.

AAce

76% match

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

74% match

Loading thumbnail…

Fork of Family tree

This radial family tree visualization uses a hierarchical layout to display four generations of a family, with each person’s radial position determined by their birth year. Concentric decade rings and labels from 1930 to 2020 provide a temporal context. The code uses `d3.layout.tree` with a radial diagonal projection, `d3.svg.diagonal.radial`, and maps birth years to radii via a custom `yearToY` function. Node colors vary by depth using `d3.scale.category10`, and the SVG rendering includes interactive styling for links and nodes.

AAlex Velez

74% match

Loading thumbnail…

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.

LLiml

72% match

Loading thumbnail…

Calendar Alternate Orientation v4 update

This calendar visualization displays daily fact counts for 2016 as an exploded month grid, with each day colored on a red-to-green scale based on value intensity using a d3.scaleQuantize and a polylinear color gradient. The code uses d3.timeDays, d3.timeMonths, and d3.timeYears to structure the layout, while d3.timeFormat handles date parsing and week/month calculations. A hover tooltip appears via d3.csv-loaded data, and the animation-ready SVG layout arranges months in rows with white grid lines separating cells.

BBBischof

71% 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

70% match

Loading thumbnail…

birthday guesser

This interactive visualization presents a birthday-guessing game in which a calendar highlights a subset of dates and the user answers yes/no questions. The tool displays a year grid, and each of nine cards recolors days according to a shuffled set of magic numbers; the user’s answers progressively narrow the possible dates. The code uses D3 v4 with SVG and animations, drawing calendars via `d3.timeDays`, `d3.timeFormat`, and a quantized color scale, and handles the interaction with click events that advance through the cards.

EEE2dev

70% match

Loading thumbnail…

Calendar Visualization

This calendar visualization displays two-dimensional data as a color-coded heatmap over daily dates from March to July 2020, with each day’s count encoded by cell fill intensity. The SVG rendering uses D3 v5 to bind the JSON data array, while moment.js parses the date strings for positioning. Rect elements receive a class for hover styling, and tooltips are implemented via a custom div that appears on mouseover, relying on D3’s event handling to show the specific count for each day.

Ffloresh

70% match