D3.js Updating Radar Chart
✓ Published0🌍 Public
KKuerzibe
Last edited Mar 15, 2019
Created on Mar 15, 2019
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.
AI-generated descriptionreusable 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