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
View README.md
View README.md

Picking best label positions in a streamgraph along the same lines as this stacked area chart example.

If a label doesn't fit in the top or bottom series, it tries to place it in the adjacent empty space.

View README.md

Picking best label positions in a stacked area chart by sweeping through each series and finding the largest minimum vertical difference wide enough to fit the label (if one exists).

A potential improvement might be to come up with a list of candidates for each area and then pick a combination that's vertically aligned or reads left to right from top to bottom. It also might be desirable to pick the rightmost available space instead of the tallest?

See also: Stacked area label placement

View README.md