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
.
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