Web developer and autodidact with an interest in creative coding.
ThrottleSearch Query TokenizationCompiling a regex from stringsPure CSS TreeThe Fed - FOMC Projections DataTerraform Registry SearchLots of DotsExporting Your DuckDB Databasesflyctl DocsHTML to MarkdownD3 Documentation IndexThrottling Function CallsWeb Page MetadataPatched ImportsDeconstructing a NotebookDiscrete Sibson InterpolationEdge Distance in Regular PolygonsUsing A Vega-Lite Chart As Input WidgetfindTriangle() for D3.Delaunay and DelaunatorTransparent Color WidgetCanvas Outlines: Stroke vs FillEases On EdgeConverting Between Keyboard LayoutsD3 Force Along a PathInverted Luminosity(Attempt at) Embedding a Video Into an SVGForce Graph TrailsTitle TransliterationOptimal TilingVega-Lite, UnminifiedNotebook Version UUIDImproving Animations Through Motion BlurWatermarkQuerying the npm registryStitched EasingsDynamic Notebook LinksPixel ProbingMapping Color Scales with SVG FiltersGoogle Maps Cost CalculatorEncoding Data In ImagesZdog HelpersUsing CodePens in ObservableLook What The Cat Dragged InAdobe Swatch Exchange ExporterPolygon Sine WaveSVG Single Path GridColor Blending Is BrokenPer-Layer Fadeout In 2D CanvasVoronoi BorderlandsEmbedding a canvas into an SVGEmbedding Fonts Into An SVGVersion Pinning for NotebooksSplitting LinesEasing In Multiple Steps
Intersection Arcs
IntersectionArcs = {
const CIRCLE = Symbol('CIRCLE');
const PI2 = Math.PI * 2;
return {
CIRCLE,
find: points => {
const segments = findIntersectionArcs(points);
return points.map((p, i) => {
const s = segments[i];
let a = s.indexOf(CIRCLE) > -1 ? CIRCLE : mergeArcs(s, p);
if(a !== CIRCLE && !a.length && s.length) a = CIRCLE;
return a;
});
},
invert: arcs => {
if(arcs === CIRCLE) return [];
if(!arcs.length) return CIRCLE;
return invertArcs(arcs);
}
};
/**
* Finds spaces inbetween arcs.
*
* @param {Number[][]} arcs - List of arcs with shared center.
* @param {number} arcs[][0] - Start angle in radians.
* @param {number} arcs[][1] - End angle in radians.
*
* @return {Array[]} - List of inverted arcs.
*/
function invertArcs(arcs) {
const
inverted = [],
l = arcs.length;
let a, i;
if(arcs.length) {
for(i = 0; i < l; i++) {
a = [ arcs[i][1], arcs[ (i + 1) % l ][0] ];
if(a[0] > a[1]) a[1] += PI2;
inverted.push(a);
}
}
return inverted;
}
/**
*
*/
function mergeArcs(arcs) {
const
mod = (a, b) => ((a % b) + b) % b,
stack = [],
merged = [];
let
i = arcs.length,
depth = 0,
o = null,
d,
a1;
if(!arcs.length) return merged;
while(i--) {
d = (arcs[i][1] - arcs[i][0]);
a1 = mod(arcs[i][0], PI2);
stack.push([a1, 1]);
stack.push([a1 + d, -1]);
}
stack.sort((a, b) => a[0] - b[0] || b[1] - a[1]);
for(i = 0; i < stack.length; i++) {
if(depth === 0) {
//console.assert(stack[i][1] > 0, 'Start offset is actual start point.');
o = stack[i][0];
}
depth += stack[i][1];
if(depth === 0) {
//console.assert(o !== null, 'Interval has start point.');
if(stack[i][0] - o >= PI2) return [];
merged.push([o, stack[i][0]]);
o = null;
}
}
while(merged.length > 1) {
i = merged[merged.length - 1];
o = mod(i[1], PI2);
if(i[0] <= o || o <= merged[0][0]) break;
i[1] += Math.max(0, merged[0][1] - o);
merged.shift();
}
return merged;
}
/**
*
*/
function findIntersectionArcs(points, CIRCLE) {
const copy = points.slice(), segments = {}
let i = points.length, j, p, arcs;
while(i--) segments[i] = [];
i = 0;
while((p = copy.shift()) && (j = copy.length)) {
while(j--) {
arcs = calcIntersection(p.x, p.y, p.r, copy[j].x, copy[j].y, copy[j].r, CIRCLE);
if (arcs[0] || arcs[0] === CIRCLE) segments[i].push(arcs[0]);
if (arcs[1] || arcs[1] === CIRCLE) segments[i + j + 1].push(arcs[1]);
}
i++;
}
return segments;
}
/**
*
* @param x
* @param y
* @param r
* @param x2
* @param y2
* @param r2
* @returns {[*,*]}
*/
function calcIntersection(x, y, r, x2, y2, r2) {
const dx = x - x2;
const dy = y - y2;
const d = Math.sqrt(dx * dx + dy * dy);
// Points do not intersect.
if(r + r2 < d) return [null, null];
// Relative angle of both points.
const ad = Math.atan2(dy, dx);
// Points share position, or one point contains the other.
if(!d || d < Math.abs(r - r2)) {
return r > r2
? [null, CIRCLE]
: [CIRCLE, null];
}
// Distance p1 to center of intersection.
const dh = (d * d - r2 * r2 + r * r) / (2 * d);
// Half height of intersection.
const h = Math.sqrt(r * r - dh * dh);
// Half intersection angle of first point.
const ah = Math.atan2(h, dh);
// Half intersection angle of second point.
const ah2 = Math.atan2(h, d - dh);
return [
[ad - ah + Math.PI, ad + ah + Math.PI],
[ad - ah2, ad + ah2 ]
];
}
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.