Lifespan events using segmented bézier curves

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.

75% match

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.

73% match

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.

71% match

letstryd3

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.

71% match

Fork of Fork of Line_Stroke_Death

This line chart displays average life expectancy by year, using a single orange stroked path to trace the trend over time. The visualization is built with D3 v5, using `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and a `line` generator with `curveBasis` for smoothing. The SVG renders within a fixed 960x500 viewport, with data parsed from a CSV hosted on a GitHub gist. The chart includes labeled axes for “Year” and “Averag_Life_Expectancy,” with gridlines drawn via tick sizes, and a title placed above the plot area.

GGogineni44

curve again repair

This example plots the birth dates of historical women writers along a smooth, interactive Bézier curve. The curve is created using a custom SDCurve library, which subdivides a control polygon using a dynamic Levenberg algorithm, and is rendered as an SVG with D3.js. Each birth date is mapped to a point on the curve, with orange circles marking the positions, while the underlying data is loaded from a tab-separated values file (data.tsv) containing names and dates.

HTML Starter

The visualization plots four individuals' ages against their heights as colored circles on a scatterplot with labeled axes. Each circle animates upward from the baseline to its final position using d3 transitions with staggered delays. Hovering over a point enlarges it and displays the person's name via a text element. D3 v5 scales, axes, and the Tableau10 color scheme manage the mapping, while the data is hardcoded in the chart script.

Ddanielstaal

Fork of Line_Stroke_Death

This example displays a line chart of average life expectancy over time, with yearly values plotted along the x-axis and the corresponding life expectancy on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `scaleTime`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` for smooth interpolation. Data is loaded from a CSV file containing stroke-related statistics, and axes are annotated with labels and a title. The line is styled as a thick orange stroke within a margin-based layout.

Kkollirohit2000