Server-Side Deployment using Node.js not giving proper SVG

Question

This is related to question I asked here. One of the solutions was to create a bitmap and I'm trying to do that by exposing a service which returns SVG string from nodejs. I followed doc given here. It's returning a response with SVG content but the svg content doesn't seem to be right.

NodeJS Code

const express = require('express');
const vega = require('vega');
const app = express();
app.get('/vega', (request, response) => {

  const spec = JSON.parse(request.query.spec);

  const view = new vega.View(vega.parse(spec), {
    logLevel: vega.Warn,
    renderer: 'none'
  });

  const svgResult = view.toSVG();

  svgResult.then(function(res){
    response
    .set('Cache-Control', `public, max-age=${60 * 60}`)
    .type('svg').send(res);
   }).catch((err) => console.log("rejected:", err));

});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Listening on ${PORT}`));

Sample call request

http://localhost:3000/vega?spec=%7B%0D%0A++%22description%22%3A+%22A+simple+bar+chart+with+embedded+data.%22%2C%0D%0A++%22data%22%3A+%7B%0D%0A++++%22values%22%3A+%5B%0D%0A++++++%7B%22a%22%3A+%22A%22%2C%22b%22%3A+28%7D%2C+%7B%22a%22%3A+%22B%22%2C%22b%22%3A+55%7D%2C+%7B%22a%22%3A+%22C%22%2C%22b%22%3A+43%7D%2C%0D%0A++++++%7B%22a%22%3A+%22D%22%2C%22b%22%3A+91%7D%2C+%7B%22a%22%3A+%22E%22%2C%22b%22%3A+81%7D%2C+%7B%22a%22%3A+%22F%22%2C%22b%22%3A+53%7D%2C%0D%0A++++++%7B%22a%22%3A+%22G%22%2C%22b%22%3A+19%7D%2C+%7B%22a%22%3A+%22H%22%2C%22b%22%3A+87%7D%2C+%7B%22a%22%3A+%22I%22%2C%22b%22%3A+52%7D%0D%0A++++%5D%0D%0A++%7D%2C%0D%0A++%22mark%22%3A+%22bar%22%2C%0D%0A++%22encoding%22%3A+%7B%0D%0A++++%22x%22%3A+%7B%22field%22%3A+%22a%22%2C+%22type%22%3A+%22ordinal%22%7D%2C%0D%0A++++%22y%22%3A+%7B%22field%22%3A+%22b%22%2C+%22type%22%3A+%22quantitative%22%7D%0D%0A++%7D%0D%0A%7D

Sample response

<svg class="marks" width="0" height="0" viewBox="0 0 0 0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="translate(0,0)"><g class="mark-group role-frame root"><g transform="translate(0,0)"><path class="background" d="M0,0h0v0h0Z" style="fill: none;"></path><g></g></g></g></g></svg>

Appreciate any help find what's going wrong here.

Don't finalize the view until you want to destroy it. Have a look at vg2svg and how it works. — dominik, Mar 05 '19 at 15:47

score 1 · Accepted Answer · answered Mar 06 '19 at 07:55

Got it working with a few fixes in the above code.

const express = require('express');
const vega = require('vega');
const app = express();
app.get('/vega', (request, response) => {

  const spec = JSON.parse(request.query.spec);
  getSVG(spec, response);
  // let res = render(spec, response);
  // console.log('response', res);

});

async function getSVG(spec, response) {
  const view = new vega.View(vega.parse(spec), {
      loader: vega.loader(),
      logLevel: vega.Warn,
      renderer: 'none'
    })
    .initialize()
    .finalize();

  return (view.toSVG(1))
    .then(_ => {
      //console.log(_);
      console.log("Processed SVG request at -", Date.now()); 
    response
    .set('Cache-Control', `public, max-age=${60 * 60}`)
    .type('svg').send(_); 
  });
}

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Listening on ${PORT}`));

Server-Side Deployment using Node.js not giving proper SVG

1 Answers1