Skip to main content
SimilarExport ZIP
100%

Radar chart

✓ Published1🌍 Public
Yyvesponcon
Last edited Nov 16, 2020
Created on Nov 5, 2020
Forked from Hello VizHub

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Radar chart

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.

Kknut_ivar_osvoll@hotmail.com
95% 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…

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
78% match
Loading thumbnail…

Radar chart

A radar chart displays multiple series of data as colored polygons overlaid on a circular grid of axes, with each axis representing a category. Values are scaled relative to the dataset’s maximum, and percentage labels mark the grid levels. The code uses D3 v3 to build the SVG, calculating polygon points from trigonometric functions and animating fill opacity on mouseover. Grid lines, axis labels, and legends are drawn with `d3.select` and `append`, while color is assigned via `d3.scale.category10()`.

MMohamedZaki
78% 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
78% match
Loading thumbnail…

Radar chart

A radar chart compares multiple quantitative variables on axes radiating from a common center. The code uses D3 v3 with SVG rendering and animation to plot one or more data series as filled polygons, with hover states that adjust fill opacity. Axis labels and percentage level markers are drawn using D3’s selection and append methods, while `d3.scale.category10` handles color encoding. The dataset is supplied inline, and the chart is rebuilt dynamically through a custom `RadarChart.draw` function.

MMohamedZaki
77% 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
77% match
Loading thumbnail…

Radar chart

A radar chart displays multivariate data as a polygonal series overlaid on concentric circular gridlines and radiating axes. Multiple data series appear as distinct filled polygons, with hover interactions that dim other areas to highlight the selected series. The visualization is built with D3 v3, rendering SVG elements like lines, polygons, and text. Axis labels and grid values are positioned using trigonometric calculations, while the data is sourced from the gist’s embedded dataset and animated transitions respond to mouse events.

MMohamedZaki
77% match