Skip to main content
100%

D3.js Updating Radar Chart

✓ Published0🌍 Public
Aandreaangeli
Last edited May 11, 2017
Created on May 11, 2017

This updating radar chart, built with D3.js and rendered in SVG, animates multi-axis data comparisons through smooth transitions. It visualizes changing values as layered, colored polygons across multiple radial axes, with ring levels, hover interactions, and a configurable legend. The code organizes hover targets and tooltips into separate SVG layers to maintain proper stacking, and exposes accessors for updating data, transitions, colors, and axis ranges, plus array methods like push, pop, and slice for dynamic dataset manipulation.

AI-generated description

reusable updating radarChart

Design based on original by NadiehBremer at Visual Cinnamon

Coding philosophy inspired by Rob Moore

See this block in production with Live Data

Find the Latest Code on GitHub

I figured out enter/exit/update for nested objects by studying Lee Mendelowitz's block and reviewing Mike's comments

Features:

  • Separate layer for hover objects which need to remain on top of chart
  • Separate layer for tooltip which needs to be uppermost layer
  • Events are configurable as options such that external functions can be seamlessly integrated
  • e.g. external tooltips can be configured for mouseover events

Accessors:

by default accessors with no parameters return current values

  • chart.duration(transition-time) // duration of transitions
  • chart.options(object) // many options don't have accessors
  • chart.width(width)
  • chart.height(height)
  • chart.margins(object)
  • chart.data(data) // set data
  • chart.update() // update chart
  • chart.maxValue(value) // maxValue of axis values
  • chart.levels(value) // number of ring levels
  • chart.opacity(value) // opacity of unselected areas
  • chart.borderWidth(value) // width of border surrounding areas
  • chart.rounded(true/false) // select rounded areas
  • chart.events(object) -- chart.events({'legend': {'mouseover': null}})
  • chart.color(d3.scale)
  • chart.colors(object) -- chart.colors({'axis1': 'color1', 'axis2': 'color2'})
operations on data held in chart instance
  • chart.pop()
  • chart.push(row) -or- chart.push([row, row])
  • chart.shift()
  • chart.unshift(row) -or- chart.unshift([row, row])
  • chart.slice(begin, end)
operations performed on data prior to display
  • chart.invert(axis) -or- chart.invert([axis, axis]) // index or "axis label"
  • chart.ranges({'axis': [min, max]})
  • chart.filterAxes('axis') -or- chart.filterAxes(['axis', 'axis'])
  • chart.filterAreas('key') -or- chart.filterAreas(['key1', 'key2'])
convenience
  • chart.keys() // return a list of data keys
  • chart.axes() // return labels of all axes
  • chart.nodes() // return svg object

forked from <a href='http://bl.ocks.org/TennisVisuals/'>TennisVisuals</a>'s block: <a href='http://bl.ocks.org/TennisVisuals/c591445c3e6773c6eb6f'>reusable updating radarChart</a>

mit Licensed

Similar vizzes