brian/L4Proj_Dissertation
1
0
Fork 0
Code Issues Pull Requests Releases 4 Wiki Activity

ดราฟต์ 3

Browse Source
This commit is contained in:
Pitchaya Boonsarngsuk
2018-03-22 17:35:05 +00:00
parent ed2996dfaf
commit 0d3067775d
1 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
l4proj.tex
View File

@@ -316,9 +316,13 @@ Data Driven Documents (D3 or D3.js)\cite{D3}\cite{D3Web} is one of the most popu
There are several other data visualisation libraries such as Google Charts and Chart.js. However, most of them do not support force-directed layout and are not as flexible. In addition to being a requirement set by the project advisor, D3 seems like the best choice for this project.
%============================
\section{ESLint}
\label{sec:des_eslint}
JavaScript has a very flexible syntax, which can lead to the problem of inconsistent coding style. ESLint\cite{eslint} is a utility to check and, to a certain degree, fix JavaScript coding errors according to the user-specified set of rules. Unlike other popular alternatives such as js-beautify\cite{js-beautify}, ESLint also provide rules that check for possible syntax errors such as referencing an undefined variable names. To assist the development, a custom ESLint rule set was created for this project and enforced for plug-in.
%============================
\section{Bartasius' D3 Neighbour Sampling plug-in}
In 2017, Bartasius implemented the Chalmers' 1996 algorithm and several others algorithms for his level 4 project at the School of Computing Science. All source files are released on GitHub under the MIT license. To reduce the amount of duplicated work, the project advisor recommended using the repository as a groundwork to implement other algorithms upon.
%============================
\subsection{Input Data}
The data is one of the most important element of the project. Without it, nothing can be visualised. Since the data may consist of many different features (attributes), each with a unique name, it makes sense to store each data point (node) as an JavaScript object, a collection of \texttt{key:value} pairs. To conform with D3 API, all nodes are stored in a list (array).
@@ -346,7 +350,7 @@ Figure \ref{fig:des_gui} shows the modified GUI used in this project. At the top
%============================
\section{Summary}
In this chapter, several technologies and alternatives were discussed. In the end, the project is set out to reuse Bartasius's repository, using D3.js with standard JavaScript, HTML, CSS and SVG for their learning resources.
In this chapter, several technologies and alternatives were discussed. In the end, the project is set out to reuse Bartasius's repository, using D3.js with standard JavaScript, HTML, CSS and SVG for their learning resources, with ESLint tool to format the JavaScript code.
%==============================================================================
@@ -359,7 +363,7 @@ In this chapter, several technologies and alternatives were discussed. In the en
\label{ch:imp}
\section{Outline}
The D3 library is modular. D3-force is the most relevant module for this project. The module provides a simplified Simulation object to simulate various physical force calculations. Each Simulation contain a list of nodes and Force objects. Interfaces were defined, allowing each Force to access the node list. To keep track of positions, each node will be assigned values representing its current location and velocity vector. These values can then be used by the application to draw a graph. In each constant unit time step (iteration), the Simulation will trigger a function in each Force object, allowing them to calculate and add values to each particle's velocity vector, which will then be added to the particle's position by the Simulation. For MDS, each data point is represented as a particle in the simulation.
The D3 library is modular. One of the modules, D3-force, is found to be most relevant for MDS with spring model algorithms. Thus, this project aims to integrate the implementations into this module. D3-force provides a simplified Simulation object to simulate various physical force calculations. Each Simulation contain a list of nodes and Force objects. Interfaces were defined, allowing each Force to access the node list. To keep track of positions, each node will be assigned values representing its current location and velocity vector. These values can then be used by the application to draw a graph. In each constant unit time step (iteration), the Simulation will trigger a function in each Force object, allowing them to calculate and add values to each particle's velocity vector, which will then be added to the particle's position by the Simulation. For MDS, each data point is represented as a particle in the simulation.
Because D3 is a library to be built into other web applications, the algorithms implemented can not be used on their own. Fortunately, as part of Bartasius' level 4 project in 2017, a web application for testing and evaluation has already been created with graphical user interface designed to allow the user to easily select an algorithm, data set, and parameter values to use. Various distance functions, including one specifically created for the Poker Hands data set\cite{UCL_Data} which will be used for evaluation (section \ref{sec:EvalDataSet}), are also in place and fully functional.
@@ -370,6 +374,8 @@ Several values used for evaluation such as execution time, total force applied p
Due to the growing number of algorithms and variables, the main JavaScript code has been refactored. Functions for controlling each algorithm have been extracted to their own file, and some unused codes are removed or commented out.
Finally, a custom set of ESLint rules was created to format and check for possible JavaScript errors in the implementations made to the D3 library. The same rule set was also used to format the JavaScript code for the web application to a certain degree, but many more exceptions had to be made due to the difference in the code structure.
\section{Algorithms}
This section discusses implementation decisions for each algorithm, some of which are already implemented in D3 force module and the d3-neighbour-sampling plugin. Adjustments made to third-party-implemented algorithms are also discussed.
@@ -944,15 +950,13 @@ I would like to thank Matthew Chalmers for his guidance and feedback throughout
\begin{appendices}
\chapter{Running the evaluation application}
The web application can run locally by loading a single HTML file. It is located at
The web application can run locally by loading a single HTML file. It is located at
\begin{verbatim}
examples/example-papaparsing.html
\end{verbatim}
The data sets used can also be found at
\begin{verbatim}
examples/data
\end{verbatim}
Please note that a modern browser is required to run the application. Firefox 57 and Chrome 61 were tested, but some older versions might also works.
The data sets used can also be found at \texttt{examples/data}.
Please note that a modern browser is required to run the application. The project focuses on Chrome 61 but was also tested on Firefox 57. Older versions and other modern browsers should also work.
Most of the settings are available on the web interface. However, the cut-off value to stop the simulation when the system stabilises is not. To change the values, navigate to
\begin{verbatim}
@@ -964,8 +968,17 @@ Aside from the Poker Hands data set, all tests uses the ``General'' distance fun
Euclidean distance function ignores \texttt{class}, \texttt{app}, \texttt{user}, \texttt{weekday} and \texttt{type} fields. This is for other data sets not used in this project. It will also crash when other fields contain non-number values. The error can be seen in the JavaScript console.
To calculate the Stress of the current layout, open the JavaScript console and run
\begin{verbatim}
d3.calculateStress(nodes, function (s, t) {
return distanceFunction(s, t, props, norm);})
\end{verbatim}
The web page will freeze until the calculation is finished and returned to the JavaScript console. It should be noted that calculating Stress of the layout with more than 5,000 data points can take a long time and may crash the browser tab.
%%%%%%%%%%%%%%%%
\chapter{Setting up development environment}
The API references and instruction for building the plug-in is available in README.md file. Please note that the build scripts are written for Ubuntu and may have to be adapted for other distributions or operating systems. A built JavaScript file for the plug-in is already included with the submission, hence re-building is unnecessary.
The API references and instruction for building the plug-in is available in README.md file. Please note that the build scripts are written for Ubuntu and works on the lab's CentOS environment. However, it may have to be adapted for other distributions or operating systems. A built JavaScript file for the plug-in is already included with the submission, hence re-building is unnecessary.
For the plug-in, dependencies have to first been fetched and installed. Assuming that a recent version of Node.js and node package manager is already installed, run
\begin{verbatim}
@@ -980,6 +993,11 @@ To compile and pack the plug-in, run
\end{verbatim}
The output files will be located in the \texttt{build} directory.
To check the coding style, run
\begin{verbatim}
npm run lintcheck
\end{verbatim}
The evaluation web page is self-contained and can be edited with any text editor without Node.js. It will load the plug-in from the \texttt{build} directory. When the new build of the plug-in is compiled, simply refresh the web page will load up the new build.
The code is currently hosted on a personal publicly-accessible Git service at \url{https://git.win32exe.tech/brian/d3-spring-model}. Since this is on a personal bare-metal server, it will be maintained with best-effort without guarantee.