Babyplots is an easy to use library for creating interactive 3d graphs for exploring and presenting data.
Find the full documentation here.
You can download the minified babyplots library here and include it in your header.
To display a babyplots visualization, you need a canvas element with an id somewhere in the body of your html file.
<canvas id="babyplot"></canvas>Then you can initialize the Plots object, which stores the settings and data of the visualization:
var vis = new Baby.Plots("babyplot", {backgroundColor: "#ffffffff"});The first argument of the constructor is the id of the canvas, the second is an object containing options to customize the appearance of the whole visualization. You can find about the possible options here.
Once you have a Plots object, you can add plots to it. Either manually, from data, or from a JSON object, exported from one of the babyplots implementations (e.g. the R package, or the Interactive Node Creator).
vis.fromJSON(myPlotData);Lastly, to show the visualization, call the doRender() method:
vis.doRender();In conclusion, here is a minimal example of how to create a babyplots visualization:
<!DOCTYPE html>
<html>
<head>
<script src="babyplots.js"></script>
</head>
<body>
<canvas id="babyplot"></canvas>
<script>
var vis = Baby.Plots("babyplot", {backgroundColor:"#ffffffff"});
vis.fromJSON(myPlotData);
vis.doRender();
</script>
</body>
</html>You can see an example in action here: minimal example, and of course on the babyplots homepage: bp.blebli.de.
For more information, head to the complete documentation: https://bp.bleb.li/documentation/js.
Clone the repository and install it using NPM:
git clone https://github.com/derpylz/babyplots.git
cd babyplots
npm installTo build the library from the TypeScript source files do:
npm run buildTo create the minified distribution file do:
npm run distJoin our Discord server, or submit an issue here in the repository!
Libraries used in babyplots:
- Babylon.js, the rendering engine
- Chroma.js, the color conversion library
- CCapture.js, for capturing gifs
Babyplots was created by Nils Trost
Released under the Apache 2.0 License.
Find the licenses of the included libraries here. Make sure to include this file if you use babyplots in your project.
Using babyplots will always be free for everybody. But if you really like it and want to show your appreciation, you may buy us a coffee :)
