Thomas Preusse tpreusse

Keybase proof

I hereby claim:

I am tpreusse on github.
I am tpreusse (https://keybase.io/tpreusse) on keybase.
I have a public key ASDTEhtt7HbaifvjoZc1LFqfgdrWS3nh7KGbGXr3msCv4wo

To claim this, I am signing this object:

Rendering more than 20'000 SVG circles will slow down every browser. Render time, scroll and hover performance degrade to an in-actable level. This examples illustrates how to render an almost infinite amount of hoverable circles with canvas, d3.timer (requestAnimationFrame) and d3.geom.quadtree.

Be aware of iOS image size limitation which also apply to canvas. Potential solution is to disable retina (window.devicePixelRatio) on older iPads and iPhones.

Open the example in a new window to see the rendering adapt to scrolling and window width changes.

This is an extracted example of the rendering code behind 2014.nzz.ch.

	import d3 from 'd3';

	export const fitProjection = (projection, data, box, center) => {
	// get the bounding box for the data - might be more efficient approaches
	let left = Infinity;
	let bottom = -Infinity;
	let right = -Infinity;
	let top = Infinity;
	// reset projection
	projection.scale(1).translate([0, 0]);

	<!DOCTYPE html>

	<meta charset="utf-8">
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
	<link rel="stylesheet" href="https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.css">

	<style>
	body {
	padding: 20px;
	}