Search code examples
observable-plot

Why does → appear when I plot with Observable Plot?

No matter what I plot with Observable Plot, → appears somewhere.

Here is my code:

import http from 'http';
import * as Plot from "@observablehq/plot";
import {JSDOM} from "jsdom";

const jsdom = new JSDOM(`
<!DOCTYPE html><body>
<div class='container'><figure id='graphic'>
</figure></div></body>`);

const sales = [
  {units: 10, fruit: "fig"},
  {units: 20, fruit: "date"},
  {units: 40, fruit: "plum"},
  {units: 30, fruit: "plum"}
];

jsdom.window.document.getElementById('graphic')
                     .appendChild(Plot.dot(sales, {x: "units", y: "fruit"})
                     .plot({document: jsdom.window.document}));

http.createServer(function (req, res) {
  let html = jsdom.serialize();
  res.end(html);
}).listen(8080);

And here is what I get: image 1 image 2

What's wrong?

Solution

  • Ok, I've found the solution. I needed to add <meta charset="utf-8"> in my jsdom definition:

    const jsdom = new JSDOM(`
<!DOCTYPE html>
<head><meta charset="UTF-8"></head>
<body>
<div class='container'><figure id='graphic'>
</figure></div>
</body>`);