Skip to main content
100%

D3.Unconf Badge

✓ Published0🌍 Public
TTommyCoin80
Last edited Aug 11, 2017
Created on Aug 11, 2017

This visualization plots failure probability data on Weibull probability paper, with grid lines, axis labels, and a regression line fitted to the points. It also includes a legend distinguishing Kaplan-Meier and Weibull distribution categories. The chart is built with D3 v4, using SVG for rendering and linear scales, with animation parameters for duration and easing.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Fitting a Weibull Curve to a Kaplan-Meier Survival Curve

A D3 v4 animation demonstrates least squares regression fitting of a Weibull curve to a Kaplan-Meier survival curve. The chart displays survival probability over time in months, with the Kaplan-Meier step points in red and the fitted Weibull regression line in blue. The code uses `d3.scaleLinear` for axes, `d3.line` for the fitted curve, and `transition.attrTween` to animate the regression line as it adjusts to the data points. The visualization runs in SVG with linear easing over three seconds, showing how the Weibull parameters are optimized to approximate the empirical survival function.

TTommyCoin80
74% match
Loading thumbnail…

D3 Unconf Badge

A black canvas displays an animated cluster of concentric, rotating square outlines that continuously enlarge and shift. The visualization updates every four seconds, generating a new set of 60 layered rectangles that scale and rotate around the center, creating a pulsing, geometric badge effect. Built with D3 v4, the code uses `d3.transition` for smooth 4-second animations, `d3.interval` to trigger periodic updates, and SVG `rect` elements with CSS transforms for rotation. Each frame recalculates rectangle positions via scaling and rotation math, producing an evolving spiral-like pattern on a stark black background.

KKevinGutowski
71% match
Loading thumbnail…

D3.Unconf 2016 Badge

A flower-shaped badge encodes movie metadata from a JSON dataset, with each flower's petal count, size, and colors mapping to IMDb votes, ratings, and genres. The visualization uses D3 v4 to generate SVG paths for petals and applies a multiply blend mode for overlapping color effects, while D3 scales and Lodash handle data binning and aggregation. A motion blur filter on the SVG defs adds a subtle animated quality to the static rendering.

LLucyI
66% match
Loading thumbnail…

Test D3 Badge Placement

This example demonstrates the mechanics of placing D3 badges using force simulation. It renders a static 1500x1500 pixel pink background, then uses d3.forceSimulation to position badge elements based on simulated physics. The code defines and runs the simulation, though it does not show a complete chart or dataset. The rendering relies on HTML divs for the background, and the badge placement is handled entirely through the simulation’s tick updates, with no external data sources or canvas/geographic APIs involved.

KKevinGutowski
65% match
Loading thumbnail…

Fork of assigment-2 D3

This example shows the distribution of hypertension risk in a dataset, displayed as a pie chart with two categories: no risk (0) and risk (1). The chart uses D3.js v6 with an SVG rendering approach, loading CSV data from a GitHub gist. It employs d3.pie() and d3.arc() to generate the chart slices, with labels showing category names and counts. A color scale assigns distinct colors to each category, and a legend is generated dynamically from the same data.

Pprince.sahith100@gmail.com
64% match
Loading thumbnail…

D3 Example

This stacked bar chart shows the count of Up, Down, and Failed statuses across five days, with each layer’s height representing the cumulative value. It uses D3 v3’s `d3.layout.stack` and `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and a `d3.scale.category10` color scale for the status categories. The data is loaded from a CSV file, and the chart renders as SVG within a React framework, with axes and a color legend added via `d3.svg.axis` and `d3.legend.color`.

Pp4pravin
64% match
Loading thumbnail…

Untitled

This example visualizes the distribution of probability estimates from eight verbal uncertainty phrases (such as “Almost Certainly” and “Almost No Chance”) using kernel density estimation. Each smoothed density curve is colored with a viridis scale based on the group mean, revealing differences in central tendency and spread across categories. The visualization uses D3 v4 to load CSV data from GitHub, compute the means, and render the densities as SVG paths. The kernel density estimator applies an Epanechnikov kernel, while axes, gridlines, and labels are drawn with `d3.axisBottom`, `d3.axisLeft`, and the `d3.scaleSequential` with `d3.interpolateViridis`.

SSimone
64% match
Loading thumbnail…

Non-negative Distributions

This example visualizes non-negative probability distributions, including gamma, lognormal, Pareto, and Weibull. It displays both probability density functions (PDFs) and cumulative distribution functions (CDFs) side-by-side, with each distribution represented by a unique color and animated via SVG. The code uses d3.js for scales, axes, line generation, and brushing, alongside jStat to compute distribution PDFs and CDFs. An interactive brush allows selecting a range on the x-axis, enabling dynamic exploration of the distributions. The visualization is built with Blockbuilder and rendered using SVG animations.

SSpaceActuary
64% match