letstryd3

100%

✓ Published1🌍 Public

Last edited Apr 22, 2023

Created on Jan 4, 2023

This example visualizes a historical dataset of individuals’ birth and death dates as an interactive timeline. It renders circles for each person along a horizontal time axis, with a filtered subset highlighted in a different color. The visualization uses D3 v7 to create SVG elements, including year markers and draggable controller points that adjust the selected range. It incorporates custom curve logic for smooth path interpolation and applies color coding to distinguish between the full dataset and the currently selected time window.

AI-generated description

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

Similar vizzes

Loading thumbnail…

letstryd3

A timeline visualization displays the birth dates of historical figures as blue circles positioned along an SVG axis built with d3.scaleTime and d3.axisBottom. Users can click and drag any circle to reposition it. The code computes a slope to the nearest later birth date, calculates distance to nearby circles, and moves all clustered points along that vector during the drag using d3.pointer and circle selection filtering.

Pparniantaghipour

91% match

Loading thumbnail…

continues1.js

This example visualizes a dataset of authors with their birth and death dates by mapping each person to a position along a continuous, interactive Bézier-like curve. The rendering shows orange circles placed along a red skeleton curve, demonstrating a custom curve-subdivision algorithm. The code implements the visualization using D3 v3 for SVG rendering and data loading from a TSV file, while a custom `SDCurve` class defines the curve geometry with adjustable resolution and degree. Users can interact with the curve through mouse events, including dragging and double-clicking.

Pparniantaghipour

78% match

Loading thumbnail…

curve again.js Demo

This example shows an interactive SVG visualization of a smooth curve generated from a set of control points, with a dataset of historical figures plotted as points along the curve based on their birth dates. The visualization uses the D3.js v3 library with a custom SDCurve object implementing dynamic Levin-type subdivision for curve refinement. Users can drag control points to reshape the curve in real time, and the data points reposition accordingly, illustrating how the curve acts as a timeline mapping individuals’ birth dates to positions in two-dimensional space. The rendering is done via SVG circles and paths, with data loaded from a TSV file.

Pparniantaghipour

75% match

Loading thumbnail…

HTML Starter

This example shows a minimal timeline of four dates using D3.js, rendered as small circles positioned along an SVG line. The visualization uses `d3.scaleTime` to map the date domain to pixel coordinates, with each circle’s center placed via the `cx` attribute and labeled with its full date string. The code imports specific D3 modules (`select`, `scaleTime`, etc.) and appends both circles and text elements to an SVG wrapper. It relies on hardcoded data (four `Date` objects) rather than an external dataset, demonstrating a bare-bones setup for time-based scatter plots.

JJeffrey Mcintyre

75% match

Loading thumbnail…

kidingme.js Demo

This demo uses a B-spline curve generated with the SDCurve library to map the birth dates of notable historical women from a TSV dataset. Each person is represented as a small orange circle positioned along the curve, with the data sorted chronologically by birth date. The visualization supports interactive dragging of the curve’s control points in SVG, allowing users to reshape the curve and see how the circle placement updates in real time. The demo is built with React, D3 v3 for SVG manipulation and event handling, and includes dynamic curve subdivision for smooth rendering.

Pparniantaghipour

74% match

Loading thumbnail…

working Demo

This demo shows a red interactive curve overlaid on a scatterplot of historical female writers’ birth and death dates from a TSV dataset. Users can drag points on the curve’s control polygon to reshape the smooth spline in real time, with the underlying data points repositioned along the curve. The visualization is built with React and D3 v3, rendering SVG paths via `d3.svg.line` and a custom `SDCurve` class that implements Dyn-Levin subdivision.

Pparniantaghipour

73% match

Loading thumbnail…

Timeline

This example shows an interactive timeline of events, rendered as numbered circles positioned along a horizontal line. Each circle represents a data point with a label, and hovering highlights the corresponding event. The visualization is built with React and rendered to SVG, using D3’s `d3.scaleTime` and `d3.axisBottom` to construct the time axis. Data is loaded from the European Parliament’s open data portal, and the layout is calculated with a custom React component that maps event dates to x-coordinates.

Aannesmets

73% match

Loading thumbnail…

firstDemo

A scatterplot of historical figures is drawn along a smooth red curve, with each point representing a person from a tab-separated dataset. The visualization uses d3.svg.line to connect points and d3.tsv to load the data, sorting individuals by birth date. The SVG rendering places orange circles along the curve, which is constructed using a custom SDCurve class with adjustable parameters. The user can interact with the curve, though the primary display focuses on the chronological distribution of birth years across the dataset.

Pparniantaghipour

73% match