DoubleTreeJS is an interactive way to give a more compact view of words in their context of use than a traditional concordance (KWIC) does. Clicking on a word on one side of DoubleTree
highlights the words on the other side that occur in the same phrase as the word clicked on.
(Culy and Lyding, 2010, below), which was inspired by Word Tree (Wattenberg & Viégas, 2008).
This re-implementation of DoubleTree includes several of the enhancements mentioned in Culy and Lyding, 2010, including the abilities to sort the branches by a variety of properties,
to filter the branches by different properties, and to search the words in the DoubleTree.
Here are a few sample uses:
- Plain DoubleTreeJS, with fixed text, no parts of speech (see other examples for user-supplied text)
- DoubleTreeJS + KWIC Combines DoubleTreeJS with a standard KWIC
- DoubleTreeJS POS only shows only the parts of speech in the DoubleTree
- DoubleTreeJS + filtered Like DoubleTreeJS + KWIC, but also allows filtering which elements are displayed in the DoubleTree
- DoubleTreeJS Comparison Shows two DoubleTrees sided by side, for comparison of different words.
Selecting a word in one shows it centered in the other.
- DoubleTreeJS Document Comparison Shows two DoubleTrees sided by side, for comparison of different words from separate documents.
Selecting a word in one shows it centered in the other.
- DoubleTreeJS + Metadata Shows coloring of nodes according to metadata.
Also shows the use of lemmas rather than tokens as the nodes.
Two additional examples are included in the download. One is the system from Culy et al. 2014
. The other shows how to use DoubleTreeJS to visualize results from a corpus query engine.
Hint: in all of the examples, you can use text files which have the part of speech (POS) immediately following word, separated by a slash: espresso/NN.
There is nothing special about POS information: you can put any information after the slash and the filtering and sorting will (should) work with that information.
DoubleTreeJS is still very much under development, and this is not a final release. Any feedback is appreciated.
How to use DoubleTreeJS with your own data
Many of the samples should be usable as is. The data format is extremely simple: your input file should have one item per line,
with the word first, and optionally followed by a "/" and then a part of speech. e.g.
For more advanced users, there is a developer's guide, as well as jsdoc API documentation.
In addition, there is an example of how to use DoubleTreeJS with SketchEngine. This example is intended for those who have their own instance of SketchEngine, or some other corpus query engine.
DoubleTreeJS has been tested with Chrome, Firefox, Opera, and Safari on OS X 10.6 and 10.8, as well as Chrome and Firefox on Windows 7.
Older versions of Safari my not allow local files to be read, in which case you will not be able to try your own data.
- In Firefox on Linux, instead of alt-click, use AltGr+Alt-click (Firefox uses alt-click for itself).
- Background rectangles do not work in Opera
- DoubleTreeJS does not function at all in IE (at least not version 9 or lower).
DoubleTreeJS is freely available under the new BSD license (see the source files). Download
If you use DoubleTreeJS, please cite this web site and (for research papers, articles, reports):
- C. Culy, M. Passarotti, and U. König-Cardanobile. 2014. A Compact Interactive Visualization of Dependency Treebank Query Results.
in Proceedings of the Ninth International Conference on Language Resources and Evaluation (LREC'14), Rejkjavik, Iceland. May 26-31, 2014. N. Calzolari et al. (eds.). ELRA.
- Culy, C. and V. Lyding. 2010. "Double Tree: An Advanced KWIC Visualization for Expert Users" in Information Visualization, Proceedings of IV 2010, 2010 14th International Conference Information Visualization, 98-103.
This version of DoubleTreeJS should be ready for more extensive use.
- Secondary sort of the branches
- History ?
- Incremental update of TextHash
- Improved UI in the examples (select, KWIC)
Please let me know if you have other suggestions, or suggestions for a priority order.
DoubleTreeJS uses the D3 toolkit, and the tree drawing uses elements from its examples.
Some of the examples use the canvg library for drawing SVG to HTML canvas.
Thanks to Corina Dima, Ulla Köning-Cardanobile, Verena Lyding, L. Lee McIntyre, Marco Passarotti, Eran Raveh and Tanja Säily for useful feedback and testing.
- Version 0.6.1
- Fixed bug with panning in Chrome and Safari
- Version 0.6
- Clicking on a node with one child will expand the descendants until there is more than one child (more like WordTree)
- After filtering, the nodes now report the correct IDs and continuations
- Dragging on the background to pan now works (and panning code has been cleaned up)
- Added "move" cursor
- Improvment and bug fix for private function
- Added ability to exclude punctuation, separate from other exclude filters
- Fixed bug concerning the last elements in a text
- Redid poe_v2.conll for LREC2014 example
- Added punctuation filter to doubletree-kwic.html and doubletree-filtered.html
- When a DT has been filtered, only the examples which pass the filter will be accessed, e.g. for the KWICs
- Version 0.51
- DoubleTree Colors
- Moved circle (node) styles into DoubleTree
- Moved link (branches) styles into DoubleTree
- These are customizable via DoubleTree.basicStyles()
- Added dependency paths example (LREC 2014)
- Added SketchEngine example
- Pressing the escape key while typing a new search term cancels the interaction
- Searching for the empty string in the tree finds nothing
- Canceling from an error loading a file removes the name of the problematic file
- Loading a new file in doubletree-compare.html and in doubletree-compare-docs.html now resets the tree correctly.
- Version 0.5aa
- Fixed critical bug in Safari concerning highlighting of continuations
- Added link to DoubleTreeJS + Filtered example
- Version 0.5a
- DoubleTree.setupFromArrays is no longer destructive -- the input arrays are unchanged
- DoubleTree.nodeText() and DoubleTree.tokenExtraText() now take a second argument: isRoot
- Colors: These changes were made to allow the saving of DoubleTrees as images
- DoubleTree now can customize the continuation color: DoubleTree.continuationColor()
NB: Removed continuation color from css
- Moved circle styles into DoubleTree (i.e. no longer customizable)
- Moved link (branches) styles into DoubleTree (i.e. no longer customizable)
- Trie constructor now has optional argument allowing the root to be calculated without using the distinguishing fields
- doubletree.TextHash moved to textmodel.TextHash
- TextHash constructor now takes an optional extra argument indicating that the input is records delimited by 2 newlines
- added TextHash.getItems(): like getItem, but takes regex to match
- TextHash.getItem() now takes an argument indicating that the "item" is a regular expression
- TextHash.getItem() now has extra argument for context filters
- TextHash.getItem() now has extra argument to specify a random selection of hits
- TextHash.getItemContext() now has argument indicating whether the item parameter should be considered a regular expression
- Added doubletree-filtered sample
- Added save as image to some examples (kwic, metadata, filtered)
NB: found nodes highlighting won't be preserved in image
- fixed doubletree-kwic.js so that illformed regex input for words doesn' give an error
- Version 0.4.1
- Fixed bug in doubletree.sortByStrFld() in cases where info.field is not defined
- Version 0.4
- Changed doubletree.DoubleTree API to follow the "chart" conventions of D3,
i.e. with a no-argument constructor, and chained functions, including single function setter/getters
- Added the possibility to provide a colored background rectangle for each node, variable according to node properties
- Added (de)serialization for doubletree.Trie, doubletree.TextHash
- Added new metadata lemma example
- Added documentation
- Added developer guide
- Moved Trie and TextHash into doubletree.Trie and doubletree.TextHash respectively
- Rewrote doubletree.Trie
- Moved the true utility functions into doubletree.js or Trie.js
- Renamed cleaned up utils.js as TextHash.js
- Moved filterByPOS and filterByMinCount out of examples and to doubletree.filterByPOS and doubletree.filterByMinCount
- Miscellaneous old comments removed
- Updated samples to incorporate new API
- Cleaned up samples
- Version 0.3
- Nodes are now logarithmically scaled by frequency by default
- In the DoubleTreeJS + KWIC demo, it is now possible to optionally show the POS after the tokens (if there is a POS)
- Added "bare" demo
- Added document comparison demo
- Added part of speech only demo
- Added more sample tagged texts, in English and in German
- Added sample text file of character sequences from the Bambara Wikipedia
- Node formatting is now done by doubletree.nodeText()
- Fixed bug in sorting by continuations
- Fixed an off-by-one bug in the reporting of the search results
- Cleaned up the tagged texts
- Version 0.2
- First publicly available version
- Added the "Clear" button to clear the in-tree search results
- Pressing enter in a "Word to use" field now selects the first word in the prediction list.
- Fixed positioning of predicted words
- Improved handling of words that are Object properties
- Version 0.1a
- First privately available version
28 July 2014