D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing. This example pulls together various examples of work with trees in D3.js. The panning functionality can certainly be improved in my opinion and I would be thrilled to see better solutions contributed. One can do all manner of housekeeping or server related calls on the drop event to manage a remote tree dataset for example. Dragging can be performed on any node other than root (flare). Dropping can be done on any node. Panning can either be done by dragging an empty part of the SVG around or dragging a node towards an edge. Zooming is performed by either double clicking on an empty part of the SVG or by scrolling the mouse-wheel. Expanding and collapsing of nodes is achieved by clicking on the desired node. The tree auto-calculates its sizes both horizontally and vertically so it can adapt between many nodes being present in the view to very few whilst making the view managable and pleasing on the eye.
Research | Bitjuice I’m currently studying for a PhD at the Australian Centre for Field Robotics (ACFR), at The University of Sydney. Working with the Marine Robotics team, my area of interest is in the automated interpretation of data that is collected by our Autonomous Underwater Vehicles (AUVs). For some background on why I started the PhD, check out the first post in this blog. Marine Robotics The AUV Sirius, on a field trip off the coast of Freycinet in Tasmania, 2012 Our AUVs regularly perform surveys of the sea floor both in Australia, and around the world. Where does “Data Science” come in? When people think about “robotics”, typically the first things that come to mind are physical systems, moving parts, navigation and control. Interpreting Images This image was painstakingly labelled by a marine scientist, with labels such as “ECK” for Ecklonia Radiata (Kelp). The current practice for users of our AUV data is to manually label image content. Current Research Hierarchical Classification Publications
Collapsible Tree index.html# flare.json#