pinto-gogol

100%

✓ Published0🌍 Public

Last edited Mar 30, 2017

Created on Feb 26, 2017

Three animated curves plot loss development factors from a CSV dataset, showing the change in gross, net, and deductible layers as claims age. The crimson, seagreen, and steelblue lines transition between scaled and unscaled states using `d3.transition` and `d3.line`. A semi-transparent area, built with `d3.area`, highlights the difference between the gross and deductible layers, and a net line fades in to show the layer’s standalone curve. The SVG animation cycles through phases to illustrate the impact of an increased limit factor.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Loss Triangles

The visualization displays an animated "loss triangle" of paid insurance claims, with values shown as text labels plotted by accident year and development age. A checkbox toggles the x-axis between development age and calendar year, causing the labels to slide horizontally across the chart. The SVG is rendered with D3.js, using linear scales, a transition with linear easing and per-element durations, and color brewer sequential palettes for the ordinal scale. Data comes from a CSV file of paid amounts.

SSpaceActuary

73% match

Loading thumbnail…

Animated area chart with linear gradients

Three synthetic datasets are drawn as smooth, gradient-filled area charts, with each series represented by a different color from the D3 `schemeDark2` palette. The visualization shows how three numeric trends evolve over 30 evenly spaced points, using `d3.area` with `curveMonotoneX` and linear gradients defined in SVG `defs` to fade each fill to white. A legend with interactive mouseover, mouseout, and click handlers toggles series emphasis, while custom axes with dashed gridlines and bold labels are rendered via `d3.axisBottom` and `d3.axisLeft`. The animation is implied by the static SVG, though no transition is present in the code.

AAlexDaGr8

67% match

Loading thumbnail…

Gist ed9f5cb822cdadb5216c

A normal probability density curve animates from a flat baseline into a bell-shaped distribution on click. Each click repositions the curve’s mean to the mouse’s x-coordinate, with the area under the curve filling pink while the outline stays black. The code uses jStat to generate PDF values across a fixed domain, then d3.svg.area and d3.svg.line with basis interpolation to draw smooth shapes. Transitions with `.delay()` and `.duration()` animate the path’s `d` attribute, and the svg’s click event drives the updates.

SSpaceActuary

66% match

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 v6 scatter plot visualizes insurance data, mapping BMI and charges via the extensible `scatterPlot()` chart factory. The SVG rendering initially plots petal width against sepal length, then cycles through four data columns every two seconds, animating the axis scales and circles with `setInterval`. The chart employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while the getter-setter pattern supports dynamic updates. Data loads as CSV from a remote gist, with custom labels added for the x- and y-axes.

Ssrivalliwuyyuru

66% match

Loading thumbnail…

data-space-transition

Four animated transitions show how the same dataset—eight demographic groups with percentages—can be represented as rectangles and lines along a shared axis. A sliding vertical midpoint shifts between two values, with each transition morphing the visual encoding between bar lengths, path strokes, and interpolated rect tweens using d3 transitions. The SVG and canvas renderings cycle through these states on click, preserving color coding and axis labels. The code relies on d3 selections, transitions, and interpolators to animate the geometric transformations.

11wheel

66% match

Loading thumbnail…

AnimatedOpenSAPLines

This example demonstrates a line chart with animated drawing, using D3.js and SVG. Six time-series datasets are plotted, with each line colored via a categorical scale. The animation is achieved by overlaying a white SVG `rect` that is resized via a transition, acting as a curtain to reveal the lines as if they were being drawn live. A vertical guideline sweeps across the chart in sync with the reveal, and a checkbox toggles the guideline and curtain visibility.

CCBasis

66% match

Loading thumbnail…

Contour Plot III

A contour plot displays animated isolines of a mathematical function, with colors shifting through a red-blue diverging scale as the threshold values change over time. The visualization computes a grid of sine-based values, then uses d3-contour to generate contour geometries at varying thresholds. d3.geoPath draws these shapes onto a Canvas element, while d3.scaleSequential and d3.interpolateRdBu map contour values to colors. A d3.timer drives the animation, continuously updating the thresholds to create the moving contour bands.

Mmbostock

65% match

Loading thumbnail…

Loss Limiting

This visualization displays the results of a Monte Carlo simulation that models losses subject to a cap or limit. Each vertical bar represents one simulated scenario, which combines a Poisson-distributed number of individual gamma-distributed losses. The chart separates each bar into two stacked segments: a light blue portion shows the capped loss amount, while a darker blue segment shows the excess over the cap, making the effect of the loss-limiting mechanism immediately visible. The bars are sorted by total loss, and a line traces the uncapped total. The code uses the `jStat` library for sampling from gamma and Poisson distributions and D3.js for rendering the SVG output.

SSpaceActuary

65% match