Skip to main content
100%

Smoothed D3.js Radar Chart

✓ Published0🌍 Public
BBartekDu
Last edited Apr 13, 2017
Created on Mar 16, 2017

This example presents a smoothed radar chart comparing three smartphone brands—iPhone, Samsung, and Nokia Smartphone—across eight attributes like Battery Life and Price of Device. The visualization loads nested JSON data via `d3.json`, then converts it to an array of `values` arrays. Rendered using SVG with animated, rounded strokes, it employs `d3.scale.ordinal` for categorical colors and a linear radius scale for value mapping.

AI-generated description

this version loads nested data from data.json:

index.html

//Load the data and Call function to draw the Radar chart
d3.json("data.json", function(error, data){
	RadarChart(".radarChart", data, radarChartOptions);
});

then, it converts the nested data into an array of values arrays:

radarChart.js

// convert the nested data passed in
// into an array of values arrays
data = data.map(function(d) { return d.values })

an iteration on the bl.ock Radar Chart Redesign created by @nbremer

forked from <a href='http://bl.ocks.org/micahstubbs/'>micahstubbs</a>'s block: <a href='http://bl.ocks.org/micahstubbs/44bb05aab218a40a4c12'>radar chart for nested data</a>

https://gist.github.com/micahstubbs/44bb05aab218a40a4c12

cc0-1.0 Licensed

Similar vizzes