Silly Arrowheads / Jacob Rus / Observable

Silly Arrowheadsplot_silly_arrows = { const height = 600; const radius = Math.min(width/2, height/2) - 20; const svg = d3.select(DOM.svg(width, height)) .attr('style', `background-color: ${colors.palegray};`); const n = Object.keys(cute_examples).length const arrows = svg.append("g").selectAll("path") .data( Object.keys(cute_examples).map( (k, i) => ({ start: [width/2 + 45*Math.cos(2*Math.PI*i/n), height/2 - 45*Math.sin(2*Math.PI*i/n)], end: [width/2 + radius*Math.cos(2*Math.PI*i/n), height/2 - radius*Math.sin(2*Math.PI*i/n)], strokewidth: 13, endarrow: cute_examples[k] }))) .enter().append("path") .attr("d", d => arrow_path(d)) .attr("fill", (d, i) => interpolateRainbow(i/n)) return svg.node() }import {cute_examples, arrow_path} from "@jrus/arrowheads"import {interpolateRainbow} from '@mbostock/sinebow'd3 = require("https://d3js.org/d3.v5.min.js")colors = ({ "palegray": "#fafafc" })