1.4.5 • Published 3 years ago
ssvg v1.4.5
SSVG: Scalable Scalable Vector Graphics
Library to speed up interactive svg-based data visualizations by transforming them into canvases.
Simple Usage
Just add this after loading d3:
<script src="https://intervis-projects.ccs.neu.edu/ssvg/ssvg-auto.js"></script>
If you want to toggle SSVG on and off using a hash, use this:
<script src="https://intervis-projects.ccs.neu.edu/ssvg/ssvg.js"></script>
<script>
if(window.location.hash) {
new SSVG();
}
</script>
Dev Installation
You need to have npm, webpack and webpack-cli installed (npm i --global webpack webpack-cli
).
- Clone the repo
- Install the dependencies:
npm i
- Transpile and bundle the code:
webpack
- Make SSVG usable as package in other projects:
npm link
- cd into your visualization directory
- Locally "install" SSVG:
npm link ssvg
. This should add an ssvg directory to your node_modules folder. If this fails, you may not have npm set up in your project folder. You can init a new npm package withnpm init
, after which running the npm link command as above should install ssvg correctly. - After loading d3.js, you should add the library. If you just want to enable it by default, use:
<script src="./node_modules/ssvg/dist/ssvg-auto.js"></script>
Otherwise, if you want to toggle SSVG on and off based on whether you are using a hash, you could use the manual version like so:
<script src="./node_modules/ssvg/dist/ssvg.js"></script>
<script>
if(window.location.hash) {
new SSVG();
}
</script>
Dev Update
git pull && webpack
1.4.5
3 years ago
1.4.4
3 years ago
1.4.3
4 years ago
1.4.2
4 years ago
1.4.1
4 years ago
1.4.0
4 years ago
1.3.2
4 years ago
1.3.1
4 years ago
1.3.0
4 years ago
1.2.0
4 years ago
1.1.2
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.2
4 years ago
1.0.1
5 years ago