How to use Compost in your projects

Using standalone JavaScript file

If you want to experiment with Compost, the easiest option is to add a reference to the latest version of Compost using a standalone JavaScript file from GitHub. This defines global variables c (for creating Compost charts) and s (for defining scales) that you can use in your scripts. The following complete HTML file creates a basic line chart:

<!DOCTYPE html>
<html>
<head>
  <script src="https://compostjs.github.io/compost/releases/compost-latest.js">
  </script>
</head>
<body>
  <div id="demo" style="width:600px;height:300px"></div>
  <script type="text/javascript">
    let d = c.axes("left bottom",
      c.line([[1,1],[2,4],[3,9],[4,16],[5,25],[6,36] ]))
    c.render("demo", d)
  </script>
</body>
</html>

For production use, you should download the file and add it to your project rather than referencing it directly from GitHub. You can get a specific version by replacing latest with, for example, 0.0.2.

Using Compost from a Node.js project

If you want to reference Compost.js properly, you can get it from the NPM repository by installing the compostjs package. Just run the following command:

npm install compostjs

Then you can use Compost in your project by importing the two exported global variables compost (for access to Compost primitives) and scale (for creating scales) as follows:

import { scale as s, compost as c } from "compostjs"

let d = c.axes("left bottom",
  c.line([[1,1],[2,4],[3,9],[4,16],[5,25],[6,36] ]))
c.render("demo", d)

To see how this works, you can also look at the complete Node.js sample project compost-node-demos on GitHub. To clone the repository and run the demos, you can run the following commands. Once you do this, you'll see the running demos at http://localhost:8080.

git clone https://github.com/compostjs/compost-node-demos.git
cd compost-node-demos
npm install
npm start

Learn more about Compost