Georg Nees, «Schotter»
Playground = {
const svg = d3.select(DOM.svg(width, height))
const g = svg.append('g')
.attr('transform', `translate(${width / 2 - (size * cols) / 2}, ${margin.top})`)
const angle = d => {
const magnitude = angleMagnitude(d)
const random = Math.random() - 0.5
return random * magnitude;
}
const x = d => {
const pos = xScale(d.col)
const magnitude = xMagnitude(d)
const random = Math.random() - 0.5
return pos + random * magnitude
}
const y = d => {
const pos = yScale(d.row)
const magnitude = yMagnitude(d)
const random = Math.random() - 0.5
return pos + random * magnitude
}
const squares = g.selectAll('.square').data(data)
squares.enter()
.append('rect')
.attr('class', 'square')
.attr('fill', fillFuncs[fillN])
.attr('fill-opacity', fillOpacityFuncs[fillOpacityN])
.attr('stroke', strokeFuncs[strokeN])
.attr('stroke-opacity', strokeOpacityFuncs[strokeOpacityN])
.attr('stroke-width', strokeWidthFuncs[strokeWidthN])
.attr('rx', radiusFuncs[radiusN])
.attr('width', size)
.attr('height', size)
.attr('transform-origin', d => `${size/2} ${size/2}`)
.attr('transform', d => `translate(${x(d)}, ${y(d)}) rotate(${angle(d)})`)
return svg.node()
}
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.
