This is where I prototype and experiment
chart = {
const svg = d3.select(DOM.svg(width, height+(margin*2)));
const containerWidth = width-(margin*2);
const containerHeight = height-(margin*2);
const container = svg.append('g')
.attr("width", containerWidth)
.attr("height", containerHeight)
.attr('transform', `translate(${(width/2)+margin}, ${(height/2)+margin})`);
const path = container.append('path')
.attr("d", radarLine(data))
.attr("fill", color)
.attr("fill-opacity", 0.1)
.attr("stroke", color)
.attr("stroke-width", 2);
const interval = setInterval(function() {
const updatedData = updateData();
path.transition()
.duration(1000)
.ease(d3.easeCubicInOut)
.attr("d", radarLine(updatedData));
}, 1000);
return svg.node();
}
radius = (height-(margin*2)) / 2
margin = 30
height = 400
radarLine = d3.lineRadial()
.curve(d3.curveCardinalClosed)
.radius(d => rScale(d))
.angle((d, i) => i * angleSlice)
angleSlice = Math.PI * 2 / axesLength
axesLength = data.length
rScale = d3.scaleLinear()
.domain([0, maxValue])
.range([0, radius])
color = "#EDC951"
data = updateData()
function updateData() {
const noise = Array.from({length: n}, d3.randomNormal(0, contrast));
const vals = d3.zip(base, noise).map(vals => d3.sum(vals));
return vals.map(d => d < minValue + offset ? minValue + offset : d > maxValue - offset ? maxValue - offset : d);
}
base = Array(n).fill(5)
import {slider} from "@jashkenas/inputs"
d3 = require("d3@6")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
