Spring 2017 Week 12: Useful Examples

Event Architecture, Force + Canvas, Awesomplete

viztech/2017-spring-week-12

The example in this repo demonstrates some of the concepts and techniques we discussed in individual discussions. To get this up and running, first run npm install to install dependencies, then run npm start.

Force + Canvas

./src/modules/graphic.js contains a basic implementation of a force layout rendered with Canvas. It also implements basic mousepicking.

Awesomplete (thanks Antonio)

./src/modules/SearchBar.js shows how Awesomplete can be used to implement autocomplete for text <input> elements.

First, you must make sure that Awesomplete is installed as an npm module. In console, run npm install awesomplete --save (I’ve done this for you already). Then take note of the import statements at the head of the module file.

The actual implementation is only one line on line 39. This is a good example of how UI behavior can be written in a specific UI module, without polluting the global scope.

Event architecture

Note how, when you search for a journalist’s name, the corresponding circle is highlighted? This example shows how a modular event architecture could be implemented.

1. First, the submit event is fired by the <input> form element, and dispatched from SearchBar (line 34);
2. This is captured by Menu (line 40-), and in turn dispatched out again (line 41);
3. Event is captured in index (line 28–30), and in turn dispatched to the globalDispatch.
4. Through globalDispatch, we call the .find() method of the graphic module on index line 35.
5. In turn, graphic.find dispatches to graphic module’s own internal dispatch (line 77–80 in graphic.js)
6. Finally, on line 68–75, we deal with this event by filtering for the journalist name, and highlight the corresponding node.

As convoluted as this seems, this architecture is actually easy to understand once you get the hang of it. The advantage is that each step in the chain is de-coupled. The graphic module doesn’t explicitly refer to SearchBar, and in fact doesn’t care if graphic.find() is triggered by a search from the menu, or from some other source.

Animating along Path

viztech/2017-spring-week-13

An example showing how we can use animation to represent a static attribute.