DoubleTreeJS: A compact view of words in context

Chris Culy


Version: 0.8 released 3 February 2016
NOTICE: This version of DoubleTreeJS requires version 3 of d3 and does NOT work with version 4. An update is in progress.

Used in the CATMA project and in the OPATCH project

What's new?

DoubletreeJS now supports scripts written right to left

What is it?

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. DoubleTreeJS is a re-implementation in Javascript of Double Tree (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. It also is designed to work with various types of structured data. See also my KWICis concordance viewer, also designed for structured data.

Here are a few sample uses:

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. 

Not/RB
only/JJ
Robin/NP
himself/PP
but/RB
all/PDT
the/DT
band/NN
were/VBD
outlaws/NNS

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.

Compatibility

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.

Download

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):

Roadmap

This version of DoubleTreeJS should be ready for more extensive use. Possible improvements:

Please let me know if you have other suggestions, or suggestions for a priority order.

Acknowledgments

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 history