Picking best label positions in a streamgraph along the same lines as this example, but fitting the maximum possible font size in each area.
Noah Veltman veltman
veltman
/ index.html
Last active
October 2, 2017 17:00
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| text-align: center; | |
| } | |
| button { | |
| font-size: 24px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> | |
| canvas { | |
| width: 960px; | |
| height: 500px; | |
| } | |
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| height: 600 |
veltman
/ index.html
Created
July 11, 2017 23:29
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| path { | |
| stroke-width: 1px; | |
| fill: none; | |
| stroke: #444; | |
| } | |
| </style> | |
| <svg width="960" height="500"></svg> |
Trying to improve the performance of animating lots of SVG paths by dynamically creating CSS animations for each element.
See also: Single path dasharray, Canvas line animation
Using Path2D and setLineDash for better performance animating lots of lines on a <canvas> element.
See also: Dynamic CSS line animation, Single path dasharray
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.
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
Using polylabel plus some extra boundary checks to position labels in a stacked area chart.
See also: Stacked area label placement #2