Update readme

This commit is contained in:
Pitchaya Boonsarngsuk
2018-02-02 10:07:04 +00:00
parent b6c730ead1
commit 84e9db94c1
5 changed files with 19 additions and 7 deletions

View File

@@ -1,21 +1,33 @@
# d3-spring-model
This module implements Chalmers' 1996 Neighbour and Sampling algorithm for drawing the force-directed layouts. It is a linear time algorithm that uses stochastic sampling to find the best neighbours for high-dimensional data and creates the layout in 2 dimensions.
This module implements three force-directed layout algorithms to visualize high-dimensional data in 2D space.
1. Basic spring model algorithm. In this model, every data point (node) pairs are connected with a spring that pushes or pulls, depending on the difference between 2D and high-dimensional distance. This is a tweaked version of [D3's force link](https://github.com/d3/d3-force#forceLink) with functionalities removed to improve performance and lower the memory usage.
1. Neighbour and Sampling algorithm. It uses stochastic sampling to find the best neighbours for high-dimensional data and creates the layout in 2 dimensions.
1. Hybrid layout algorithm. It performs Neighbour and Sampling algorithm on a subset of data before interpolating the rest onto the 2D space. Neighbour and Sampling algorithm may also be run over the full dataset at the end to refine placement.
During the interpolation, each node have to find a parent, a closest node that has already been plotted on the 2D space. Two methods of of finding the parents have been implemented.
1. Bruteforce searching. This method takes more time but guaranteed that the parent found is the best one.
1. Pivot-based searching. This method introduce a one-off pre-processing time but will make parent finding of each node faster. The parent found may not be the best one but should still be near enough.
Neighbour and Sampling algorithm is useful for producing visualizations that show relationships between the data. For instance:
These algorithms are useful for producing visualizations that show relationships between the data. For instance:
![fsmvis data set](https://raw.githubusercontent.com/sReeper/d3-neighbour-sampling/master/img/chalmers-fsmvis.PNG)
![Poker Hands data set](https://raw.githubusercontent.com/sReeper/d3-neighbour-sampling/master/img/chalmers-poker.PNG)
![Iris data set](img/IrisLink.png)
![Part of Poker Hands data set](img/Poker3000Link.png)
### Authors
Remigijus Bartasius and Matthew Chalmers
Pitchaya Boonsarngsuk
Based on [d3-neighbour-sampling](https://github.com/sReeper/d3-neighbour-sampling) by Remigijus Bartasius and Matthew Chalmers under MIT license.
Based on [d3-force](https://github.com/d3/d3-force) by Mike Bostock under BSD 3-Clause license.
### Reference
- Chalmers, Matthew. ["A linear iteration time layout algorithm for visualising high-dimensional data."](http://dl.acm.org/citation.cfm?id=245035) Proceedings of the 7th conference on Visualization'96. IEEE Computer Society Press, 1996.
- Chalmers, M. ["A linear iteration time layout algorithm for visualising high-dimensional data."](http://dl.acm.org/citation.cfm?id=245035) Proceedings of the 7th conference on Visualization'96. IEEE Computer Society Press, 1996.
- Morrison, A., Ross, G. & Chalmers, M. ["A Hybrid Layout Algorithm for Sub-Quadratic Multidimensional Scaling."](https://dl.acm.org/citation.cfm?id=857191.857738) INFOVIS '02 Proceedings of the IEEE Symposium on Information Visualization, 2002
- Morrison, A. & Chalmers, M. ["proving hybrid MDS with pivot-based searching."](https://dl.acm.org/citation.cfm?id=1947387) INFOVIS'03 Proceedings of the Ninth annual IEEE conference on Information visualization, 2003
## Usage
Download the [latest release](https://git.win32exe.tech/brian/d3-spring-model/releases) and load one of Javascript file alongside [D3 4.0](https://github.com/d3/d3).
Download the [latest release](https://git.win32exe.tech/brian/d3-spring-model/releases) and load either the full and minified version alongside [D3 4.0](https://github.com/d3/d3).
```html
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3-spring-model.min.js"></script>

BIN
img/IrisLink.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
img/Poker3000Link.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 184 KiB