poline = require("poline")
test = new poline.Poline({
anchorColors: [
[309, 0.72, 0.80],
[67, 0.32, 0.08],
],
});
test.colorsCSS
{
const po = new poline.Poline();
const svgscale = 100;
const namespaceURI = 'http://www.w3.org/2000/svg';
const $wrap = document.createElement('div');
$wrap.style.setProperty('--s', '.4');
$wrap.style.setProperty('--l', '.5');
$wrap.style.setProperty('width', '100%');
$wrap.style.setProperty('aspect-ratio', '1');
$wrap.style.setProperty('--grad', 'hsl(0, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(10.2857, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(20.5714, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(30.8571, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(41.1429, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(51.4286, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(61.7143, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(72, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(82.2857, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(92.5714, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(102.857, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(113.143, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(123.429, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(133.714, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(144, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(154.286, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(164.571, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(174.857, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(185.143, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(195.429, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(205.714, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(216, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(226.286, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(236.571, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(246.857, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(257.143, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(267.429, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(277.714, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(288, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(298.286, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(308.571, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(318.857, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(329.143, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(339.429, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(349.714, calc(var(--s) * 100%), calc(var(--l,0) * 100%)),hsl(360, calc(var(--s) * 100%), calc(var(--l,0) * 100%))');
$wrap.style.setProperty('background', 'radial-gradient(closest-side, #000, rgba(255, 255, 255, 0), #fff), conic-gradient(from 90deg, var(--grad))');
const colorArrToSteppedGradient = (colorsArr) => colorsArr.map(
(c, i) => `${c} ${i / colorsArr.length * 100}% ${(i + 1) / colorsArr.length * 100}%`
).join();
const createSVG = (svgscale = 100) => {
const $svg = document.createElementNS(
namespaceURI, 'svg'
);
$svg.setAttribute('viewBox', `0 0 ${svgscale} ${svgscale}`);
$svg.style = `
display: block;
width: 100%;
`
return $svg;
}
const $svg = createSVG(svgscale);
function updateSVG () {
$svg.innerHTML = '';
po.anchorPoints.forEach(anchor => {
const $circle = document.createElementNS(namespaceURI, 'circle');
$circle.setAttribute('cx', anchor.x * svgscale);
$circle.setAttribute('cy', anchor.y * svgscale);
$circle.setAttribute('r', 2)
//anchor.hslCSS
$circle.classList.add('wheel__anchor');
$circle.setAttribute('fill', '#fff');
$svg.appendChild($circle);
});
po.flattenedPoints.forEach((point, i) => {
const $line = document.createElementNS(namespaceURI, 'line');
$line.setAttribute('x1', point.x * svgscale);
$line.setAttribute('y1', point.y * svgscale);
const nextI = (i + 1) % po.flattenedPoints.length;
$line.setAttribute('x2', po.flattenedPoints[nextI].x * svgscale);
$line.setAttribute('y2', po.flattenedPoints[nextI].y * svgscale);
if (i !== po.flattenedPoints.length - 1) {
$svg.appendChild($line);
}
$line.setAttribute('stroke', '#000');
$line.setAttribute('stroke-width', '.1');
const $circle = document.createElementNS(namespaceURI, 'circle');
$circle.setAttribute('cx', point.x * svgscale);
$circle.setAttribute('cy', point.y * svgscale);
$circle.setAttribute('r', .5 + point.color[1] * 1);
$circle.setAttribute('fill', point.hslCSS);
$circle.setAttribute('stroke', '#000');
$circle.setAttribute('stroke-width', '.1');
$svg.appendChild($circle);
});
}
updateSVG();
$wrap.appendChild($svg);
return $wrap;
}
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.
