Search code examples
javascriptplotdata-visualizationobservablehqobservable-plot

How to use markes on a line graph in Observable Plot?


While working with Observable Plot, I stumbled across the markers section in the API documentation.

Yet, I cannot figure out how to make it work.

Imagine I have the following mark:

Plot.line(data, {x: "timestamp", y: "val", curve: "natural"})

How can I add markers to every data point on this line? I cannot extract that information from the API documentation (an example would be nice). Following versions do not work

Plot.line(data, {x: "timestamp", y: "val", curve: "natural", marker: true, markerEnd: "circle"})
Plot.line(data, {x: "timestamp", y: "val", curve: "natural", marker: "circle"}) 

Remark: I am not looking for a solution using an additional Plot.dot.

Remark 2: Cross-posted to the ObservableHQ forum


Solution

  • Following answer was received on the ObservableHQ forum:

    Markers have been available in main for just a week, but not yet pushed to npm and Observable.

    If you need them now, here’s how you can build Plot from source:

    git clone https://github.com/observablehq/plot.git
    cd plot
    yarn
    yarn prepublishOnly
    

    The files will then be available in the dist/ folder. Upload dist/plot.umd.js as a File Attachment, then create a cell with:

    Plot = require(await FileAttachment(“plot.umd.js”).url())
    

    Thus, either wait for a new release to be published or build the source yourself at the moment.