| { | |
| "$schema": "https://vega.github.io/schema/vega-lite/v5.json", | |
| "description": "Heatlane chart: https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/", | |
| "data": {"url": "data/cars.json"}, | |
| "height": 150, | |
| "width": 400, | |
| "title": "Heatlane", | |
| "transform": [ | |
| {"bin": true, "field": "Horsepower"}, | |
| { |
| license: gpl-3.0 | |
| height: 600 | |
| border: no |
| license: gpl-3.0 | |
| border: no |
Convert SVG to canvas on-the-fly. Updated to support higher pixel densities, like Retina displays. Compare to Andrew Mollica's example which looks slightly fuzzy on high-density displays.
This article from MDN explains the process: Drawing DOM object into a canvas. This works for any DOM object, not just SVG. Not sure if this is well supported by older browsers. Works on Chrome, Firefox and IE 10 for me. The bar chart is a fork of this block by Mike Bostock: Canvas Bar Chart.
| license: gpl-3.0 | |
| border: no |
| border: no |
Combines Gooey Circle Effect Colors with a Phyllotaxis animation.
If you like this, go check out the work of Nadieh Bremer and Jason Davies.
| license: gpl-3.0 |
| license: gpl-3.0 |
| license: gpl-3.0 | |
| height: 800 | |
| border: none |