If you use NPM, npm install d3-view
.
Otherwise, download the latest release.
You can also load directly from unpkg.
AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global is exported.
Try d3-view in your browser.
To best understand d3-view is to code a simple application:
<!DOCTYPE html>
<html>
<head>
<title>d3 view app</title>
<meta charset="utf-8">
<script src="https://unpkg.com/d3-view/build/d3-require.js"></script>
</head>
<body>
<div id="app"><p d3-html="countdown"></p></div>
<script>
d3.require('d3-view', 'd3-timer').then(async d3 => {
const vm = d3.view({model: {countdown: 5}});
await vm.mount("#app");
const timer = d3.interval(() => {
vm.model.countdown -= 1;
if (!vm.model.countdown) {
vm.model.countdown = 'Welcome to d3-view!';
timer.stop();
}
}, 1000);
});
</script>
</body>
</html>
In this small example we have performed the following steps:
- Created a
view
object with a model containing thecountdown
attribute - Mounted the view into the DOM via the
#app
selector and waited to be ready (mounting is asynchronous) - The app displays the
countdown
value - Modified the countdown model attribute and see the value changing
d3-view strictly depends on four d3 plugins:
However, to write interesting UI components one may want to use many other d3 plugins, or the whole d3 library.
d3.view
is a d3 plugin for building
data driven web interfaces. It is not a framework as such, but you can easily
build one on top of it.
Importantly, this library does not make any choice for you, it is build on top of the modular d3 library following very similar design patterns.
To create a view object for you application, invoke the d3.view
function
var vm = d3.view({
model: {...},
components: {...},
directives: {...}
});
You can create more than one view:
var vm2 = d3.view({
model: {...},
components: {...},
directives: {...}
});
All properties in the input object are optionals and are used to initialise the view with custom data reactive data (model), components and directives.