Radar chart

100%

✓ Published0🌍 Public

Last edited Nov 19, 2020

Created on Nov 19, 2020

This radar chart compares weekly usage percentages of 21 smartphone and tablet services, such as email, social networks, and online gaming, across two data series. It renders a multi-level circular grid with axis labels and value markers, using D3 v3’s selection and data join APIs to draw SVG polygons for each series. The chart supports click and double-click interactions that adjust fill opacity to highlight or reset series. A separate legend identifies the two devices by color, sourced from an ordinal color scale.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Radar chart

Two radar charts compare weekly service usage between smartphone and tablet owners across 22 axes. Each axis represents a service, such as Emails or Social Networks, with values plotted as percentages. The chart uses D3 v3 to render SVG polygons with translucent fills, supporting click and double-click interactions that adjust fill opacity. The legend identifies each device category, while the surrounding code draws concentric grid levels and axis labels.

Yyvesponcon

95% match

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.

Mmoves123

80% match

Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed radar chart compares smartphone attributes—battery life, brand, contract cost, design, connectivity, screen size, price, and "smartphone" status—across three phone models using normalized values up to 0.5. The visualization employs D3.js to render seven concentric grid levels, radiating axes, and smoothed, glowing polygon areas with colored dots for each data series, plus animated transitions. Built with React and SVG, it uses D3’s `scale.ordinal` for color coding and `d3.scale.linear` for radius mapping, and includes a blur filter for the glow effect.

RRoy Kuijper

79% match

Loading thumbnail…

D3.js Updating Radar Chart

An updating radar chart visualizes smartphone survey ratings across axes like battery life and brand, with three product categories as overlapping, colored polygons. Built with D3.js, it uses animation to toggle legend visibility, filter axes, invert scales, adjust ranges, and modify colors or size in sequence. Data is mutated via JavaScript methods like `slice()` and `push()`, while SVG layers keep hover interactions and tooltips above chart elements.

KKuerzibe

79% match

Loading thumbnail…

radar

A radar chart displays a single phone's ratings across eight attributes such as Battery Life, Brand, and Price, measured on a scale from zero to one. The chart uses a five-level circular grid with axes for each attribute and highlights the data point's area in steelblue. Built with D3.js v5, the visualization generates an SVG using a custom `RadarChart` function with ordinal color scaling and percentage formatting.

AAkshay

79% match

Loading thumbnail…

Fork of Smoothed D3.js Radar Chart

A smoothed radar chart compares survey ratings for iPhone, Samsung, and Nokia smartphones across eight attributes like battery life and price. Three colored blobs with rounded, cardinal-closed paths show each phone’s values, overlaid on seven concentric grid levels labeled with percentage formatting. The D3.js v3 code builds the SVG chart from scratch, using ordinal color scales for series, linear radius scales for the grid, glow filters for styling, and interactive tooltips via hover events.

Ttiffycshsf

79% match

Loading thumbnail…

Smoothed D3.js Radar Chart

This gallery example presents a smoothed radar chart comparing smartphone attributes across three brands, using a dataset that scores features like battery life, brand, and price. The visualization displays aggregated values as colored, rounded polygons on a circular grid, with level labels and axes indicating value scales. The chart is built with D3.js version 3.5.6, using `<svg>` elements for rendering, a linear scale for radius, and an ordinal color scale to distinguish the three data series. The code includes a glow filter and calculates the maximum domain from the data to ensure all values fit within the plot.

WWesselSmit

79% match

Loading thumbnail…

Radar Analysis Test

This radar chart compares three smartphone brands—Apple, Samsung, and Nokia—across eight consumer preference axes such as Battery Life, Brand, and Price of Device. A dark-themed SVG rendering uses d3.lineRadial with curveLinearClosed to draw five concentric level lines, while d3.scaleOrdinal assigns distinct colors to each brand’s filled polygon. Axis lines and labels are generated from the dataset, with animated opacity and dot markers highlighting each brand’s value profile.

Ooptimizeresume

78% match