Published
Edited
Jan 19, 2021
3 stars
md`# Accidental Runes
Was trying to create irregular circles, tripped over trigonometry, but held my head up high and took it from there!
`
chart = {
const svg = d3
.create("svg")
// .attr("viewBox", [-width / 2, -height / 2, width, height + 20])
.attr("viewBox", [0, 0, width, height])
.style("background-color", "#E5E5E3");
svg
.append('rect')
.attr('class', 'frame')
.attr('fill', 'none')
.attr('stroke', 'black')
.attr('width', width)
.attr('height', height)
.attr('stroke-width', 6);
svg
.selectAll('path')
.data(data)
.enter()
.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 1.1)
.attr("d", line)
.attr('transform', (d, i) => {
var row = Math.floor(i / cols);
var col = i % cols;
return `translate(${(col + 1) * 25},${row * 30 + 90})`;
});
svg
.selectAll('text')
.data(credit)
.enter()
.append('text')
.attr('text-anchor', 'start')
.attr('transform', (d, i) => {
var row = Math.floor(data.length / cols);
var col = cols - credit.length + 1 + i;
return `translate(${col * 25},${(row + 1) * 30})`;
})
.text(d => d);
return svg.node();
}
credit = '@velimirgasp'.split('')
cols = 36
height = 500
data = {
let retval = new Array();
for (var i = 0; i < 550; i++) {
retval.push(d3.range(5).map(d => Math.random() * 5 + 20));
}
return retval;
}
line = d3
.lineRadial()
.curve(d3.curveCardinalClosed)
.radius(d => d * 3)
//.angle((d, i) => ((2 * Math.PI) / data.length) * i)
.angle((d, i) => ((2 * Math.PI) / 120) * i)
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.
