Atrribute Data Binding for Real-Time Data

Simulated Real-Time System

A simple example to demonstrate a concept to display real-time data using element attributes to bind to incoming data; from a websocket, for example.

Using element attribute bindings means users can edit plain html pages to build data-driven, dynamically updating user interfaces, designers can style those interfaces and developers can implement element transitions via callback without needing to understand or configure the underlying update mechanism.

In addition to supporting the dynamic updating of elements based on object keys, page editors can supply data formatters (e.g. date or numeric formatting) and callbacks which can modify the element in response to values in the data (e.g. dynamic styling or animated transitions).

Obviously, a system like this borrows from libraries like Angular.js and Vue.js, but this one is just a few lines of D3. I'd love to see other examples of developers using D3 with real-time data; there must be better ways!