Vector.js

Vector is an open source javascript library for creating interactive graphics. View the repository, run the tests, or meet the team.

Getting Started

To use this library, download the getting-started.tgz tar ball and follow the instructions below. The tar ball contains a folder with an index.html file and script.js file. The HTML file links the library’s style sheet, includes the script file which creates the interactive image, and has an element with an unique id that the interactive is rendered within.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Getting Started</title>
    <link rel="stylesheet" href="https://vectorjs.org/library.css">
  </head>
  <body>
    <div id="my-interactive"></div>
    <script type="module" src="script.js"></script>
  </body>
</html>

The script file imports the Interactive class from the website, constructs an interactive within the HTML element with the id “my-interactive”, and then creates a control point which can be dragged around. It also prints out the control and interactive objects to the console to play around with.

import Interactive from "https://vectorjs.org/interactive.js";

// Construct an interactive within the HTML element with the id "my-interactive"
let myInteractive = new Interactive("my-interactive");
myInteractive.border = true;

// Construct a control point at the the location (100, 100)
let control = myInteractive.control(100, 100);

// Print the two objects to the console
console.log( control, myInteractive);

To view the interactive, serve the folder containing the two files using a web server like Web Server for Chrome or your tool of choice. The result is a simple interactive with a draggable control point: