frontend + d3
Published
Edited
Dec 28, 2020
Importers
1 star
LEFT_LEAF = 'LEFT_LEAF'
RIGHT_LEAF = 'RIGHT_LEAF'
makeMatchId = () => `t${nanoid()}`
calculateConfig = (_rawConfig, maxRound, firstMatchesSize) => {
const cfg = _rawConfig;
const matchWidthAll = cfg.matchWidth + cfg.matchGapX;
const matchHeightAll = cfg.matchHeight + cfg.matchGapY;
const worldWidth = matchWidthAll * maxRound;
const worldHeight = matchHeightAll * firstMatchesSize;
const teamWidth = cfg.matchWidth;
const teamHeight = cfg.matchHeight / 2;
return {
...cfg,
matchWidthAll,
matchHeightAll,
worldWidth,
worldHeight,
teamWidth,
teamHeight
};
}
putClickArea = (node, _width, _height, _func) =>
node
.append('rect')
.attr('data-clickable', true)
.attr('opacity', 0)
.call(setSize, _width, _height)
.on('click', _func)
makeSeeds(32)
makeSeeds = n => {
// to avoid circular reference error
const _makeSeeds = n =>
n === 1
? [0]
: _makeSeeds(n >> 1).reduce((p, c) => [...p, c, n - c - 1], []);
return _makeSeeds(n);
}
trimText = (_text = '', max = 10) => {
if (_text.length <= max) return _text;
return `${_text.slice(0, max)}...`;
}
scale = (k = 1) => `scale(${k})`
trans2d = (x = 0, y = 0) => `translate(${x},${y})`
trans = (x, y, k = -1) => {
if (k !== -1) return [trans2d(x, y), scale(k)].join(' ');
return trans2d(x, y);
}
setCoords = (node, func) =>
node.attr('transform', (d, i, e) => {
const [x, y, z] = func(d, i, e);
return trans(x, y, z);
})
setSize = (node, _width, _height) => {
return node.attr('width', _width).attr('height', _height);
}
// https://bocoup.com/blog/find-the-closest-power-of-2-with-javascript
nearestPow2 = aSize => {
return Math.pow(2, Math.ceil(Math.log(aSize) / Math.log(2)));
}
range = (len = 1) => Array.from({ length: len })
// head = starting position of a round. 1 represents 1 match height.
heads = [0, 0.5, ...range(14).map((_, idx) => 1.5 + -2 * (1 - 2 ** idx))]
// elbowGen([[x,y], [x2,y2]])
elbowGen = d3.line().curve(d3.curveStep)
faker = require("https://unpkg.com/faker@5.1.0/dist/faker.min.js")
nanoid = import('nanoid@v3.0.0/nanoid.js').then(module => module.nanoid)
import { slider } from '@jashkenas/inputs'
d3 = require('d3@v6.3.1', 'd3-collection@v1.0.7')
lodash = require('lodash@v4.17.20')
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.
