frontend + d3
md`# d3-lib-2`
import { getRandomId } from '@rabelais/random-id'
trans = (x, y, k) => {
const coord2d = `translate(${x}, ${y})`;
if (!k) return coord2d;
return coord2d + ` scale(${k})`;
}
ttrans = (x, y, k) => ['transform', trans(x, y, k)]
rgba = (r = 0, g = 0, b = 0, a = 1) => `rgba(${[r, g, b, a].join(',')})`
shortenText = (text = '', length) => {
if (text.length <= length) return text;
return `${text.slice(0, length)}...`;
}
/*
const style = `svg text { font-weight: bold }`;
svg.call(addStyle, style, ?svgId);
*/
addStyle = (svg, styleCss, svgId) =>
svg
.attr('id', svgId || getRandomId())
.attr('xmlns', 'http://www.w3.org/2000/svg')
.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink')
.append('style')
.text(styleCss)
// .text(`<![CDATA[${styleCss}]]>`)
.attr('type', 'text/css')
/*
svg.call(addOutlineStyle, { stroke: 'black', strokeWidth: '2px', className: 'my-outline' });
element.attr('class', 'my-outline');
*/
addOutlineStyle = (
node,
{ stroke = 'white', strokeWidth = '1px', className = 'text-outline' }
) =>
node.call(
addStyle,
`
.${className} {
paint-order: stroke;
stroke: ${stroke};
stroke-width: ${strokeWidth};
stroke-linecap: butt;
stroke-linejoin: miter;
}
`
)
/*
function myMethod(d, i, a) {
...
}
element.call(addHitBox, { x:0, y:0, _width: 200, _height:300, click:myMethod });
*/
addHitBox = (
node,
{
x = 0,
y = 0,
_width,
_height,
_event = () => {},
mouseEnter = () => {},
mouseLeave = () => {}
}
) =>
node
.append('rect')
.attr('opacity', 0)
.attr(...ttrans(x, y))
.attr('width', _width)
.attr('height', _height)
.on('click', _event)
.on('mouseenter', mouseEnter)
.on('mouseleave', mouseLeave)
/*
svg.call(addGradient, { id: 'my-gradient', });
element.call(useGradient('my-gradient'));
*/
addGradient = (node, { id, gradients = [], x1, y1, x2, y2 }) => {
if (!Array.isArray(gradients)) throw Error('gradients should be an array!');
// gradients = [{color, opacity, offset}]
const offsetScale = d3.scaleLinear([0, gradients.length - 1], [0, 1]);
node
.append('defs')
.append('linearGradient')
.attr('id', id)
.attr('x1', x1)
.attr('x2', x2)
.attr('y1', y1)
.attr('y2', y2)
.attr('spreadMethod', 'pad')
.selectAll('stop')
.data(gradients)
.enter()
.append('stop')
.attr('offset', (d, i) => d.offset || offsetScale(i))
.attr('stop-color', d => d.color || 'white')
.attr('stop-opacity', d => d.opacity || '1');
}
useGradient = (node, id) => node.style('fill', `url(#${id})`)
topRoundedRect = (x, y, _width, _height, radius) => `M${x + radius},${y}
h${_width - radius * 2}
a${radius},${radius} 0 0 1 ${radius},${radius}
v${_height - radius}
h${-_width}
v${-_height + radius}
a${radius},${radius} 0 0 1 ${radius},${-radius}
z`
bottomRoundedRect = (x, y, _width, _height, radius) => `M${x},${y}
h${_width}
v${_height - radius}
a${radius},${radius} 0 0 1 ${-radius},${radius}
h${-_width + radius * 2}
a${radius},${radius} 0 0 1 ${-radius},${-radius}
v${-_height + radius}
z`
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.
