View README.md

Click-to-zoom using projection.fitSize() to interpolate a projection's scale and translate instead of modifying the SVG transform. Has the advantage of leaving stroke-widths alone and the disadvantage of probably being a lot slower.

See also: click-to-zoom via transform

View README.md

Converting an SVG animation to a video with the MediaRecorder API and a hidden canvas.

Drawing frames from img elements can introduce an extra delay, so this version generates all the frames upfront and then renders them in a loop with requestAnimationFrame().

See also: Canvas animation to video

View README.md
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.11.3/xlsx.full.min.js"></script>
<script>
d3.request("turtles.xlsx")
.responseType("arraybuffer")
.get(function(err, response){
View index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
button {
font-size: 24px;
}
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas {
width: 960px;
height: 500px;
}
</style>
View README.md

Picking best label positions in a streamgraph along the same lines as this example, but fitting the maximum possible font size in each area.

View .block
height: 600
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke-width: 1px;
fill: none;
stroke: #444;
}
</style>
<svg width="960" height="500"></svg>
View README.md