Vector.js

Vector.js is an open-source JavaScript library designed for creating interactive vector graphics. It leverages standard web technologies including HTML, SVG, CSS, and GeoJSON, making it compatible with existing web tools and libraries.

The library is built around the concept of 'Elements'—JavaScript objects that act as wrappers for SVG components. Each element exposes a root property, which is the underlying SVGElement containing the visual representation. This abstraction is designed to simplify the creation of complex interactive visuals, such as interactive maps, without the high time cost typically associated with manual SVG manipulation.

The fundamental building block of Vector.js is the Element.

• Elements: JavaScript objects that wrap SVG functionality to provide a simplified API for creating graphics.
• The root property: Every element contains a root property which refers to the actual SVGElement. This allows developers to access the underlying SVG component directly for low-level manipulation or to integrate with other DOM-based tools.

Elements are categorized into several types:

1. Basic Elements: Visual primitives like ellipses, paths, and rectangles.
2. Input Elements: Components that handle user interaction and mouse input (e.g., controls, radio buttons, scrubbers).
3. Module-based Elements: High-level implementations for specific use cases like Maps, Graphs, and Plots.

SVG elements can be geometrically manipulated using the transform attribute. Common transformation functions include:

• Scale: Resizes the element. Syntax: transform="scale(x, y)".
• Rotate: Rotates the element around a point.
• Translate: Moves the element to a new location.
• Skew: Distorts the element along the X or Y axis (skewX, skewY).
• Matrix: Uses a 3x3 matrix for complex transformations.

Transformations can be applied to individual elements or to a <g> (group) element to transform all its children simultaneously.

<g transform="scale(2, 2)">
  <!-- elements to be scaled ... -->
</g>

The Plots module visualizes the output of one or more functions within a Cartesian Coordinate System. To create a plot, you provide the function to be plotted along with configuration options for dimensions and positioning.

let scale = 300/Math.PI;
interactive.plot(Math.sin, {
  title: "Sine Function",
  originX: 0,
  originY: 150,
  scaleX: scale,
  scaleY: scale,
});

An SVG document is structured as a tree where elements can be nested. Child elements inherit the coordinate system and styles of their parent elements.

Rendering Order: The order of elements in the XML determines their stacking order. Elements defined later in the document are rendered on top of elements defined earlier. For example, if a <circle> is placed after a <rect> in the code, the circle will appear visually above the rectangle.

<svg>
  <rect></rect>
  <circle></circle>
</svg>

Vector.js provides three specialized modules that leverage the core library to implement sophisticated interactive visuals:

• Maps: Tools for creating interactive geographic visualizations (e.g., world maps).
• Graphs: Modules for representing graph structures and network visualizations.
• Plots: Components for creating functional and mathematical plots.

SVG (Scalable Vector Graphics) documents are defined using XML syntax. Every element consists of an opening tag and a closing tag. Attributes are defined within the opening tag using the name="value" format to describe geometric properties or metadata.

Key general attributes for all SVG elements include:

• id: A unique string identifier used for retrieving specific elements or applying styles.
• class: A space-separated list of classes used to apply styles to groups of elements.
• style: Used for applying inline CSS styling directly to an element.

To ensure correct rendering, the root <svg> element should include the xmlns attribute to define the XML namespace.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
    <circle cx="50" cy="50" r="15"></circle>
</svg>

The Maps module plots geographic data in SVG format using the GeoJSON data standard. SVG paths are grouped by feature, making map objects easy to manipulate. Any data in GeoJSON format can be rendered using this module.

import {Interactive, getScriptName} from '../../index.js';
import {globalData} from './maps-json.js';

let myInteractive = new Interactive(getScriptName());
let map = myInteractive.map(globalData);