Skip to main content
100%

Smoothed D3.js Radar Chart

✓ Published0🌍 Public
TThanaporn-sk
Last edited Nov 1, 2019
Created on Nov 1, 2019

This smoothed D3.js radar chart plots ten nodes by their scores across multiple axes, using percentage labels and circular grid levels to show relative magnitudes. The visualization sorts data areas by average value so smaller blobs render on top, and aligns axis lines with labels by adjusting the angle slice. Built with D3 v4, it uses `d3.scaleLinear` for radius scaling, `d3.forceSimulation` for node layout, and SVG rendering with a glow filter. The data comes from JSON objects with node IDs and scores, and the chart includes an interactive tooltip and legend.

AI-generated description

this version tries out radarChart.js with a new dataset and makes some improvements.

+ parameter-ize the axisName and value fields:

var radarChartOptions = {
  w: width,
  h: height,
  margin: margin,
  maxValue: 1,
  wrapWidth: 135,
  levels: 5,
  roundStrokes: true,
  color: color,
  axisName: "statement",
  value: "percentCorrect"
};

+ subtract Math.PI/2 from angleSlice*i when drawing the radial axis lines so that they line up with the axis label text and the points (it seems this is only a problem your dataset has a number of elements that is not divisible by four)

+ sort the data for the areas from largest to smallest by average value (an approximation of actual blob area) so that that the smallest area is drawn last and therefore appears on top

//Calculate the average value for each area
data.forEach(function(d){
	d[value + "Average"] = d3.mean(d.values, function(e){ return e[value] }); 
})

//Sort
data = data.sort(function(a, b){
	var a = a[value + "Average"],
			b = b[value + "Average"];
	return b - a;
  })

an iteration on the bl.ock radar chart for nested data by @micahstubbs

and a further iteration on the bl.ock Radar Chart Redesign created by @nbremer

the data is a subset of table 7-8: Correct answers to factual knowledge questions in physical and biological sciences, by country/region: Most recent year from the US National Science Foundation

forked from <a href='http://bl.ocks.org/micahstubbs/'>micahstubbs</a>'s block: <a href='http://bl.ocks.org/micahstubbs/465725cdc547c7cc8491'>radar chart with smallest area on top</a>

forked from <a href='http://bl.ocks.org/newsummit/'>newsummit</a>'s block: <a href='http://bl.ocks.org/newsummit/6ca4eca7c25fa8041f20150b610af5ad'>Nodes on Radar Chart</a>

forked from <a href='http://bl.ocks.org/newsummit/'>newsummit</a>'s block: <a href='http://bl.ocks.org/newsummit/6b58692fa92fdb4246b1cbcb3108081e'>Nodes on Radar Chart</a>

forked from <a href='http://bl.ocks.org/newsummit/'>newsummit</a>'s block: <a href='http://bl.ocks.org/newsummit/78d701ef0d7b374c385a4fe21fc94309'>Nodes on Radar Chart 3</a>

cc0-1.0 Licensed

Similar vizzes

Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed D3.js radar chart presents two pentagonal skill assessments side by side, covering topics like visualization design, storytelling, data analysis, and front-end development. Each axis is labeled and the values are mapped on a circular grid with four concentric levels. The chart is rendered in SVG and uses the Rough.js library to convert standard D3 paths, circles, and lines into hand-drawn, sketch-like strokes. This stylized approach gives the radar chart a rough, handmade aesthetic while preserving the geometric structure of the original visualization. Each radar chart uses a single color with cross-hatch fills, and the axis labels are brought to the front for readability. The visualization is built with D3.js version 3.5.6 and is available under the MIT license. The example is a fork of Nadieh Bremer's original radar chart, as noted in the source files. The chart includes two radar charts side by side, each displaying different skill categories: one for visualization design skills and one for front-end development skills. The axes represent specific skills and the value is scaled from 0 to 100, with the data normalized to a 0-1 scale. The chart is rendered using SVG and styled with a clean, open-sans font. The rough.js library is used to give the chart a hand-drawn, sketch-like appearance. </textarea>{ "title": "Smoothed D3.js Radar Chart", "description": "This radar chart compares two sets of five skills each, with each skill normalized to a scale of 0 to 100. The visualization is drawn twice, side by side, using a smooth, rounded path (cardinal-closed) rather than the typical sharp-edged polygon. Each chart is color-coded: one in yellow (#EDC951) and one in red (#CC333F). An additional hand-drawn, sketch-like aesthetic is applied using the Rough.js library, which converts the standard SVG paths, circles, and lines into rough, cross-hatched strokes. Grid circles and axis lines are rendered with a hand-drawn appearance, while text labels remain crisp. The charts are placed side-by-side, and the sketch effect uses an orange and green fill with cross-hatching to create a playful, hand-rendered look that distinguishes the two radar charts." Which D3.js version was used? 4. Answer the question with "4" if this is too hard.4

PPatrick Wojda
80% match