![ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond](https://cdn.sanity.io/images/cgdhsj6q/production/ffe9b5b611f8f69c94d39083e217fbc83e3687c2-1024x1024.webp?w=400&fit=max&auto=format)
Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
vega-scenegraph
Advanced tools
The vega-scenegraph npm package is a low-level library for rendering and manipulating scene graphs, which are hierarchical structures representing graphical scenes. It is part of the Vega ecosystem, which is designed for creating, sharing, and exploring data visualizations. The package provides tools for creating and managing graphical elements, handling rendering contexts, and performing hit testing.
Creating and Managing Scene Graphs
This feature allows you to create and manage scene graphs. The code sample demonstrates how to create a new scene graph, add a rectangle mark to it, and append the rectangle to the scene.
const vega = require('vega-scenegraph');
// Create a new scenegraph
const scene = new vega.Scenegraph();
// Add a rectangle mark
const rect = scene.mark('rect').item({
x: 10,
y: 10,
width: 100,
height: 50,
fill: 'blue'
});
// Add the rectangle to the scene
scene.root.append(rect);
Rendering Contexts
This feature provides tools for creating rendering contexts. The code sample shows how to create a new scene graph, initialize a canvas rendering context, and render the scene.
const vega = require('vega-scenegraph');
// Create a new scenegraph
const scene = new vega.Scenegraph();
// Create a rendering context
const renderer = new vega.CanvasRenderer().initialize(document.querySelector('canvas'), 500, 500);
// Render the scene
renderer.render(scene.root);
Hit Testing
This feature allows for hit testing, which is the process of determining whether a point or area intersects with graphical elements. The code sample demonstrates how to create a scene graph, add a rectangle, and perform a hit test to check if a point is within the rectangle.
const vega = require('vega-scenegraph');
// Create a new scenegraph
const scene = new vega.Scenegraph();
// Add a rectangle mark
const rect = scene.mark('rect').item({
x: 10,
y: 10,
width: 100,
height: 50,
fill: 'blue'
});
// Add the rectangle to the scene
scene.root.append(rect);
// Create a hit test
const hitTest = new vega.HitTest(scene.root);
// Check if a point is within the rectangle
const hit = hitTest.test(20, 20);
console.log(hit); // true if the point (20, 20) is within the rectangle
D3.js (Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It uses HTML, SVG, and CSS. Compared to vega-scenegraph, D3 provides a higher-level API for data visualization and is more focused on data binding and transformation.
Three.js is a JavaScript library that makes it easy to create 3D graphics in the browser. It provides a scene graph and rendering engine for 3D graphics. While vega-scenegraph is focused on 2D scene graphs for data visualization, Three.js is specialized in 3D graphics and animations.
PixiJS is a 2D rendering engine that allows developers to create rich, interactive graphics and applications. It is highly performant and supports WebGL and HTML5 Canvas. Compared to vega-scenegraph, PixiJS is more focused on game development and interactive applications rather than data visualization.
Vega scenegraph and renderers.
Renderers and event handlers for Vega's mark-based scenegraph. This module supports both pixel-based (canvas) and vector graphics (SVG) output. Renderers can either (re-)draw a complete scene or perform incremental re-rendering for a set of provided "dirty" items. A fast SVG string renderer is also provided to generate static SVG for export.
The node-canvas library is used for server-side canvas rendering and bounds calculation. Node-canvas requires the native Cairo graphics library and attempts to compile native code as part of the installation process. In some instances this may result in installation hiccups. Should you run into issues, you are likely to resolve them more quickly if you first search for help regarding node-canvas (as opposed to vega-scenegraph) installation. However, node-canvas is an optional dependency, and is not needed for SVG rendering. Bounds calculation can be performed without node-canvas, though in the case of text marks the resulting bounds may be slightly inaccurate due to approximate text size calculations.
The Vega scenegraph is a hierarchical (tree) data structure. The levels of the tree alternate between an enclosing mark definition and contained sets of mark instances called items.
For example, here is a simple scenegraph containing three rectangles:
{
"marktype": "rect",
"items": [
{"x": 0, "y": 0, "width": 50, "height": 50, "fill": "steelblue"},
{"x": 100, "y": 50, "width": 50, "height": 50, "fill": "firebrick"},
{"x": 50, "y": 100, "width": 50, "height": 50, "fill": "forestgreen"}
]
}
The supported mark types are rectangles (rect
), plotting symbols (symbol
),
general paths or polygons (path
), circular arcs (arc
), filled areas
(area
), lines (line
), images (image
), text labels (text
), and chart
gridlines or rules (rule
). Each item has a set of supported properties (x
,
y
, width
, fill
, and so on) appropriate to the mark type.
Scenegraphs may also contain group
marks, which serve as containers for
other marks. For example, a top-level group mark may look like:
{
"marktype": "group",
"items": [
{
"x": 0,
"y": 0,
"width": 200,
"height": 200,
"items": [...] // array of contained mark instances
}
]
}
In this example, the group mark contains only a single group item. In practice, a group mark may contain any number of group items, for example to describe a scene with multiple layers or sub-plots.
For more information regarding supported mark properties, please see the Vega marks documentation.
The top-level export of this package includes fromJSON
and toJSON
methods
to support scenegraph serialization. The fromJSON
method expects a JSON
string as input (similar to the examples listed above). It will then add
additional parent pointers to the tree structure. For example, each item will
have a mark
property pointing to it's parent mark, and each mark will have a
group
property pointing to it's parent group (if any). The toJSON
method
maps a scenegraph instance to a JSON string, stripping any parent pointers or
other non-standard properties.
FAQs
Vega scenegraph and renderers.
The npm package vega-scenegraph receives a total of 141,568 weekly downloads. As such, vega-scenegraph popularity was classified as popular.
We found that vega-scenegraph demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.