Ashish Singh git-ashish

Playing around with Boids-style flocking. Click to add more, coloring by movement colors each boid by a moving average of its acceleration magnitude.

Using collision detection with network visualization labels

This demonstrates how to use d3-annotation() with bboxCollide to procedurally place node labels. After using the nodes data to create a network visualization of the Les Miserables play, we filter the nodes to leave out the side characters and pass that array to d3-annotation. We then create a second forceSimulation, this time using the size of the notes as the property in our bounding box collision detection, to move the labels out of each others' way.

d3-annotation by Susie Lu.

	const fs = require('fs');
	const puppeteer = require('puppeteer');

	const GIFEncoder = require('gifencoder');
	const PNG = require('png-js');

	function decode(png) {
	return new Promise(r => {png.decode(pixels => r(pixels))});
	}

	// Since `overlapArea` function is monotonic increasing, we can perform a
	// simple bisection search to find the distance that leads to an overlap
	// area within epsilon of the desired overlap.
	function distanceForOverlapArea(r1, r2, desiredOverlap) {
	// Ensure r1 <= r2
	if (r1 > r2) {
	var temp = r2;
	r2 = r1;
	r1 = temp;
	}

	license: gpl-3.0
	height: 960
	redirect: https://observablehq.com/@mbostock/star-map

	license: gpl-3.0
	redirect: https://observablehq.com/@d3/line-with-missing-data

	license: mit
	height: 620
	border: no

	license: gpl-3.0
	height: 1030
	scrolling: yes

	license: mit
	scrolling: true
	height: 300