observablehq / observablehq/plot

Static `Plot.tip` marks does not work with JSDOM

Open
#2,187 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
HTML
Stars
5.4k
Forks
244
PR merge metrics
No merged PRs in 30d

Description

Hi observableHQ plot team,

It seems like Plot.tip does not work with the JSDom renderer.

For example, the following code

(sample code)

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

const aapl = d3.csvParse(await readFile("./aapl.csv", "utf-8"), d3.autoType);
const plot = Plot.plot({
  document: new JSDOM("").window.document,
  y: {grid: true},
  marks: [
    Plot.lineY(aapl, {x: "Date", y: "Close"}),
    Plot.tip(
      [`Apple stock reaches a new high of $133 on Feb. 23, 2015. The release of the first Apple Watch, slated for April, is hotly anticipated.`],
      {x: new Date("2015-02-23"), y: 133, dy: -3, anchor: "bottom"}
    ),
    Plot.tip(
      [`Apple stock drops 8% after the company misses Q2 revenue targets and reports declining iPhone sales. It reaches a two-year low of $90.34 on May 12.`],
      {x: new Date("2016-05-12"), y: 90.34, dy: 3, anchor: "top"}
    )
  ]
})

plot.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns", "http://www.w3.org/2000/svg");
plot.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");

process.stdout.write(plot.outerHTML);

results in an SVG which looks like following.

image

This example is taken from the documentation, which has the reference rendering with the tips:

image

Possibly related issue: https://github.com/observablehq/plot/issues/2160

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The reproducible entry point is Plot.tip with a JSDOM document; start by running the supplied example and comparing its SVG output with the linked documentation rendering. Done means static tips render correctly in the JSDOM-produced SVG as they do in the reference.

Written by the indexing model from the issue text.

Assessment

Tech stack
d3, javascript
Domain
data-visualization, testing-qa
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.