Content uploaded by Aaditya Vaze
Author content
All content in this area was uploaded by Aaditya Vaze on Nov 13, 2019
Content may be subject to copyright.
Certificate
This is to certify that the thesis entitled, “Ego-centric Data Visualization” and submitted by
Aaditya Vikas Vaze
ID No.
2014B4A70603G
in partial fulfillment of the requirements of BITS
F421 Thesis embodies the work done by him under my supervision.
Supervisor
Dr. Karan Singh
Professor,
University of Toronto
Date:
On Campus Supervisor
Dr. Prasanna Kumar N.
Associate Professor,
BITS Pilani KK Birla Goa Campus
Date:
i
UNIVERSITY OF TORONTO
Abstract
Master of Science (Hons.) Mathematics & Bachelor of Engineering (Hons.) Computer Science
Ego-centric Data Visualization
by Aaditya Vikas Vaze
Over the last few decades technology has revolutionized the ability to create, store and retrieve
information on a whim. Information visualization, the art of representing data in a way that it is
easy to understand and to manipulate, can help us make sense of information and thus make it
useful in our lives. Information Visualization tools currently used are restricted to 2D screens,
but with the recent developments in AR/VR give us the ability to visualize information and
navigate web in the 3D space. In this report, we design and develop new techniques to interact
with information in the AR/VR space.
Acknowledgements
I would like to thank my parents, family and friends for all the constant support during my
research.
I would like to thank my supervisor Dr. Karan Singh, for all his time and effort, to helping me
visit the Dynamic Graphics Project Lab, University of Toronto to work on interesting tools for
VR.
With a special mention to Rahul Arora for supporting me in the lab.
I am also grateful to John Hancock for his unfailing support and assistance.
And finally, also to everyone in the DGP Lab at the University of Toronto for making the time
I’ve worked here, a memorable one.
Thank you everyone for all your encouragement!
iii
Contents
Certificate i
Abstract ii
Acknowledgements iii
Contents iv
1 Data Visualization in Virtual Reality 1
1.1 Introduction ....................................... 1
1.2 Multi-dimensional Scaling ............................... 1
1.3 Embedding Techniques ................................. 2
1.3.1 Force-directed Graph .............................. 2
1.3.2 Embedding using Neural Networks ...................... 2
1.4 Embedding Visualization ................................ 3
2 Exocentric and Egocentric Visualization 4
2.1 Introduction ....................................... 4
2.2 Exocentric Visualization ................................ 4
2.2.1 Altering opacity ................................ 5
2.2.2 Sampling .................................... 5
2.2.3 Stacking ..................................... 5
2.2.4 Changing the view-port ............................ 5
2.2.5 Jitter ...................................... 5
2.3 Egocentric Visualization ................................ 5
2.3.0.1 Guaranteed visibility ......................... 6
2.3.0.2 Meaningful perceived distance ................... 6
2.3.0.3 Our Approach ............................ 6
3 Force-directed Simulation 7
3.1 Introduction ....................................... 7
3.2 Implementation ..................................... 7
3.3 Challenges ........................................ 7
4 Modified Force-directed Simulation 9
4.1 Introduction ....................................... 9
iv
Contents v
4.2 Motivation ........................................ 9
4.3 Idea ........................................... 10
4.3.1 Viewer-aware Visualization .......................... 10
4.4 Implementation ..................................... 10
4.4.1 Linear Spring forces .............................. 10
4.4.2 Radial Spring forces .............................. 11
4.4.3 Sphere-crust clustering force .......................... 12
4.4.4 Altering parameters for better results .................... 13
4.4.5 Changing Opacity of Nodes and Verifying the Occlusions .......... 13
4.5 Interactivity with landmarks and other Nodes ................... 13
4.6 Applications ....................................... 13
4.6.1 Data Types ................................... 13
4.6.2 Search Results ................................. 14
4.6.3 Latent spaces .................................. 14
4.6.4 Visualizing 3D-object data ........................... 15
4.7 Data-analysis ...................................... 15
5 Code-Implementation 16
5.1 index.js ......................................... 16
5.2 index.html ........................................ 25
5.3 data.json ......................................... 26
Bibliography 28
Chapter 1
Data Visualization in Virtual Reality
1.1 Introduction
Effective data visualization is the bridge between the quantitative content of the data and human
intuition, and thus an essential component of the scientific path from data into knowledge and
understanding. Visualization is also important in directing choice of algorithms in the data
mining process and in helping to identify and remove bad data from the analysis. However,high
dimensionality of modern data sets represents a critical obstacle. [
1
] How do we visualize
interesting structures and patterns that may exist in hyper-dimensional data spaces? A better
understanding of how we can perceive and interact with multidimensional information poses
some deep questions in the field of cognition technology and human-computer interaction. We
are exploring the use of immersive virtual reality platforms for scientific data visualization, both
as software and inexpensive commodity hardware. These potentially powerful and innovative
tools for multi-dimensional data visualization can also provide an easy and natural path to a
collaborative data visualization and exploration, where scientists can interact with their data and
their colleagues in the same visual space. Immersion provides benefits beyond the traditional
“desktop” visualization tools: it leads to a demonstrably better perception of a datascape geometry,
more intuitive data understanding, and a better retention of the perceived relationships in the
data. To visualize multidimensional data in Virtual Reality, we need to scale the data to three
dimensions. There are various data embedding techniques that can be used and discussed below.
1.2 Multi-dimensional Scaling
Multidimensional scaling is a visual representation of dissimilarities between sets of objects.
The dissimilarities are quantitatively represented as distances. “Objects” can be faces, colour,
map coordinates, political persuasion, or any kind of real or conceptual stimuli. Objects that
1
Chapter 1. Data Visualization in Virtual Reality 2
are more similar (or have shorter distances) are closer together on the graph than objects that
are less similar (or have longer distances). As well as interpreting dissimilarities as distances
on a graph, MDS can also serve as a dimension reduction technique for high-dimensional data.
“scaling” implies that you’re essentially scaling down the data (i.e. making it simpler by creating
lower-dimensional data). Data that is scaled down in dimension keeps similar properties. For
example, two data points that are close together in high-dimensional space will also be close
together in low-dimensional space.
MDS is now used over a wide variety of disciplines. It’s use isn’t limited to a specific matrix or
set of data; In fact, just about any matrix can be analyzed with the technique as long as the
matrix contains some type of relational data. Examples of relational data include correlations,
distances, multiple rating scales or similarities.
1.3 Embedding Techniques
1.3.1 Force-directed Graph
Visualization of links between pages on a wiki using a force-directed layout. Force-directed graph
drawing algorithms are a class of algorithms for drawing graphs in an aesthetically-pleasing way.
Their purpose is to position the nodes of a graph in two-dimensional or three-dimensional space
so that all the edges are of more or less equal length and there are as few crossing edges as
possible, by assigning forces among the set of edges and the set of nodes, based on their relative
positions, and then using these forces either to simulate the motion of the edges and nodes or to
minimize their energy
A flexible force-directed graph layout implementation using position Verlet integration to allow
simple constraints. For more on physical simulations, see Thomas Jakobsen. This implementation
uses a quadtree to accelerate charge interaction using the Barnes–Hut approximation. In addition
to the repulsive charge force, a pseudo-gravity force keeps nodes centered in the visible area and
avoids expulsion of disconnected subgraphs, while links are fixed-distance geometric constraints.
Additional custom forces and constraints may be applied on the "tick" event, simply by updating
the x and y attributes of nodes.
1.3.2 Embedding using Neural Networks
An embedding is a mapping of a discrete categorical variable to a vector of continuous numbers.
In the context of neural networks, embeddings are low-dimensional, learned continuous vector
representations of discrete variables. Neural network embeddings are useful because they can
Chapter 1. Data Visualization in Virtual Reality 3
reduce the dimensionality of categorical variables and meaningfully represent categories in the
transformed space.
1.4 Embedding Visualization
It’s natural to visualize data in 2D on screens, but adding a single dimension enhances the overall
understanding of the underlying structure in higher dimensions. When visualizing 3D embeddings
on a screen, the user can visualize the data as a 3D object or as a 3D world and interact with
the data. When observing the data as a 3D object, the user is always looking towards the object,
he/she can zoom in/out and rotate the object to view it from different perspectives, when viewing
it as a 3D world, user controls are like in-game controls, where the user can fly around the world
and analyze the data from different viewpoints. The latter provides a better sense of immersion
but since, it’s more natural to have a similar visualization technique in VR, since the recent
developments in Virtual reality hardware and its capabilities, we need to develop new techniques
for visualizing data in Virtual Reality, using it for more immersive and collaborative experience
to study and analyze data.
Chapter 2
Exocentric and Egocentric
Visualization
2.1 Introduction
The techniques to represent information can be categorized in many ways. In the beginning
we have looked at information depiction in 1D, 2D, and 3D, then we also analyzed scaling
higher-dimensional information to visualize up to 3D. While the focus was on determining the
spatial arrangement of the data in the previous sections, we now explore on which reference
frame to focus on to arrange data in space. In this section we will analyze the techniques based
on the reference frame in consideration.
2.2 Exocentric Visualization
Discussing the prevalence of exocentric layouts, In general, the resulting representations are
viewer-agnostic, i.e, the viewer is observing data from outside the projection space, and has little
to no influence on how things are projected. Depending on the view-port, the elements may
be occluded (overplotting), and some of the manipulations that the viewer can do to remove
occlusions is redefining similarity (by adjusting criteria), and/or changing the view-port.
We shall discuss the above mentioned techniques and some more that can be used to improve
data-visibility for the user.
4
Chapter 2. Exocentric and Egocentric Visualization 5
2.2.1 Altering opacity
A [
2
] while appreciating the density, can be to alter the opacity of the ones which are occluding
other nodes. Although this way the nodes being occluded are in knowledge of the user but the
visibility of them is still not resloved.
2.2.2 Sampling
To improve the visibility of the nodes, one way would be to rank the importance of nodes and
then filter them to reduce the density.This however results in loss of information which is not
desired.
2.2.3 Stacking
Graphic elements are stacked to avoid overplotting
2.2.4 Changing the view-port
Space distortion / magic lenses: fisheye views / space stretching, to make things more or less visible
http://blogs.evergreen.edu/vistas/files/2015/02/dubel-topost-2dvs3d-visieeevis2014
submission3.pdf
2.2.5 Jitter
To use this approach we need to first arrange the data on a 2 dimensional plane and then
displace elements a bit on the third dimension so that they don’t overlap, at the cost of
breaking semantic-spatial distance mapping. (e.g. like the [
3
]) http://cgis.cs.umd.edu/ ben/pa-
pers/Aris2007Designing.pdf
2.3 Egocentric Visualization
We propose a different paradigm: from exocentric to egocentric approach to visualizing an
information space, where the ego is the viewer (and not an element as commonly is the case
when talking about ego-centric visualizations). We insert the viewer into the information space,
and we explore implications of a viewer-aware visualization.
Chapter 2. Exocentric and Egocentric Visualization 6
2.3.0.1 Guaranteed visibility
Ray Tracing metaphor: if no element is ever touched by the ego emitting rays, then they need to
be moved to come to light Crowd/performer metaphor: everyone wants to be seen by / wants to
see the ego: if there’s anyone blocking the view between the person or the ego then the person
(spectator) will move until they can see.
2.3.0.2 Meaningful perceived distance
Depending on where the ego lies, perception of distance varies. Which means that we don’t really
care about actual distance in the projection space, but rather about the perceived distance from
the viewer’s perspective. The space can be scaled to a point such that the nodes can be easily
distinguishable for and the data can be navigated through by the user conveniently.
2.3.0.3 Our Approach
To address the above, we propose a radial-based approach, centered on the viewer. All pair of
elements and the viewer create an angle. The angle must be large enough that the viewer can
see both elements (repelling radial force, to a rest angle that is the minimal angle to guarantee
visibility with a little breathing space).
The elements that are similar can’t be pushed away too much and the angle between two elements
need to reflect semantic distance (when both the semantic relationship forces and the radial
repulsion forces are acting, the elements that are supposed to be closer in actual space shall be
closer as they should be approximately, however the angle won’t reflect the semantic distance,
when user perceives the relative sizes of elements that are closer, from the perspective it’ll be
clear that how close are those elements). We apply radial repulsion forces only to the pair of
occluded elements, and so we’re just pushing away to remove the occlusion, the effect of this force
on the semantic distance relationship force would be negligible, since all the forces are acting
simultaneously in the simulation.
We then modify the forces to add information carried by the ego, i.e. relevance of the nodes to
the user. The not-so-relevant ones can be moved away, by either increasing distance-to-center
(i.e. go farther), or increasing/decreasing radial position so as to exit the field of view (i.e. move
behind the user).
To address the above, we need to introduce new forces to the model: distance to the viewer (push
things away or move closer), and/or radial distance to a reference angle (i.e. things straight
ahead are most relevant, whereas things on the peripheral view are less so, and those behind are
totally irrelevant).
Chapter 3
Force-directed Simulation
3.1 Introduction
Dust-and-magnet models also builds on forces, but this time forces are external ones (i.e. the
magnets). Each magnet corresponds to a set of properties (i.e. color:red; category:cat); elements
are attracted by magnets whose properties match. Placing the magnets on the space results in
defining the magnetic field for the projection space. Similar elements will tend to land closer
to one another, but as the result of being attracted by another, external force: the magnet.
This means that inter-elements distance is not entirely relevant (especially if there is collision
prevention). This model is more amenable to interaction, and inter-element relationships are not
considered completely.
3.2 Implementation
Force-directed simulation model implements a velocity Verlet numerical integrator for simulating
physical forces on particles. The simulation is simplified: it assumes a constant unit time step t =
1 for each step, and a constant unit mass m = 1 for all particles. As a result, a force F acting on
a particle is equivalent to a constant acceleration a over the time interval t, and can be simulated
simply by adding to the particle’s velocity, which is then added to the particle’s position.
3.3 Challenges
Does not assume viewer’s interaction besides changing viewport. Redefinition of semantic distance
(and thus relayout) is often decoupled, i.e. checkboxes or widgets to specify what dimensions to
7
Chapter 3. Force-directed Simulation 8
consider, and what is the weight of each dimension. This typically results in dynamic redefinition
of spring forces, and a layout that seeks to stabilize forces again.
Chapter 4
Modified Force-directed Simulation
4.1 Introduction
We develop an information space which is aware of the user’s position, and current view-port and
adapt accordingly. We need to optimize visibility of relevant elements while preserving semantic
relationships between the nodes. Current approaches exist to mitigate over-plotting given a
particular projection. We also look at modifying the space so that an analyst/actor who has
particular (more or less temporary) interests in a subset of elements, or a characteristic of the
information space, and then create a (possibly dynamic) distance between them and elements.
We also address the concern of dynamically re-laying out the information space so that most
relevant elements are closer to the ego, and least relevant ones are pushed away, while maintaining
semantic relationships between elements, as well as stability of the visualization.
4.2 Motivation
Our aim is to investigate the relationship of immersive virtual reality and abstract visualization.
To the best of our knowledge, there is no evaluation of how immersive virtual reality can use
abstract representation of high-dimensional data in a meaningful way.
While there are tools available today to visualize data in VR, they have not been optimized from
the user’s perspective. We think that it is important to improve the interactivity and experience
of the user.
9
Chapter 4. Modified Force-directed Simulation 10
4.3 Idea
The idea is to visualize Higher-dimensional data scaled to 3-D in VR.
We start with a data set and its corresponding affinity matrix, and assign random initial position
of points in 3D around the user and using physics simulation, let the points settle down on a
local minima, according to their affinity. With plethora of data points around the user to look at,
there are some ways in which this visualization can be improved. First of all, from the user’s
viewpoint, when visualizing data points, points that are close by in the line of sight can intersect
and result in an occluded vision, to solve this, we introduce new forces in the system, namely
radial repulsion forces between the points that are close enough radially. Secondly, we designate
points that are of higher importance as landmarks and reduce the opacity of points that are far
enough and not landmarks. Finally, we verify the visibility of the nodes with full opacity and
use parameters such as spring stiffness of radial-repulsion forces and size of the nodes to remove
minor occlusions.
Working with images: Using the radial angular bounds for each image we compute the ideal
angle between pairs of nodes that are close enough to each other
4.3.1 Viewer-aware Visualization
4.4 Implementation
Since we to design and develop this visualization tool that is mark with performance and usability,
we used JavaScript since it has a broad set of libraries and is directly accessible via the web. To
render the graph with the physics simulation, we used WebVR. A-Frame is a tool that enables
you to port 3d content in web to WebVR so that the model can be visualized with any of the
available VR headsets, it supports Oculus, HTC Vive and Google Cardboard. To implement
the force-directed model, we used d3-force that has inbuilt functionalities for physics simulation
where custom forces can be defined. The Custom forces are defined as vector fields.
4.4.1 Linear Spring forces
With the data set in the form of an affinity matrix A, we add a spring S[i,j] between each pair of
nodes with the ideal length scaled to A[i,j]. We don’t add spring wherever A[i,j]=0. Once, all
springs are assigned, we start the simulation. The simulation has some parameters that we need
to assign, namely, AlphaDecay,AlphaTarget and CooldownTicks.AlphaDecay is set to 0.228, with
AlphaTarget set to 0. Since the initial value of alpha is 1, this corresponds naturally to 300 ticks
until the simulation stops and the layout freezes.
Chapter 4. Modified Force-directed Simulation 11
4.4.2 Radial Spring forces
Once the simulation freezes, we induce new forces to the system. To implement the radial
replusion forces between nodes, we need to deciede on the pair of nodes between which we need
to apply these forces, to select these pairs we use an algorithm, that is described below.
Algorithm: Selecting near-pairs in 3D:
Step 1. Let G=(V,E) be the graph. Let V1 be the projection of nodes onto the XY-plane.Let S be
the set of chosen near-pairs.
Step 2. Let rV1 = tan-1(V1). Sort rV1 in ascending order.
Step 3. Iterate over the sorted rV1 and adding the pair (rV1[i],rV1[i+1]) to S, if and only if
abs(rV1[i+1].z - rV1[i].z)<= minZDelta
To apply radial repulsion forces between the selected near-pairs, we need to compute the vector
field for this force. Since we want the repulsion force to push nodes away from each other through
the line joining their centers, the vector for its acceleration will depend on the user’s and the
node-pair’s position.
Let
n1
and
n2
be the position of the pair of nodes between which we need to implement the
radial repulsion force. Let v be the user’s current position. We will demonstrate the computation
of force vector acting on
n1
and it can be extended for
n2
symmetrically. Let
u1
and
u2
be the
corresponding unit vectors of
n1−v
and
n2−v
, the direction of the force is perpendicular to
u1
and the plane containing the vectors u1and u2.
Hence, the direction is equivalent to u1x (u1xu2).
Let
F1
be the unit radial repulsion force acting on
n1
, Using Vector-triple product reduction we
have
F1=u1x (u1xu2) = u1(u1.u2) - u2(|u1|2)
Similarly we can compute F2, the unit radial repulsion force acting on n2.
Figure 4.1: Computing F
Chapter 4. Modified Force-directed Simulation 12
To compute the magnitude of this force, we need to decide on the ideal angle between the nodes,
the ideal Angle
φ
depends on the radial bounds of the 3D structure of the nodes, and the buffer
angle tthat we chose.
Let
r1
and
r2
be the radial bounds and
p1
and
p2
be the distances from the observer of the nodes
N1and N2respectively, and tbe the buffer angle then the ideal Angle
α=tan−1(r1
n1) + tan−1(r2
n2) + t
Figure 4.2: Computing Ideal Angle
Now, similar to linear spring forces, where the magnitude of the Force
Fmagnitude
=
−k
(
x−x0
)in
which k is the spring constant and
x0
is the ideal length of the spring, we compute the magnitude
of the radial spring force as, but if and only if the current angle between the pair of nodes is less
than φ, otherwise Fmagnitude = 0
Fmagnitude =−k(θ−φ)
Once, these radial spring forces are activated, the simulation restarts incorporating these new
forces in the system and depending on the value of alphaDecay and alphaTarget, the system cools
down to a state resulting in better visibility of the data-points.
4.4.3 Sphere-crust clustering force
The force-layout can be modified by adding another force to cope with nodes being further or
closer from the user. We force all the nodes towards the spherical-canvas of a particular radius
so that every node is potentially at the same distance from the user. The overall perception
of whether the nodes are farther away or closer to the user and their relative similarity and
significance to the user were too many factors into consideration, adding this force to the system
helps solve some of these concerns. Now, as all the points are almost equidistant from the user,
it’s easier to perceive the similarity index between nodes.
Chapter 4. Modified Force-directed Simulation 13
4.4.4 Altering parameters for better results
Spring stiffness: Using larger values of
k
, i.e. stiffer springs for the nodes that are close to the
user, hence prioritizing on the forces to remove occlusions for the pairs that are closer. The nodes
that are farther get lesser importance.
alphaDecay : Choosing smaller values of AlphaDecay will result in system stabilizing at a better
local minima, but compromising on the computation time. This movement of nodes with its
natural animation can be considered as a user experience advantage in which the focus can be
shifted towards the nodes that are quite far from their desired location and giving the user an
idea about the characteristics of nodes present in different parts of the space.
4.4.5 Changing Opacity of Nodes and Verifying the Occlusions
Now we choose a radius
R
such that we focus on the nodes which lie inside the sphere with
radius
R
. And as for the nodes that lie outside this sphere, we reduce the opacity of nodes that
aren’t designated as
landmarks
. Since the system stabilizes at a certain local minima, some
node occlusions might still be present, so we set
alpha
= 1 and restart the for the nodes lying
inside the sphere of radius Rand the ones designated as landmarks.
4.5 Interactivity with landmarks and other Nodes
The user can interact with each node to perform actions further. A tool-tip box is activated
below when user gazes at a node, where the box can be modified to perform action such as
opening another application, new link in browser or some data-specific action that user needs to
perform. Clicking on the node/gazing for a specific amount of time will teleport the user to that
specific node, followed by restarting of the simulation.
4.6 Applications
4.6.1 Data Types
This tool is compatible with different data-types. Since the nodes are
T hree.j s
objects, so the
nodes can be text, images, 3D object. The user can visualize a combination of these data-types
as nodes and define radial spacial bounds for each object and then the simulation will incorporate
the data.
Chapter 4. Modified Force-directed Simulation 14
Figure 4.3: Sphere Nodes
Figure 4.4: 3D geometry nodes
4.6.2 Search Results
With present day techniques, visualizing image results is restricted to 2D screens. This tool
enables to visualize Image search results in 3D around the user, with improved visibility. As the
user interacts with the result, he/she has the ability to visualize the results from different points
in the space. Let’s say if we search for Dog images, then initially we are presented with images
of Dogs around us optimized for visibility from our perspective, now lets say, there’s a Golden
retriever Dog’s image somewhere in the space, and we wish to look at dogs of similar kind, then
clicking on that node with the VR controller or with a Gaze we can teleport to that node and
then the simulation will restart with all the images rotating towards us and activating the radial
repulsion to remove occlusions. We can then open link corresponding to an image with some
control. This interactive and engaging experience changes the way we visualize search results
today.
4.6.3 Latent spaces
With a recent boom in the Machine learning field, there are plethora of Neural Networks which
have data-sets mapped to latent spaces. Using multidimensional scaling on the Training data-set
or even the grid-points on the latent space, one can use this tool to visualize the data-sets in VR
and understand the networks in an interactive manner.
Chapter 4. Modified Force-directed Simulation 15
Figure 4.5: Images as nodes
4.6.4 Visualizing 3D-object data
Data-sets such as rendered models of a prototype, buildings, or interior designs recorded using
3D camera, etc., even if the data doesn’t have an affinity matrix, the affinity matrix
A
can be set
to 0so this tool will act just as a visualization tool of data where the data can be analyzed and
understood at a single place in a quite natural and convenient manner.
4.7 Data-analysis
Affinity-error for different data-sets using the force simulation
Dataset
affinity cri-
teria
nodes edges
Computation
Time
Affinity-
error
test1 Rnd 4 6 2.32 0.0008
test2 Rnd 5 10 2.54 0.0012
3d Sketches Clustering 72 2556 4.52 0.56
Cities
Distance be-
tween cities
239 28441 5.38 1.2602
Chapter 5
Code-Implementation
5.1 index.js
// li s t en f o r ca m e ra c h an g e / use r m ove m ent
var toggleChange = 0;
do c um e nt . a d dE v en t Li s te n er ( " ke y do wn " , fu n ct i on ( e ve n t ) {
if (
ev e nt . k ey C o de = = "3 7 " ||
ev e nt . k ey C o de = = "3 8 " ||
ev e nt . k ey C o de = = "3 9 " ||
ev e nt . k e yC o de = = " 4 0"
) {
co n so l e .l og ( " ke y do wn " );
if ( to g g leC h a nge = = 0) {
toggleChange = 1;
}
}
}) ;
do c um e nt . a dd E ve n t Li s te n e r (" k e yu p " , fu nc t io n ( e ve nt ) {
if (
ev e nt . k ey C o de = = "3 7 " ||
ev e nt . k ey C o de = = "3 8 " ||
ev e nt . k ey C o de = = "3 9 " ||
ev e nt . k e yC o de = = " 4 0"
) {
co n so l e .l og ( " ke y up " );
if ( to g g leC h a nge = = 1) {
toggleChange = 0;
}
if ( to g g leC h a nge = = 0) {
co n s ol e . l og ( " c h an g e la yo u t " );
i ni ti al iz e Gr ap h () ;
// . d3 A lp ha De ca y (0 .3 )
}
}
16
Chapter 5. Code-Implementation 17
}) ;
// F ir s t - t im e In i t ia l iz i n g gr ap h
linkStrengtSliderValue =
do c um e nt . g e tE l em e nt B yI d ( " l in k St r en g th V al u e ") . v al u e / 1 00 ;
radialRepulsionSliderValue =
do c um e nt . g e tE l em e nt B yI d ( " r ad i al F or c eS t r en g th V al u e ") . v al u e / 1 00 ;
s ph e ri c al C lu s te r in g Ra d iu s Va l ue = do c um e nt . g et E le m en t By I d (
"sphericalClusteringRadiusValue"
). v a lu e ;
sphericalClusteringStrengthValue =
do c um e nt . g e tE l em e nt B yI d ( " s ph e ri c al C l us t er i ng S tr e n gt h Va l ue " ). v a lu e / 1 00 ;
tic k Cou n t = 0 ;
s ta rt Co m pu ta t io nT im e = n ew D at e () . ge tT im e () ;
co n s t Gr a ph = Fo r ce G r a ph V R ( ) ( d o cu m e nt . g e tE l e m en t B y Id ( "3 d - g r ap h ") )
. g ra p hD a ta ( da t a )
. d 3F o rc e ( " ch a rg e " , nu ll )
// . d 3F or c e (" L i ne a r_ S pr i ng _ fo r ce " , Li n ea r Sp r in gF o rc e )
.d3Force(
" li n k ",
d3
. f or ce L in k ( )
. d is ta n ce ( d => d. d i st an c e )
. st r en gt h ( l in k St r en g tS l id e rV a lu e )
)
. d3 F or ce ( " R ad i al _ Re p lu s io n _f o rc e " , R a di a lR e pu l si o nF o rc e )
. d3 F or c e (" S p he r i ca l _f o rc e " , Sp h er i ca l Cl u s te r in g Fo r c e )
. d 3F o r ce (" c ol l i s io n " , d3 . f o r ce C o l li d e ( 5 ) . i t er a t io n s ( 1 0 ))
. l in k Vi s i bi l it y ( f al s e )
. o nE ng i ne T ic k ( t ic ke d ) ;
// . n o d e La b e l ( ’ na me ’ )
// . l i nk L ab e l ( ’ di st a nc e ’ )
// . on E ng i ne S to p ( c om p ut e Di s ta n ce s )
/* . no d eT hr ee Ob j ec t (( { i mg }) => {
co n st i m gT e xt u re = ne w TH RE E . T ex t ur e Lo a d er ( ) . lo a d ( ‘. / im g s /$ { i mg } ‘ );
co n st m a te r i al = ne w TH RE E . S p ri t e Ma t e ri a l ( { map : i mg T e xt u r e }) ;
co n st s pr i te = ne w TH RE E . Sp r it e ( m at e ri a l );
sp r it e . s ca l e .s e t (1 0 , 10 );
return sprite;
})*/
le t { n od e s In i tia l , l ink s } = Gr a ph . g rap h Dat a () ;
// M et h od fo r In i ti al i zi ng g ra p h lat e r
fu n ct io n in i ti al iz e Gr ap h () {
// C om p ut a t io n st ar t - t i me
s ta rt Co m pu ta t io nT im e = n ew D at e () . ge tT im e () ;
// R e se tt in g Va l ue s
do c um e nt . g e tE l em e nt B yI d ( " er r or V al u e ") . t ex t Co n te n t = " C al c ul a ti n g er ro r . ." ;
do c um e nt . g e tE l em e nt B yI d ( " c om p ut a ti o nT i me V al u e " ). t e xt C on t en t =
" C om pu t in g ti m e .. ";
do c um e nt . g e tE l em e nt B yI d ( " i te r at i on C ou n tV a lu e " ). t ex t Co n te n t = " I te r at io n s : 0" ;
Chapter 5. Code-Implementation 18
// F e tc hi ng S li de r Va l ue s
linkStrengtSliderValue =
do c um e nt . g e tE l em e nt B yI d ( " l in k St r en g th V al u e ") . v al u e / 1 00 ;
radialRepulsionSliderValue =
do c um e nt . g e tE l em e nt B yI d ( " r ad i al F or c eS t r en g th V al u e ") . v al u e / 1 00 ;
s ph e ri c al C lu s te r in g Ra d iu s Va l ue = do c um e nt . g et E le m en t By I d (
"sphericalClusteringRadiusValue"
). v a lu e ;
sphericalClusteringStrengthValue =
do c um e nt . g e tE l em e nt B yI d ( " s ph e ri c al C l us t er i ng S tr e n gt h Va l ue " ). v a lu e / 1 00 ;
tic k Cou n t = 0 ;
n od e sT e mp = no de s ;
// S ta r t - m ai n
Gr a ph . g r ap h Da t a ({ n o de s , li nk s } )
.d3Force(
" li n k ",
d3
. f or ce L in k ( )
. d is ta n ce ( d => d. d i st an c e )
. st r en g th (0 )
)
. d 3F o rc e ( " ch a rg e " , nu ll )
. d 3F o r ce (" c ol l i s io n " , d3 . f o r ce C o l li d e ( 6 ) . i t er a t io n s ( 1 0 ))
. d3 F or c e (" R a d ia l _R e pl u s io n _f o rc e " , Ra d ia l Re p ul s i on F or c e )
// . d 3F or c e (" S p he r ic a l_ f or ce " , S ph e ri c al C lu s te r in g Fo r ce )
. l in k Vi s i bi l it y ( f al s e )
. o nE ng i ne T ic k ( t ic ke d ) ;
}
fu n ct io n ti c ke d () {
t ic kC ou nt + +;
// c on s ol e . l og ( t i c kC o u nt );
if ( ti c kC o un t == 28 0 ) {
computeDistances();
}
do c um e nt . g e tE l em e nt B yI d ( " i te r at i on C ou n tV a lu e " ). t ex t Co n te n t =
" I te ra t io n s : " + ti ck Co u nt ;
}
// Com p uti n g f ina l d i st a n ces b e t wee n n ode s and e r ro r c a l cu l a tio n
function computeDistances() {
e nd Co mp u ta ti o nT im e = n ew Da te ( ). g et Ti m e ();
do c um e nt . g e tE l em e nt B yI d ( " c om p ut a ti o nT i me V al u e " ). t e xt C on t en t =
" Ef f . C om p . Ti m e : " + ( e n d Co m pu t a ti o n Ti m e - s t a rt C o mp u ta t i on T i me ) + " ms " ;
va r d ist = [ ] ;
va r e r r orS u m = 0;
fo r ( v ar i = 0; i < n o des . le n gth ; i++ ) {
fo r ( v ar j = i + 1; j < n od e s . l eng t h ; j + +) {
di s t [j + i ] = M a th . s qr t (
( n od e s [ i ]. x - nod e s [ j ]. x ) * ( n o d es [ i ] . x - n o de s [ j ] . x) +
( n od e s [ i ]. y - nod e s [ j ]. y ) * ( n o d es [ i ] . y - n o de s [ j ] . y) +
( n od e s [ i ]. z - nod e s [ j ]. z ) * ( n o d es [ i ] . z - n o de s [ j ] . z)
);
Chapter 5. Code-Implementation 19
// c o ns o le . l o g (" o r ig i na l di s ta n ce " + i + j+ " " + d at a . li n ks [ i +j ] . d is t an c e );
// con s ole . lo g ( " a ctu a l d i sta n ce "+ i +" " + j + " "+ d i st [i+ j ] ) ;
er r o rSu m + =
Ma t h . ab s ( di s t [i + j ] - d a ta . l in k s [ i + j] . d is t a nc e ) /
da t a . li nk s [ i + j ]. d i st a nc e ;
}
}
do c um e nt . g e tE l em e nt B yI d ( " er r or V al u e ") . t ex t Co n te n t =
" R el a ti v e Me an E rr o r : " + e r ro r Su m / dat a . l in k s . le n gt h ;
// c o ns o le . l o g (" d i st a nc e er r or " + e rr o rS u m / d at a . l in ks . l e ng t h );
}
va r wo r ld P os ;
var tempWorldPos;
// G et c am e ra p os i ti o n
va r c a mer a El = do c u me n t . g e t E lem e n t sB y T a gNa m e ( " a - e nti t y " ) [0 ] ;
wo r ld P os = ne w TH RE E . V ec t or 3 ( );
wo r ld P os . s e tF r om M a tr i xP o si t io n ( c am e ra E l . ob je c t3 D . m at r ix W or l d );
t em p Wo rl d Po s = wo rl d Po s ;
// D e fi ni ng t he Rd i al R ep ul si o n Fo rc e
R ad i al R ep u ls i on F or c e . i ni t ia li z e = f u nc t io n (_ ) {
no d es = _ ;
};
fu n c ti o n Ra d ia l Re p u ls i o nF o rc e ( a lp h a ) {
if (radialRepulsionSliderValue > 0) {
fo r ( va r t ria l s = 0; tr i als < 50; t ria l s + +) {
// c on s ol e . l og ( " a l ph a "+ a l ph a )
// P ro j e ct i n g on t o x- y ax is
wo r ld P os . s e tF r om M a tr i xP o si t io n ( c am e ra E l . ob je c t3 D . m at r ix W or l d );
// co n s ole . lo g ( " us er ’ s p osi t i on i s " + wo r ld P o s . x );
// n o de s [ 0 ]. f i xe d = t ru e ; // n o de s [ 0] . x = 0; / / n od e s [0 ] . y =0 ;
// v i ew N od e = no d es [ n od e s . le ng th -1 ] ;
va r t h e taA r ray = [];
// A pp e n di n g t he t a to th e t aA r r a y in ra d i an s (- p i , p i ] co r re s p o nd i n g to ea c h no de
fo r ( v ar i = 0 , n = n od e s . l en g th , n o de; i < n; i++ ) {
no d e = n o de s [ i ] ;
va r th e ta = Ma th . a t an 2 ( no d e .y - wo rl d Po s . y , no de . x - w o rl d Po s . x );
t he t aA r ra y . p us h ( { th et a : th et a , in d ex : i } ) ;
// c on s ol e . l og ( t h e ta A r ra y ) ;
}
// v a r id ea l An g le = 4 * Ma th . P I / ( no d es . l e ng t h );
// S or t in g th e a n gl es
Chapter 5. Code-Implementation 20
t he t aA r ra y . s or t ( f un c t io n ( a , b ) {
re t ur n a. t h et a - b . t he ta ;
}) ;
// Fo r ce ve c tor f i el d m i mi c i ng ra d ial r e p lu s i on be t w ee n c o nse c u tiv e p a ir s of an gu l ar - s o rte d n ode s
fo r (
va r i = 0 ,
n = t h et a Ar r a y . le n gt h ,
node1 ,
node2 ,
k = 0 .1 * Mat h . s qr t ( a lp ha ) * ra d ia l R ep u l si o n Sl i d er V al u e ;
i < n ;
i ++
) {
fo r ( v ar j j = i + 1; jj < i + 5; jj ++ ) {
// va r j = ( i + 1 ) % n ;
j = ( jj + n ) % n ;
no d e1 = no de s [ th e ta A rr a y [i ] . in de x ];
no d e2 = no de s [ th e ta A rr a y [j ] . in de x ];
va r nod e 1 Rel a t ive = {
x : no de 1 . x - w o r ld P o s .x ,
y : no de 1 . y - w o r ld P o s .y ,
z : n o de 1 . z - w or l dP o s .z
};
va r nod e 2 Rel a t ive = {
x : no de 2 . x - w o r ld P o s .x ,
y : no de 2 . y - w o r ld P o s .y ,
z : n o de 2 . z - w or l dP o s .z
};
va r mo d u lu s No d e 1 = M at h . s qr t (
n od e1 R el a ti v e .x * no de 1 Re l at i ve . x +
n od e1 R el a ti v e .y * no de 1 Re l at i ve . y +
node1Relative.z * node1Relative .z
);
va r m od u lu s No d e 2 = M at h . s qr t (
n od e2 R el a ti v e .x * no de 2 Re l at i ve . x +
n od e2 R el a ti v e .y * no de 2 Re l at i ve . y +
node2Relative.z * node2Relative .z
);
// c on s ol e . l og ( m o d ul u s No d e 1 );
// I n it ia li z in g ra di al b ou nd s fo r eac h no de
va r no d e1 R ad i al B ou n d = 5 40 0 / m o du l us N od e1 ;
va r no d e2 R ad i al B ou n d = 5 40 0 / m o du l us N od e2 ;
// con s ole . lo g ( n o d e1R a d ial B o und + " " + m o dul u s Nod e 1 + " " +" r adi a l b o und s : " + nod e 1 R ad i a l Bou n d + " " + m o d ulu s N ode 2 );
var angleBetweenNode1Node2Realtive = Math.abs(
Math.acos(
Chapter 5. Code-Implementation 21
( n od e1 R el a ti v e .x * no de 2 Re l at i ve . x +
n od e1 R el a ti v e .y * no de 2 Re l at i ve . y +
nod e 1 Rel a t ive .z * n ode 2 R ela t i ve .z) /
(modulusNode1 * modulusNode2)
)
);
// C o mp ut in g sp e ci fi c id ea l an gl e
var paddingAngle = 0.2;
va r i d eal A n gle = p a d din g A ngl e +
Ma t h . at an 2 ( n od e 1R a di a lB o un d , m od u lu s No d e1 ) +
Ma t h . at an 2 ( n od e 2R a di a lB o un d , m od u lu s No d e2 );
va r de l ta T he t a = a n gl e Be t we e nN o de 1 No d e 2R e al t iv e - id ea l An gl e ;
// c on s ol e . l og ( d e l ta T h et a ) ;
de l ta Z = M a th . a bs ( n od e 1 .z - no de 2 . z) ;
idealDeltaZ = node1RadialBound + node2RadialBound;
if ( de l ta T he t a < 0 && d el t aZ < id ea l De l ta Z ) {
va r uni t N od e 1 = {
x : n o de 1 Re l at i ve . x / m od u lu sN o de 1 ,
y : n o de 1 Re l at i ve . y / m od u lu sN o de 1 ,
z : n o de 1 Re l at i ve . z / m o du lu s No d e1
};
va r uni t N od e 2 = {
x : n o de 2 Re l at i ve . x / m od u lu sN o de 2 ,
y : n o de 2 Re l at i ve . y / m od u lu sN o de 2 ,
z : n o de 2 Re l at i ve . z / m o du lu s No d e2
};
var dotProductNode1Node2 =
u ni tN o de 1 . x * u ni t No d e2 . x +
u ni tN o de 1 . y * u ni t No d e2 . y +
u ni tN o de 1 . z * u ni t No d e2 . z ;
va r mi n Mo d = Ma th . m in ( m o d ul u sN o de 1 , mo d u lu s N od e 2 ) ;
// Def i nin g f o rc e f or n o de1
no d e 1 . vx - =
k *
del t aTh e t a *
( u ni tN o de 1 . x * d ot P ro d uc t No d e 1N o de 2 - u n it N od e 2 .x ) ;
no d e 1 . vy - =
k *
del t aTh e t a *
( u ni tN o de 1 . y * d ot P ro d uc t No d e 1N o de 2 - u n it N od e 2 .y ) ;
no d e 1 . vz - =
k *
del t aTh e t a *
( u ni tN o de 1 . z * d ot P ro d uc t No d e 1N o de 2 - u n it N od e 2 .z ) ;
// Def i nin g f o rc e f or n o de2
no d e 2 . vx - =
Chapter 5. Code-Implementation 22
k *
del t aTh e t a *
( u ni tN o de 2 . x * d ot P ro d uc t No d e 1N o de 2 - u n it N od e 1 .x ) ;
no d e 2 . vy - =
k *
del t aTh e t a *
( u ni tN o de 2 . y * d ot P ro d uc t No d e 1N o de 2 - u n it N od e 1 .y ) ;
no d e 2 . vz - =
k *
del t aTh e t a *
( u ni tN o de 2 . z * d ot P ro d uc t No d e 1N o de 2 - u n it N od e 1 .z ) ;
}
}
}
// P ro j e ct i n g on t o y- z ax is
wo r ld P os . s e tF r om M a tr i xP o si t io n ( c am e ra E l . ob je c t3 D . m at r ix W or l d );
// co n s ole . lo g ( " us er ’ s p osi t i on i s " + wo r ld P o s . x );
// n od es [ 0] . fi xe d =t ru e ;/ / no de s [0 ]. x =0 ;/ / n od es [ 0] .y = 0;
// v i ew N od e = no d es [ n od e s . le ng th -1 ] ;
va r t h e taA r ray = [];
// A pp e n di n g t he t a to th e t aA r r a y in ra d i an s (- p i , p i ] co r re s p o nd i n g to ea c h no de
fo r ( v ar i = 0 , n = n od e s . l en g th , n o de; i < n; i++ ) {
no d e = n o de s [ i ] ;
va r th e ta = Ma th . a t an 2 ( no d e .z - wo rl d Po s . z , no de . y - w o rl d Po s . y );
t he t aA r ra y . p us h ( { th et a : th et a , in d ex : i } ) ;
// c on s ol e . l og ( t h e ta A r ra y ) ;
}
// v a r id ea l An g le = 4 * Ma th . P I / ( no d es . l e ng t h );
// S or t in g th e a n gl es
t he t aA r ra y . s or t ( f un c t io n ( a , b ) {
re t ur n a. t h et a - b . t he ta ;
}) ;
// Fo r ce ve c tor f i el d m i mi c i ng ra d ial r e p lu s i on be t w ee n c o nse c u tiv e p a ir s of an gu l ar - s o rte d n ode s
fo r (
va r i = 0 ,
n = t h et a Ar r a y . le n gt h ,
node1 ,
node2 ,
k = 0 .1 * Mat h . s qr t ( a lp ha ) * ra d ia l R ep u l si o n Sl i d er V al u e ;
i < n ;
i ++
) {
fo r ( v ar j j = i + 1; jj < i + 5; jj ++ ) {
// va r j = ( i + 1 ) % n ;
j = ( jj + n ) % n ;
no d e1 = no de s [ th e ta A rr a y [i ] . in de x ];
Chapter 5. Code-Implementation 23
no d e2 = no de s [ th e ta A rr a y [j ] . in de x ];
va r nod e 1 Rel a t ive = {
x : no de 1 . x - w o r ld P o s .x ,
y : no de 1 . y - w o r ld P o s .y ,
z : n o de 1 . z - w or l dP o s .z
};
va r nod e 2 Rel a t ive = {
x : no de 2 . x - w o r ld P o s .x ,
y : no de 2 . y - w o r ld P o s .y ,
z : n o de 2 . z - w or l dP o s .z
};
va r m od u lu s No d e 1 = M at h . s qr t (
n od e1 R el a ti v e .x * no de 1 Re l at i ve . x +
n od e1 R el a ti v e .y * no de 1 Re l at i ve . y +
node1Relative.z * node1Relative .z
);
va r mo d u lu s No d e 2 = M at h . s qr t (
n od e2 R el a ti v e .x * no de 2 Re l at i ve . x +
n od e2 R el a ti v e .y * no de 2 Re l at i ve . y +
node2Relative.z * node2Relative .z
);
// c on s ol e . l og ( m o d ul u s No d e 1 );
// I n it ia li z in g ra di al b ou nd s fo r eac h no de
va r no d e1 R ad i al B ou n d = 5 40 0 / m o du l us N od e1 ;
va r no d e2 R ad i al B ou n d = 5 40 0 / m o du l us N od e2 ;
// con s ole . lo g ( n o d e1R a d ial B o und + " " + m o dul u s Nod e 1 + " " +" r adi a l b o und s : " + nod e 1 R ad i a l Bou n d + " " + m o d ulu s N ode 2 );
var angleBetweenNode1Node2Realtive = Math.abs(
Math.acos(
( n od e1 R el a ti v e .x * no de 2 Re l at i ve . x +
n od e1 R el a ti v e .y * no de 2 Re l at i ve . y +
nod e 1 Rel a t ive .z * n ode 2 R ela t i ve .z) /
(modulusNode1 * modulusNode2)
)
);
// C o mp ut in g sp e ci fi c id ea l an gl e
va r p a d din g A ngl e = 0 .2;
va r i d eal A n gle = p a d din g A ngl e +
Ma t h . at an 2 ( n od e 1R a di a lB o un d , m od u lu s No d e1 ) +
Ma t h . at an 2 ( n od e 2R a di a lB o un d , m od u lu s No d e2 );
va r de l ta T he t a = a n gl e Be t we e nN o de 1 No d e 2R e al t iv e - id ea l An gl e ;
// c on s ol e . l og ( d e l ta T h et a ) ;
de l ta X = M a th . a bs ( n od e 1 .x - no de 2 . x) ;
idealDeltaX = node1RadialBound + node2RadialBound;
if ( de l ta T he t a < 0 && d el t aX < id ea l De l ta X ) {
Chapter 5. Code-Implementation 24
va r uni t N od e 1 = {
x : n o de 1 Re l at i ve . x / m od u lu sN o de 1 ,
y : n o de 1 Re l at i ve . y / m od u lu sN o de 1 ,
z : n o de 1 Re l at i ve . z / m o du lu s No d e1
};
va r uni t N od e 2 = {
x : n o de 2 Re l at i ve . x / m od u lu sN o de 2 ,
y : n o de 2 Re l at i ve . y / m od u lu sN o de 2 ,
z : n o de 2 Re l at i ve . z / m o du lu s No d e2
};
var dotProductNode1Node2 =
u ni tN o de 1 . x * u ni t No d e2 . x +
u ni tN o de 1 . y * u ni t No d e2 . y +
u ni tN o de 1 . z * u ni t No d e2 . z ;
va r mi n Mo d = Ma th . m in ( m o d ul u sN o de 1 , mo d u lu s N od e 2 ) ;
// Def i nin g f o rc e f or n o de1
no d e 1 . vx - =
k *
del t aTh e t a *
( u ni tN o de 1 . x * d ot P ro d uc t No d e 1N o de 2 - u n it N od e 2 .x ) ;
no d e 1 . vy - =
k *
del t aTh e t a *
( u ni tN o de 1 . y * d ot P ro d uc t No d e 1N o de 2 - u n it N od e 2 .y ) ;
no d e 1 . vz - =
k *
del t aTh e t a *
( u ni tN o de 1 . z * d ot P ro d uc t No d e 1N o de 2 - u n it N od e 2 .z ) ;
// Def i nin g f o rc e f or n o de2
no d e 2 . vx - =
k *
del t aTh e t a *
( u ni tN o de 2 . x * d ot P ro d uc t No d e 1N o de 2 - u n it N od e 1 .x ) ;
no d e 2 . vy - =
k *
del t aTh e t a *
( u ni tN o de 2 . y * d ot P ro d uc t No d e 1N o de 2 - u n it N od e 1 .y ) ;
no d e 2 . vz - =
k *
del t aTh e t a *
( u ni tN o de 2 . z * d ot P ro d uc t No d e 1N o de 2 - u n it N od e 1 .z ) ;
}
}
}
}
}
}
Chapter 5. Code-Implementation 25
// D e fi ni ng t he S ph er e CL us t er in g Fo rc e
S ph e ri c al C lu s t er i ng F or c e . in i ti a li z e = f un c ti o n (_ ) {
no d es = _ ;
};
function SphericalClusteringForce( alpha) {
wo r ld P os . s e tF r om M a tr i xP o si t io n ( c am e ra E l . ob je c t3 D . m at r ix W or l d );
// con s ole . lo g ( " us er ’ s p o s it i o n i s " + w o rld P o s . x + " "+ w or l d Pos . y + " " + wor l dPo s . z ) ;
fo r (
va r i = 0 ,
n = n od e s . le n gt h ,
k = alpha * sphericalClusteringStrengthValue,
node;
i < n ;
++ i
) {
no d e = n o de s [ i ] ;
var nodeRelative = {
x : nod e . x - w o r ld P o s . x ,
y : nod e . y - w o r ld P o s . y ,
z : n o de . z - w o rl d Po s . z
};
va r mo d u lu s No d e = M a th . s qr t (
nodeRelative.x * nodeRelative.x +
nodeRelative.y * nodeRelative.y +
nodeRelative.z * nodeRelative.z
);
va r si g nn = Ma th . s ig n ( s p he r i ca l C lu s t er i n gR a d iu s V al u e - m o d ul u sN o d e );
no d e . vx += k * nod e R ela t i ve .x * si gn n ;
no d e . vy += k * nod e R ela t i ve .y * si gn n ;
no d e . vz += k * nod e R ela t i ve .z * si gn n ;
}
}
5.2 index.html
< htm l >
< hea d >
< ti t le > E go - c en t r i c da t a Vi s u al i z at i o n < / t it le >
< sc r i pt s rc = "/ / u n p kg . c o m / 3d - f o rc e - gr ap h - vr " > </ s c ri pt >
< s cr i p t sr c = "/ / u n p kg . co m / d3 - f or ce - m a g n et i c " > < / s cr ip t >
< sc r i pt s rc =" ht t p s : // d3 j s . o rg / d 3 . v4 . mi n . j s " > </ s c ri pt >
< sc r ip t s rc = " // cd n js . c lo u d fl a re . co m / a ja x / l ib s / q we s t / 4 .4 . 5/ q we s t . mi n . js " > < / sc ri p t >
< sc r ip t s rc = " // cd n js . c lo u d fl a re . co m / a ja x / l ib s / P a pa P ar s e / 4 .1 . 4 / p ap a p ar s e . mi n . js " > < / sc r ip t >
< s cr i p t sr c = "/ / u n p kg . co m / t hr e e - s pr i t e te x t " > < / s cr i pt >
< s cr i p t sr c =" jq u er y - 3 .3 . 1 . m i n . js " > < / s cr i pt >
< li n k re l =" s t y le s h ee t " hr e f =" s t yl e . c ss " />
< li nk h re f = " ht t ps : // f on ts . g o og l ea p is . co m / cs s ? fa m il y = R ob o to + C on d en s ed " re l =" s t yl e sh e et " />
</ h ea d >
Chapter 5. Code-Implementation 26
< bod y >
< di v id = " s p he r e " > < / di v >
< di v id =" c on t ai n " cl a ss = " gr a ph - d at a " >
< di v cl as s = " ra ng e - s li d er " >
< in pu t id =" l i nk S tr e ng th V al u e " c la s s =" ra ng e - s li d er __ r an g e " t yp e =" r an g e" v al ue = " 10 0" m in = "0 " max = "1 00 " />
< sp an c l as s =" r an g e - s li d e r_ _ va l ue " >5 0 </ s pa n >
< sp a n cl a s s =" t e xt V a lu e "> Li n k St r en g th </ s p an >
</ d iv >
< di v cl as s = " ra ng e - s li d er " >
< in pu t id = " ra d ia l Fo r ce S tr e ng th V al u e " cl as s =" r an ge - s l id e r_ _r a ng e " ty pe = " ra ng e " va lu e =" 0 " min = "0 " ma x = "1 00 " />
< sp an c l as s =" r an g e - s li d e r_ _ va l ue " >5 0 </ s pa n >
< sp a n cla ss =" tex t V alu e " > R a dia l F orc e S tr e ng t h </ sp an >
</ d iv >
< di v cl as s = " ra ng e - s li d er " >
< in pu t id =" s p he r ic a lC l us te r in g St r en g th V al ue " c la ss = " ra ng e - sl i de r_ _ ra n ge " ty pe = " ra ng e " va lu e =" 0" m in = "0 "
ma x =" 10 0 " / >
< sp an c l as s =" r an g e - s li d e r_ _ va l ue " >5 0 </ s pa n >
< sp an c la s s =" t e xt Va l ue " > S ph e ri c al C lu s te r in g St r en gt h < / sp an >
</ d iv >
< di v cl as s = " ra ng e - s li d er " >
< in pu t id = " sp h er i ca l C lu s te r in g Ra d iu s Va l ue " c la ss = " ra ng e - s li d er _ _r a ng e " ty pe = " ra ng e " va lu e = "3 00 " mi n = "2 00 "
ma x =" 50 0 " / >
< sp an c l as s =" r an g e - s li d e r_ _ va l ue " >5 0 </ s pa n >
< sp an c la s s =" t e xt Va l ue " > S ph e ri c al C lu s te r in g Ra di us < / sp an >
</ d iv >
< bu tt on i d= " st ar t Fo rc e " on cl ic k =" i ni ti a li ze G ra ph ( )" >
Re s t art S i mul a t ion
</ b ut t on >
<br / >
< sp an i d =" e r ro r Va l ue " c la s s =" t e xt V al u e " > Ca l cu l at i ng E r ro r .. < / sp an >
< sp an i d =" c o mp u t at i on T i me V al u e " cl as s = " t ex t Va l ue " > C om p ut i ng T im e . . </ s pa n >
< sp an i d= " i te r at i on C ou n t Va l ue " cl a ss = " te x tV a lu e " > It e ra ti o ns : 0 </ sp an >
< span id = "g rap h - dat a -d es cr ip ti on " ></ sp an >
</ d iv >
< di v id = " 3 d - gr a p h " > </ d iv >
< s cr i p t sr c =" i nd e x . j s " > </ s c ri p t >
< s cr i p t sr c =" r an g e S l id e r . j s " > </ sc r ip t >
< di v cl as s = " re s ul t - d a ta " >
<! - - < b ut t on c l as s = " b u tt o n " > Bu t to n </ bu t to n > -- >
</ d iv >
</ b od y >
</ h tm l >
5.3 data.json
va r myd a ta = {
no d es : [
{ id : " 1" , n am e : " 1" },
Chapter 5. Code-Implementation 27
{ id : " 2" , n am e : " 2" },
{ id : " 3" , n am e : " 3" },
{ id : " 4" , n am e : " 4" }
],
li n ks : [
{ sou r ce : "1 " , t a rge t : " 2" , d ist a nce : "10 0 " } ,
{ sou r ce : "1 " , t a rge t : " 3" , d ist a nce : "10 0 " } ,
{ sou r ce : "1 " , t a rge t : " 4" , d ist a nce : "10 0 " } ,
{ sou r ce : "2 " , t a rge t : " 3" , d ist a nce : "10 0 " } ,
{ sou r ce : "2 " , t a rge t : " 4" , d ist a nce : "10 0 " } ,
{ sou r ce : "3 " , t a rge t : " 4" , d ist a nce : "10 0 " }
]
};
va r ad a ta = {
no d es : [
{ id : " 1" , n am e : " 1" },
{ id : " 2" , n am e : " 2" },
{ id : " 3" , n am e : " 3" },
{ id : " 4" , n am e : " 4" },
{ id : " 5" , n am e : " 5" }
],
li n ks : [
{ sou r ce : "1 " , t a rge t : " 2" , d ist a nce : "10 " } ,
{ sou r ce : "1 " , t a rge t : " 3" , d ist a nce : "20 " } ,
{ sou r ce : "1 " , t a rge t : " 4" , d ist a nce : "30 " } ,
{ sou r ce : "1 " , t a rge t : " 5" , d ist a nce : "40 " } ,
{ sou r ce : "2 " , t a rge t : " 3" , d ist a nce : "50 " } ,
{ sou r ce : "2 " , t a rge t : " 4" , d ist a nce : "60 " } ,
{ sou r ce : "2 " , t a rge t : " 5" , d ist a nce : "30 " } ,
{ sou r ce : "3 " , t a rge t : " 4" , d ist a nce : "30 " } ,
{ sou r ce : "3 " , t a rge t : " 5" , d ist a nce : "40 " } ,
{ sou r ce : "4 " , t a rge t : " 5" , d ist a nce : "10 " }
]
};
Bibliography
[1] C. Donalek, S. Djorgovski, S. Davidoff, A. Cioc, A. Wang, G. Longo, J. S. Norris, J. Zhang,
E. Lawler, S. Yeh, A. Mahabal, M. Graham, and A. Drake, “Immersive and collaborative dta
visualization using virtual reality platforms,” 2014. arXiv:1410.7670v1.
[2] T. I. Reiko Miyazaki, “An occlusion-reduced 3d hierarchical data visualization technique,”
[3] B. S. Aleks Aris, “Designing semantic substrates for visualnetwork exploration,”
28
