michaschwab / ssvg Goto Github PK

View Code? Open in Web Editor NEW

59.0 5.0 7.0 3.2 MB

Library to speed up interactive svg-based data visualizations by transforming them into canvases.

TypeScript 95.30% JavaScript 4.70%

ssvg's Introduction

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 with npm 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

ssvg's People

Contributors

Stargazers

Watchers

Forkers

tomhorak21 sashsinha chengluyu gobbletown read-source-code passariello ralfbarkow

ssvg's Issues

Is there any way ssvg can be used with easypz?

Hi -- I need to make an interactive map of a building site and my designer has provided me with a large / complex SVG. I like the interactivity that comes out of the box with easypz, but I notice that the SVG with easypz hits the browser hard in terms of performance. I see that ssvg is mainly for d3.

Is it possible to use ssvg with easypz so that I can leverage the interactivity and easy of use of easypz with the performance gains of ssvg?

Need to add license.txt

ssvg.ts:274 no element Object body

We are trying to implement SSVG in our research since SVG is taking a lot of time. As per the research done in SSVG, It appears to be really helpful. But while implementation, we are facing this issue "ssvg.ts:274 no element Object body". I have attached the HTML code for reference. Please help by resolving this issue.
In the code, we are trying to build the floorplan with the help of coordinates in the XML file and then change the colour of the coordinates as per the selection on another page(Websocket messages are sent across pages).
SSVGFloorplan.pdf

SVG loading with d3.xml

Good morning,
I 'm trying to use SSVG with the d3.xml() method instead of painting svg with d3 painting primitives . Is there any limitation in this sense ? Or in alternative have you an example ?
I was using this example for d3 [http://zevross.com/blog/2019/08/20/load-external-svgs-with-d3-v5/]
Thanks
Kind Regards

SSVG should wait for D3 to load before overriding its functions

Otherwise, if users include SSVG before D3, SSVG's definitions are overwritten by D3.

Problem with select: no element

Hello!

I've been trying to include SSVG to my project but I'm having a weird problem with d3.select as I receive a "no element" error. I tried with other basic queries both in my code and in the console (e.g. d3.select('body')) and I have the same issue. This error disappears if I don't include SSVG. The way I included SSVG is by adding the following line after the d3 (d3.v5.min.js) declaration:

<script src="https://intervis-projects.ccs.neu.edu/ssvg/ssvg-auto.js"></script>

I also tried to put it before and after the tag. Additionally I tested it with both Chrome and Firefox but always with the same result. Any idea why this could be happening?

Cheers and thanks,
Vanessa

https://intervis-projects.ccs.neu.edu/ssvg/ssvg-auto.js is unavailable

The examples use it, but at least the file is in the repo.

Display error

why i can not see rect with d3.enter() in my web? and the axis will looks very strange. here is my js code :

d3.selectAll('button').remove()

  console.log( new SSVG({ 
    sfaeMode: false,
    getFps: function(fps) {
    // console.log(fps);
  }}));
let svg = d3.select('svg');
let g = svg.append('g').attr('transform', 'translate(150,100)');
const width = 1200
const height = 400
let data = [
    {name: 'a', value: 9},
    {name: 'b', value: 24},
    {name: 'c', value: 14},
    {name: 'd', value: 30},
    {name: 'e', value: 20},
]

const xScale = d3.scaleLinear()
.domain([0,d3.max(data, d=>d.value)])
.range([0,width])

const yScale = d3.scaleBand()
.domain(data.map(d => d.name))
.range([0,height])
.padding(0.1)

let xAxis = d3.axisBottom(xScale)
let yAxis = d3.axisLeft(yScale)
g.append('g').call(xAxis).attr('transform', translate(0,${height-00}))
g.append('g').call(yAxis)

// i can see the circle
g.selectAll('circle').data(data).enter().append('circle')
.attr('r', 10)
.attr('cx', 100)
.attr('cy',(d,i) => i*30+ 200)
.attr('fill', 'red')

//i can not see the rect
g.selectAll('rect').data(data).enter().append('rect')
.attr('y',d => yScale(d.name))
.attr('height', yScale.bandwidth())
.attr('width', d => xScale(d.value))
.style('fill', 'green')
.attr('opacity', 1)