moves123

@moves123·2 public vizzes

Smoothed D3.js Radar Chart

This example shows a smoothed radar chart comparing multiple entities across several dimensions, with data for hospitals and products rendered as overlapping, semi-transparent polygons. The visualization uses D3.js version 3.5.6 to generate an SVG with circular grid lines, radiating axes, and animated blobs, with a glow filter added for visual emphasis. It relies on D3 scales for ordinal colors and linear radius mapping, with options for rounded strokes, tooltips, and level labels. The chart is built for React integration and uses static, embedded data arrays.

Apr 26, 2020

Loading thumbnail…

Smoothed D3.js Radar Chart

A smoothed D3.js radar chart compares five smartphones across four attributes—battery life, brand, contract cost, and design quality—using overlapping, semi-transparent polygons. The chart renders in SVG with animated, cardinal-closed paths that round the blob strokes, and includes a circular grid with percentage labels, a glow filter, and tooltips. Built with D3 v3 and React, it uses `d3.scale.ordinal` for colors, `d3.scale.linear` for radial scaling, and a custom `RadarChart` function adapted from Nadieh Bremer’s design.

Apr 10, 2020