@swim/vis
@swim/vis implements procedurally animated, interactive diagrams, including gauges, pie charts, and line, area, and bubble charts. These fully encapsulated widgets can be embedded into any web application framework, or directly into any web page. @swim/vis is a part of the broader @swim/toolkit framework.
Framework
The @swim/vis umbrella package depends on, and re-exports, the following component libraries:
- @swim/gauge (npm, doc) – multi-dial, fully animatable, canvas rendered gauge widget.
- @swim/pie (npm, doc) – multi-slice, fully animatable, canvas rendered pie chart widget.
- @swim/chart (npm, doc) – multi-plot, fully animatable, canvas rendered chart widget, suppporting line, area, and bubble graphs, with customizeable axes, and kinematic multitouch scale gestures for panning and zooming with momentum.
@swim/vis builds on the @swim/core and @swim/ui frameworks; it has no additional required dependencies.
Installation
npm
For an npm-managed project, npm install @swim/vis
to make it a dependency.
TypeScript sources will be installed into node_modules/@swim/vis/main
.
Transpiled JavaScript and TypeScript definition files install into
node_modules/@swim/vis/lib/main
. And a pre-built UMD script, which
bundles all @swim/vis component libraries, can be found in
node_modules/@swim/vis/dist/main/swim-vis.js
.
Browser
Browser applications can load swim-vis.js
, along with its swim-core.js
,
swim-mesh.js
, and swim-ui.js
dependencies, from the SwimOS CDN.
<!-- Development -->
<script src="https://cdn.swimos.org/js/latest/swim-core.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-mesh.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-ui.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-vis.js"></script>
<!-- Production -->
<script src="https://cdn.swimos.org/js/latest/swim-core.min.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-mesh.min.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-ui.min.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-vis.min.js"></script>
Alternatively, the swim-toolkit.js
script may be loaded, along with its
swim-system.js
dependency, from the SwimOS CDN. The swim-toolkit.js
script bundles @swim/vis together with all other
@swim/toolkit
frameworks.
<!-- Development -->
<script src="https://cdn.swimos.org/js/latest/swim-system.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-toolkit.js"></script>
<!-- Production -->
<script src="https://cdn.swimos.org/js/latest/swim-system.min.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-toolkit.min.js"></script>
Usage
ES6/TypeScript
@swim/vis can be imported as an ES6 module from TypeScript and other
ES6-compatible environments. All component libraries are re-exported by
the umbrella @swim/vis
module.
import * as swim from "@swim/vis";
CommonJS
@swim/vis can also be used with CommonJS-compatible module systems.
All component libraries are re-exported by the umbrella @swim/vis
module.
var swim = require("@swim/vis");
Browser
When loaded by a web browser, the swim-vis.js
script adds all component
library exports to the global swim
namespace. The swim-vis.js
script
requires that swim-core.js
, swim-mesh.js
, and swim-ui.js
have already
been loaded.
The swim-toolkit.js
script also adds all @swim/vis component library
exports to the global swim
namespace, making it a drop-in replacement for
swim-ui.js
and swim-vis.js
when additional @swim/toolkit frameworks
are needed.