Mascot.js
v4.1.1

Using Mascot.js in a web page

Add the following code to the <head> element in your HTML document:

<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://mascot-vis.github.io/lib/pixi.min.js"></script>
<script src="https://mascot-vis.github.io/dist/mascot-min.js"></script>

Below is an example webpage demonstrating how to create a multi-line chart using Mascot.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Mascot example</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://mascot-vis.github.io/dist/mascot-min.js"></script>
</head>
<body>
    <svg id="svgEle" style="width: 100%; height: 99%; margin: 0; padding: 0; position: absolute; top: 0; left: 0; background: white;"></svg>
    <script>
        let scn = msc.scene();
        msc.csv("data/stocks.csv").then((dt)=> {
            let line = scn.mark("line", {x1: 200, y1: 100, x2: 800, y2: 400, strokeColor: "green"});
            let collection = msc.repeat(line, dt, {attribute: "company"});
            let polyLine = msc.densify(line, dt, {attribute: "date"});
            let vertex = polyLine.vertices[0];
            msc.encode(vertex, {attribute: "date", channel: "x", rangeExtent: 600});
            msc.encode(vertex, {attribute: "price", channel: "y"});
            msc.encode(polyLine, {attribute: "company", channel: "strokeColor"});
            scn.axis("x", "date", {orientation: "bottom", labelFormat: "%m/%d/%y"});
            scn.axis("y", "price", {orientation: "left"});
            scn.legend("strokeColor", "company", {x: 850, y: 100});
            msc.renderer('svg','svgEle').render(scn);
        })
    </script>
</body>
</html>

Using Mascot.js in an ES6 module

To get the latest version, include “mascot-vis” as a dependency in your package.json file, or do:

npm install mascot-vis

To import Mascot, do:

import * as msc from "mascot-vis"