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:
I hereby claim:
To claim this, I am signing this object:
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]); |
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.
<!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; | |
} |