\documentclass[11pt,twoside]{article}\makeatletter

\IfFileExists{xcolor.sty}%
  {\RequirePackage{xcolor}}%
  {\RequirePackage{color}}
\usepackage{colortbl}
\usepackage{wrapfig}
\usepackage{ifxetex}
\ifxetex
  \usepackage{fontspec}
  \usepackage{xunicode}
  \catcode`⃥=\active \def⃥{\textbackslash}
  \catcode`❴=\active \def❴{\{}
  \catcode`❵=\active \def❵{\}}
  \def\textJapanese{\fontspec{Noto Sans CJK JP}}
  \def\textChinese{\fontspec{Noto Sans CJK SC}}
  \def\textKorean{\fontspec{Noto Sans CJK KR}}
  \setmonofont{DejaVu Sans Mono}
  
\else
  \IfFileExists{utf8x.def}%
   {\usepackage[utf8x]{inputenc}
      \PrerenderUnicode{–}
    }%
   {\usepackage[utf8]{inputenc}}
  \usepackage[english]{babel}
  \usepackage[T1]{fontenc}
  \usepackage{float}
  \usepackage[]{ucs}
  \uc@dclc{8421}{default}{\textbackslash }
  \uc@dclc{10100}{default}{\{}
  \uc@dclc{10101}{default}{\}}
  \uc@dclc{8491}{default}{\AA{}}
  \uc@dclc{8239}{default}{\,}
  \uc@dclc{20154}{default}{ }
  \uc@dclc{10148}{default}{>}
  \def\textschwa{\rotatebox{-90}{e}}
  \def\textJapanese{}
  \def\textChinese{}
  \IfFileExists{tipa.sty}{\usepackage{tipa}}{}
\fi
\def\exampleFont{\ttfamily\small}
\DeclareTextSymbol{\textpi}{OML}{25}
\usepackage{relsize}
\RequirePackage{array}
\def\@testpach{\@chclass
 \ifnum \@lastchclass=6 \@ne \@chnum \@ne \else
  \ifnum \@lastchclass=7 5 \else
   \ifnum \@lastchclass=8 \tw@ \else
    \ifnum \@lastchclass=9 \thr@@
   \else \z@
   \ifnum \@lastchclass = 10 \else
   \edef\@nextchar{\expandafter\string\@nextchar}%
   \@chnum
   \if \@nextchar c\z@ \else
    \if \@nextchar l\@ne \else
     \if \@nextchar r\tw@ \else
   \z@ \@chclass
   \if\@nextchar |\@ne \else
    \if \@nextchar !6 \else
     \if \@nextchar @7 \else
      \if \@nextchar (8 \else
       \if \@nextchar )9 \else
  10
  \@chnum
  \if \@nextchar m\thr@@\else
   \if \@nextchar p4 \else
    \if \@nextchar b5 \else
   \z@ \@chclass \z@ \@preamerr \z@ \fi \fi \fi \fi
   \fi \fi  \fi  \fi  \fi  \fi  \fi \fi \fi \fi \fi \fi}
\gdef\arraybackslash{\let\\=\@arraycr}
\def\@textsubscript#1{{\m@th\ensuremath{_{\mbox{\fontsize\sf@size\z@#1}}}}}
\def\Panel#1#2#3#4{\multicolumn{#3}{){\columncolor{#2}}#4}{#1}}
\def\abbr{}
\def\corr{}
\def\expan{}
\def\gap{}
\def\orig{}
\def\reg{}
\def\ref{}
\def\sic{}
\def\persName{}\def\name{}
\def\placeName{}
\def\orgName{}
\def\textcal#1{{\fontspec{Lucida Calligraphy}#1}}
\def\textgothic#1{{\fontspec{Lucida Blackletter}#1}}
\def\textlarge#1{{\large #1}}
\def\textoverbar#1{\ensuremath{\overline{#1}}}
\def\textquoted#1{‘#1’}
\def\textsmall#1{{\small #1}}
\def\textsubscript#1{\@textsubscript{\selectfont#1}}
\def\textxi{\ensuremath{\xi}}
\def\titlem{\itshape}
\newenvironment{biblfree}{}{\ifvmode\par\fi }
\newenvironment{bibl}{}{}
\newenvironment{byline}{\vskip6pt\itshape\fontsize{16pt}{18pt}\selectfont}{\par }
\newenvironment{citbibl}{}{\ifvmode\par\fi }
\newenvironment{docAuthor}{\ifvmode\vskip4pt\fontsize{16pt}{18pt}\selectfont\fi\itshape}{\ifvmode\par\fi }
\newenvironment{docDate}{}{\ifvmode\par\fi }
\newenvironment{docImprint}{\vskip 6pt}{\ifvmode\par\fi }
\newenvironment{docTitle}{\vskip6pt\bfseries\fontsize{22pt}{25pt}\selectfont}{\par }
\newenvironment{msHead}{\vskip 6pt}{\par}
\newenvironment{msItem}{\vskip 6pt}{\par}
\newenvironment{rubric}{}{}
\newenvironment{titlePart}{}{\par }

\newcolumntype{L}[1]{){\raggedright\arraybackslash}p{#1}}
\newcolumntype{C}[1]{){\centering\arraybackslash}p{#1}}
\newcolumntype{R}[1]{){\raggedleft\arraybackslash}p{#1}}
\newcolumntype{P}[1]{){\arraybackslash}p{#1}}
\newcolumntype{B}[1]{){\arraybackslash}b{#1}}
\newcolumntype{M}[1]{){\arraybackslash}m{#1}}
\definecolor{label}{gray}{0.75}
\def\unusedattribute#1{\sout{\textcolor{label}{#1}}}
\DeclareRobustCommand*{\xref}{\hyper@normalise\xref@}
\def\xref@#1#2{\hyper@linkurl{#2}{#1}}
\begingroup
\catcode`\_=\active
\gdef_#1{\ensuremath{\sb{\mathrm{#1}}}}
\endgroup
\mathcode`\_=\string"8000
\catcode`\_=12\relax

\usepackage[a4paper,twoside,lmargin=1in,rmargin=1in,tmargin=1in,bmargin=1in,marginparwidth=0.75in]{geometry}
\usepackage{framed}

\definecolor{shadecolor}{gray}{0.95}
\usepackage{longtable}
\usepackage[normalem]{ulem}
\usepackage{fancyvrb}
\usepackage{fancyhdr}
\usepackage{graphicx}
\usepackage{marginnote}

\renewcommand{\@cite}[1]{#1}


\renewcommand*{\marginfont}{\itshape\footnotesize}

\def\Gin@extensions{.pdf,.png,.jpg,.mps,.tif}

  \pagestyle{fancy}

\usepackage[pdftitle={Visualization of Multi-Service System Network with D3.Js \& Kdb+/q using Websocket},
 pdfauthor={}]{hyperref}
\hyperbaseurl{}

	 \paperwidth210mm
	 \paperheight297mm
              
\def\@pnumwidth{1.55em}
\def\@tocrmarg {2.55em}
\def\@dotsep{4.5}
\setcounter{tocdepth}{3}
\clubpenalty=8000
\emergencystretch 3em
\hbadness=4000
\hyphenpenalty=400
\pretolerance=750
\tolerance=2000
\vbadness=4000
\widowpenalty=10000

\renewcommand\section{\@startsection {section}{1}{\z@}%
     {-1.75ex \@plus -0.5ex \@minus -.2ex}%
     {0.5ex \@plus .2ex}%
     {\reset@font\Large\bfseries}}
\renewcommand\subsection{\@startsection{subsection}{2}{\z@}%
     {-1.75ex\@plus -0.5ex \@minus- .2ex}%
     {0.5ex \@plus .2ex}%
     {\reset@font\Large}}
\renewcommand\subsubsection{\@startsection{subsubsection}{3}{\z@}%
     {-1.5ex\@plus -0.35ex \@minus -.2ex}%
     {0.5ex \@plus .2ex}%
     {\reset@font\large}}
\renewcommand\paragraph{\@startsection{paragraph}{4}{\z@}%
     {-1ex \@plus-0.35ex \@minus -0.2ex}%
     {0.5ex \@plus .2ex}%
     {\reset@font\normalsize}}
\renewcommand\subparagraph{\@startsection{subparagraph}{5}{\parindent}%
     {1.5ex \@plus1ex \@minus .2ex}%
     {-1em}%
     {\reset@font\normalsize\bfseries}}


\def\l@section#1#2{\addpenalty{\@secpenalty} \addvspace{1.0em plus 1pt}
 \@tempdima 1.5em \begingroup
 \parindent \z@ \rightskip \@pnumwidth 
 \parfillskip -\@pnumwidth 
 \bfseries \leavevmode #1\hfil \hbox to\@pnumwidth{\hss #2}\par
 \endgroup}
\def\l@subsection{\@dottedtocline{2}{1.5em}{2.3em}}
\def\l@subsubsection{\@dottedtocline{3}{3.8em}{3.2em}}
\def\l@paragraph{\@dottedtocline{4}{7.0em}{4.1em}}
\def\l@subparagraph{\@dottedtocline{5}{10em}{5em}}
\@ifundefined{c@section}{\newcounter{section}}{}
\@ifundefined{c@chapter}{\newcounter{chapter}}{}
\newif\if@mainmatter 
\@mainmattertrue
\def\chaptername{Chapter}
\def\frontmatter{%
  \pagenumbering{roman}
  \def\thechapter{\@roman\c@chapter}
  \def\theHchapter{\roman{chapter}}
  \def\thesection{\@roman\c@section}
  \def\theHsection{\roman{section}}
  \def\@chapapp{}%
}
\def\mainmatter{%
  \cleardoublepage
  \def\thechapter{\@arabic\c@chapter}
  \setcounter{chapter}{0}
  \setcounter{section}{0}
  \pagenumbering{arabic}
  \setcounter{secnumdepth}{6}
  \def\@chapapp{\chaptername}%
  \def\theHchapter{\arabic{chapter}}
  \def\thesection{\@arabic\c@section}
  \def\theHsection{\arabic{section}}
}
\def\backmatter{%
  \cleardoublepage
  \setcounter{chapter}{0}
  \setcounter{section}{0}
  \setcounter{secnumdepth}{2}
  \def\@chapapp{\appendixname}%
  \def\thechapter{\@Alph\c@chapter}
  \def\theHchapter{\Alph{chapter}}
  \appendix
}
\newenvironment{bibitemlist}[1]{%
   \list{\@biblabel{\@arabic\c@enumiv}}%
       {\settowidth\labelwidth{\@biblabel{#1}}%
        \leftmargin\labelwidth
        \advance\leftmargin\labelsep
        \@openbib@code
        \usecounter{enumiv}%
        \let\p@enumiv\@empty
        \renewcommand\theenumiv{\@arabic\c@enumiv}%
	}%
  \sloppy
  \clubpenalty4000
  \@clubpenalty \clubpenalty
  \widowpenalty4000%
  \sfcode`\.\@m}%
  {\def\@noitemerr
    {\@latex@warning{Empty `bibitemlist' environment}}%
    \endlist}

\def\tableofcontents{\section*{\contentsname}\@starttoc{toc}}
\parskip0pt
\parindent1em
\def\Panel#1#2#3#4{\multicolumn{#3}{){\columncolor{#2}}#4}{#1}}
\newenvironment{reflist}{%
  \begin{raggedright}\begin{list}{}
  {%
   \setlength{\topsep}{0pt}%
   \setlength{\rightmargin}{0.25in}%
   \setlength{\itemsep}{0pt}%
   \setlength{\itemindent}{0pt}%
   \setlength{\parskip}{0pt}%
   \setlength{\parsep}{2pt}%
   \def\makelabel##1{\itshape ##1}}%
  }
  {\end{list}\end{raggedright}}
\newenvironment{sansreflist}{%
  \begin{raggedright}\begin{list}{}
  {%
   \setlength{\topsep}{0pt}%
   \setlength{\rightmargin}{0.25in}%
   \setlength{\itemindent}{0pt}%
   \setlength{\parskip}{0pt}%
   \setlength{\itemsep}{0pt}%
   \setlength{\parsep}{2pt}%
   \def\makelabel##1{\upshape ##1}}%
  }
  {\end{list}\end{raggedright}}
\newenvironment{specHead}[2]%
 {\vspace{20pt}\hrule\vspace{10pt}%
  \phantomsection\label{#1}\markright{#2}%

  \pdfbookmark[2]{#2}{#1}%
  \hspace{-0.75in}{\bfseries\fontsize{16pt}{18pt}\selectfont#2}%
  }{}
      \def\TheFullDate{2018-01-15 (revised: 15 January 2018)}
\def\TheID{\makeatother }
\def\TheDate{2018-01-15}
\title{Visualization of Multi-Service System Network with D3.Js \& Kdb+/q using Websocket}
\author{}\makeatletter 
\makeatletter
\newcommand*{\cleartoleftpage}{%
  \clearpage
    \if@twoside
    \ifodd\c@page
      \hbox{}\newpage
      \if@twocolumn
        \hbox{}\newpage
      \fi
    \fi
  \fi
}
\makeatother
\makeatletter
\thispagestyle{empty}
\markright{\@title}\markboth{\@title}{\@author}
\renewcommand\small{\@setfontsize\small{9pt}{11pt}\abovedisplayskip 8.5\p@ plus3\p@ minus4\p@
\belowdisplayskip \abovedisplayskip
\abovedisplayshortskip \z@ plus2\p@
\belowdisplayshortskip 4\p@ plus2\p@ minus2\p@
\def\@listi{\leftmargin\leftmargini
               \topsep 2\p@ plus1\p@ minus1\p@
               \parsep 2\p@ plus\p@ minus\p@
               \itemsep 1pt}
}
\makeatother
\fvset{frame=single,numberblanklines=false,xleftmargin=5mm,xrightmargin=5mm}
\fancyhf{} 
\setlength{\headheight}{14pt}
\fancyhead[LE]{\bfseries\leftmark} 
\fancyhead[RO]{\bfseries\rightmark} 
\fancyfoot[RO]{}
\fancyfoot[CO]{\thepage}
\fancyfoot[LO]{\TheID}
\fancyfoot[LE]{}
\fancyfoot[CE]{\thepage}
\fancyfoot[RE]{\TheID}
\hypersetup{citebordercolor=0.75 0.75 0.75,linkbordercolor=0.75 0.75 0.75,urlbordercolor=0.75 0.75 0.75,bookmarksnumbered=true}
\fancypagestyle{plain}{\fancyhead{}\renewcommand{\headrulewidth}{0pt}}

\date{}
\usepackage{authblk}

\providecommand{\keywords}[1]
{
\footnotesize
  \textbf{\textit{Index terms---}} #1
}

\usepackage{graphicx,xcolor}
\definecolor{GJBlue}{HTML}{273B81}
\definecolor{GJLightBlue}{HTML}{0A9DD9}
\definecolor{GJMediumGrey}{HTML}{6D6E70}
\definecolor{GJLightGrey}{HTML}{929497} 

\renewenvironment{abstract}{%
   \setlength{\parindent}{0pt}\raggedright
   \textcolor{GJMediumGrey}{\rule{\textwidth}{2pt}}
   \vskip16pt
   \textcolor{GJBlue}{\large\bfseries\abstractname\space}
}{%   
   \vskip8pt
   \textcolor{GJMediumGrey}{\rule{\textwidth}{2pt}}
   \vskip16pt
}

\usepackage[absolute,overlay]{textpos}

\makeatother 
      \usepackage{lineno}
      \linenumbers
      
\begin{document}

             \author[1]{Ali Asgher  Kapadiya}

\renewcommand\Authands{ and }

\date{\small \em Received: 9 December 2017 Accepted: 4 January 2018 Published: 15 January 2018}

\maketitle


\begin{abstract}
        


Visualization of complex web of services running in a multi-service system using D3.js as frontend, KDB+/q as backend and WebSocket & JSON for communication.

\end{abstract}


\keywords{multi-service systems, visualization, Kdb+, q, D3.js, websocket, JSON, SVG.}

\begin{textblock*}{18cm}(1cm,1cm) % {block width} (coords) 
\textcolor{GJBlue}{\LARGE Global Journals \LaTeX\ JournalKaleidoscope\texttrademark}
\end{textblock*}

\begin{textblock*}{18cm}(1.4cm,1.5cm) % {block width} (coords) 
\textcolor{GJBlue}{\footnotesize \\ Artificial Intelligence formulated this projection for compatibility purposes from the original article published at Global Journals. However, this technology is currently in beta. \emph{Therefore, kindly ignore odd layouts, missed formulae, text, tables, or figures.}}
\end{textblock*}


\let\tabcellsep& 	 	 		 
\section[{Introduction}]{Introduction}\par
ata visualization is everywhere. In the past decade, the JavaScript world has evolved multiple folds. A lot of JavaScript frameworks provide visualization analytics that brings the information to life. It has moved from the world of bar charts and scatter plots to a lot of other interactive charts which are now used heavily like Gauge charts (dial charts) in risk systems, Spider charts (radar charts) to compare the multivariate data, etc.\par
One important aspect these JavaScript frameworks provides is the visualization of the relationship between the data. For example, during the investigation of Panama Papers, the ICIJ network used Linkurious.js  {\ref [1]}. This JavaScript library provided a simple and powerful way to visualize the graph database generated by Neo4j from more than 11.5 million documents, representing around 2.6 terabytes of data, enabling the investigators to uncover the potential stories in a short time frame.\par
There are multiple JavaScript frameworks available for data visualization D3.js, Linkurious.js, Processing.js, Raphael.js to name a few. The comparison of these visualization frameworks is beyond the scope of this paper. 
\section[{a) Motivation}]{a) Motivation}\par
The idea of this paper is to visualize the complex network of the multi-service system (having 100s of services serving different functionalities) using the WebSocket and JSON for communication. This visualization can help the developers/maintenance team to understand the complexity of the system and analyze the flow of information between the services.\par
In this paper, we are going to visualize the complex web of Kdb+/q services in a typical financial institution using the D3.js as a visualization tool. However, any system publishing the events to a centralized service supporting the WebSocket and JSON can easily be integrated with the D3.js implementation we are going to discuss in this paper. 
\section[{b) D3.js}]{b) D3.js}\par
D3.js (D3 or Data-Driven Documents) created by Mike Bostock  {\ref [2]}, is one of the JavaScript frameworks which uses the browser capabilities for producing interactive visualizations. It works perfectly with the DOM (Document Object Model) and is widely used on websites across the world for displaying the data in interactive graphical components.\par
In general, there are two different ways to create and visualize the graphical components:\par
? SVG -Remembers the objects in a DOM and enables the event handlers to be associated with objects.\par
? Canvas -Renders the objects to a picture, but highly performant while handling a large number of objects. 
\section[{c) Kdb+}]{c) Kdb+}\par
Kdb+ is column -oriented, in-memory database known for its high-performance in the financial world. It was created by Arthur Whitney and is now one of the highly suitable databases for real-time time-series data analytics and is capable of handling millions of records effectively. The 32-bit version is free to download and use from https://kx.com/.\par
Kdb+ is used for tick data and analytics platform in investments banks, hedge funds, etc. for various real-time analytics, P\&L, risk assessment, best execution and regulatory purpose. It is slowly making its way to other fields like life-sciences, gaming, space, etc  {\ref [3]}. A typical Kdb+ platform has evolved to hundreds of q services serving a different functionality like data capture, in-memory database, historical database, realtime calculation, user query gateways, etc. 
\section[{II.}]{II.} 
\section[{Process Visualizer}]{Process Visualizer}\par
There are two main components we are going to discuss in this paper. We will be using the term Process and Service interchangeably in this paper. 
\section[{a) Monitor process}]{a) Monitor process}\par
It is a centralized service containing the information of all the processes and connections among those processes. In this paper, it has been implemented in Kdb+ however it can be implemented in any other programming language and for any system having the complex web of connections.   
\section[{Data Structure}]{Data Structure}\par
Following are the data structures we are going to use in this paper.\par
Node: A node is a point in the network that holds some properties. In our example, we are going to represent each Kdb+ service as a node in the network with two attributes 'prc' (process name) and 'grp' (process group).\par
Link: An edge or a link represents a connection between two nodes. In our case, a link is representing a q/Kdb+ process connection to another q/Kdb+ process. 
\section[{IV.}]{IV.} 
\section[{Monitor Process}]{Monitor Process}\par
A Kdb/q process that acts as centralized service and has information of all the q processes running in the system and the connection between these q processes or to the users or the third-party apps. The appendix contains the full code for the monitor process. There are three main functionalities of a q monitor service.\par
? Monitoring -Listening all process/connection events ? Subscriptions Maintaining the list of subscribers ? Notification -Notifying the subscriber about any addition/deletion of process/connections a) Monitoring functionality Following are the functions through which the Monitor service cab be notified about any process/connection addition/drop. 
\section[{? Add Prcocess}]{? Add Prcocess}\par
Any service when it comes up needs to notify the monitor process about its name and meta using this function. 
\section[{? Add Connection}]{? Add Connection}\par
When a process is requested for a connection from some other process, user or third-party app, the process can inform the monitor service using the add Connection method. 
\section[{? Drop Process}]{? Drop Process}\par
This function can either be called from a process which is gracefully shutting down or can be called by monitor process connection handler after detecting the disconnection. 
\section[{? Drop Connection b) Subscription Functionality}]{? Drop Connection b) Subscription Functionality}\par
The subscription functionality maintains a list of subscribers who are interested in process/connection events. The browser while loading the page will connect to Monitor service for any event updates. 
\section[{c) Notification functionality}]{c) Notification functionality}\par
The monitor process will publish the following event to all the subscribers in case of any events along with the process/connection details. The web component needs to implement/handle these events and render the changes accordingly on the screen. Visualization of Multi-Service System Network with D3.Js \& KDB+/q using Websocket -This function will be called when a q process drops a connection to some other process either gracefully or detecting a disconnection by connection close handler.? add\textunderscore prc\textunderscore event ? add\textunderscore conn\textunderscore event ? remove\textunderscore prc\textunderscore event ? remove\textunderscore conn\textunderscore event V. 
\section[{Web Component}]{Web Component}\par
? WebSocket connection to Monitor service and subscribing itself for any event updates ? Call-back functions to listen and process the process/connection updates. ? Rendering the nodes (processes) and links (connections) on D3 SVG. 
\section[{a) Connection to Monitor service}]{a) Connection to Monitor service}\par
The following JavaScript code is connecting to the Monitor service using the browser WebSocket functionality and implementing the standard call-back methods of WebSocket. 
\section[{b) Monitor Event call-back methods implementation}]{b) Monitor Event call-back methods implementation}\par
Implementation of the monitor process callbacks methods and then delegating the calls for displaying the process/connection updates using d3.js. 
\section[{c) Initializing the D3 SVG object d) Refreshing the nodes and links}]{c) Initializing the D3 SVG object d) Refreshing the nodes and links}\par
The 'refresh' function contains the code to refresh the SVG after each node/link addition/removal update. 
\section[{VI.}]{VI.} 
\section[{D3.js in Action}]{D3.js in Action}\par
The appendix below contains the full code for creating and displaying the process network. a) Steps to Run 1) Download 32bit version of KDB+/q from https://kx.com/download/ 2) Extract the zip file to 'C:\textbackslash '; it will produce a folder 'C:\textbackslash q  {\ref ' [4]}. 3) Save the `monitor.q`, `Visualizer.html` and `simulator.q` files to the `C:\textbackslash q\textbackslash w32` directory. 4) Open a command prompt, go to the `C:\textbackslash q\textbackslash w32` directory and run the `monitor.q` file C:\textbackslash q\textbackslash w32>q monitor.q -p 5555 .nodes(nNodes).links(nLinks).linkDistance(50).charge  {\ref (-200)} .on("tick", tick); var svg = d3.select("body").append("svg").attr("width", sWidth).attr("height", sHeight); var arrows = svg.append("svg:defs").selectAll("marker") .data(["arrow"]) .enter() .append("svg:marker") .attr("id", String).attr("viewBox", "0 -5 10 10") .attr("refX", 10).attr("refY", -1) .attr("markerWidth", 4).attr("markerHeight", 4) .attr("orient", "auto").append("svg:path").attr("d", "M0,-5L10,0L0,5"); svg.append("rect").attr("width", sWidth).attr("height", sHeight); var nNodes = force.nodes(), nLinks = force.links(), node = svg.selectAll(".node"), link = svg.selectAll(".link"); function refresh() \{ link = link.data(nLinks); link.enter().append("path").attr("class", "link") .attr("marker-end", "url(\#arrow)"); link.exit().remove(); node = node.data(nNodes); var nodeEnter = node.enter() .insert("g").attr("class", "node").call(force.drag); 5) Open the `Visualizer.html` in any browser supporting the WebSocket. The page will connect via WebSocket to the monitor service running on port 5555. Now the Visualizer is ready to display and service/connection updates. C:\textbackslash q\textbackslash w32>Visualizer.html 6) We will run a simulator to span some dummy services and connections.\par
w32>q simulator.q 7) Now check the Visualizer page, you will see the simulated network updating real-time.\par
To stop the continuously running simulation, type the command loop:0b on the simulator service console. 
\section[{b) Simulated Network Visualization}]{b) Simulated Network Visualization}\par
Here is a sample graph generated by D3.js using the simulated process network implemented in q/Kdb+.  
\section[{Conclusion}]{Conclusion}\par
The whitepaper demonstrated how the visualization platform could connect to a centralized service supporting the JSON and WebSocket and display the network of services interfacing with each other.\par
The service-network visualization example discussed in this paper could be useful for developers and support to visualize the health of the system for monitoring purpose. The code is not production-ready and has been kept concise for simplicity. Now the monitor service is ready to listen to any service/connection events. C:\textbackslash q\textbackslash w32>q simulator.q /Publish-Subscribe .  .sim.prcsall:update id:i from ungroup update `\$prc,`\$grp ,`\$"|"vs/:target from `prc`grp`target!/:(("tp\textunderscore fx\textunderscore a";"tp";"");("tp\textunderscore eqc\textunderscore a";"tp ";"");("tp\textunderscore fx\textunderscore e";"tp";"");("tp\textunderscore eqc\textunderscore e";"tp";"");("tp\textunderscore fx \textunderscore u";"tp";"");("tp\textunderscore eqc\textunderscore u";"tp";"");("ctp\textunderscore fx\textunderscore a";"ctp";"t p\textunderscore fx\textunderscore a");("ctp\textunderscore eqc\textunderscore a";"ctp";"tp\textunderscore eqc\textunderscore a");("ctp\textunderscore fx\textunderscore e";"c tp";"tp\textunderscore fx\textunderscore e");("ctp\textunderscore eqc\textunderscore e";"ctp";"tp\textunderscore eqc\textunderscore e");("ctp\textunderscore fx \textunderscore u";"ctp";"tp\textunderscore fx\textunderscore u");("ctp\textunderscore eqc\textunderscore u";"ctp";"tp\textunderscore eqc\textunderscore u");(" rte\textunderscore fx\textunderscore a";"rte";"tp\textunderscore fx\textunderscore a");("rte\textunderscore eqc\textunderscore a";"rte";"tp\textunderscore eqc\textunderscore  a");("rte\textunderscore fx\textunderscore e";"rte";"tp\textunderscore fx\textunderscore e");("rte\textunderscore eqc\textunderscore e";"rte";"t p\textunderscore eqc\textunderscore e");("rte\textunderscore fx\textunderscore u";"rte";"tp\textunderscore fx\textunderscore u");("rte\textunderscore eqc\textunderscore u";"r te";"tp\textunderscore eqc\textunderscore u");("rdb\textunderscore fx\textunderscore a";"rdb";"rte\textunderscore fx\textunderscore a|gw\textunderscore fx\textunderscore a|gw \textunderscore gf");("rdb\textunderscore eqc\textunderscore a";"rdb";"rte\textunderscore eqc\textunderscore a|gw\textunderscore eqc\textunderscore a|gw\textunderscore ge");( "rdb\textunderscore fx\textunderscore e";"rdb";"rte\textunderscore fx\textunderscore e|gw\textunderscore fx\textunderscore e|gw\textunderscore gf");("rdb\textunderscore eqc\textunderscore e ";"rdb";"rte\textunderscore eqc\textunderscore e|gw\textunderscore eqc\textunderscore e|gw\textunderscore ge");("rdb\textunderscore fx\textunderscore u";"rdb"; "rte\textunderscore fx\textunderscore u|gw\textunderscore fx\textunderscore u|gw\textunderscore gf");("rdb\textunderscore eqc\textunderscore u";"rdb";"rte\textunderscore eqc\textunderscore  u|gw\textunderscore eqc\textunderscore u|gw\textunderscore ge");("hdb1\textunderscore fx\textunderscore a";"hdb1";"gw\textunderscore gf");("hdb1 \textunderscore eqc\textunderscore a";"hdb1";"gw\textunderscore ge");("hdb1\textunderscore fx\textunderscore e";"hdb1";"gw\textunderscore gf");( "hdb1\textunderscore eqc\textunderscore e";"hdb1";"gw\textunderscore ge");("hdb1\textunderscore fx\textunderscore u";"hdb1";"gw\textunderscore g f");("hdb1\textunderscore eqc\textunderscore u";"hdb1";"gw\textunderscore ge");("hdb\textunderscore fx\textunderscore a";"hdb";"g w\textunderscore fx\textunderscore a");("hdb\textunderscore eqc\textunderscore a";"hdb";"gw\textunderscore eqc\textunderscore a");("hdb\textunderscore fx\textunderscore e";"h db";"gw\textunderscore fx\textunderscore e");("hdb\textunderscore eqc\textunderscore e";"hdb";"gw\textunderscore eqc\textunderscore e");("hdb\textunderscore fx \textunderscore u";"hdb";"gw\textunderscore fx\textunderscore u");("hdb\textunderscore eqc\textunderscore u";"hdb";"gw\textunderscore eqc\textunderscore u");(" gw\textunderscore fx\textunderscore a";"gw";"");("gw\textunderscore eqc\textunderscore a";"gw";"");("gw\textunderscore fx\textunderscore e";"gw" ;"");("gw\textunderscore eqc\textunderscore e";"gw";"");("gw\textunderscore fx\textunderscore u";"gw";"");("gw\textunderscore eqc \textunderscore u";"gw";"");("gw\textunderscore ge";"gw";"");("gw\textunderscore gf";"gw";"");("fh\textunderscore  lse";"fh";"tp\textunderscore eqc\textunderscore e");("fh\textunderscore nyse";"fh";"tp\textunderscore eqc\textunderscore u");("fh \textunderscore nse";"fh";"tp\textunderscore eqc\textunderscore u");("fh\textunderscore ret";"fh";"tp\textunderscore fx\textunderscore u");("fh\textunderscore  ebs";"fh";"tp\textunderscore fx\textunderscore e");("fh\textunderscore int";"fh";"tp\textunderscore fx\textunderscore u");("c1e"; "c";"ctp\textunderscore eqc\textunderscore e|gw\textunderscore ge");("c2e";"c";"ctp\textunderscore eqc\textunderscore e");("c3e"; "c";"ctp\textunderscore eqc\textunderscore u");("c4e";"c";"ctp\textunderscore eqc\textunderscore u");("c5e";"c";"g w\textunderscore gf");("d1e";"d";"ctp\textunderscore eqc\textunderscore e");("c1f";"c";"ctp\textunderscore fx\textunderscore e"); ("c2f";"c";"ctp\textunderscore fx\textunderscore e");("c3f";"c";"gw\textunderscore gf");("c4f";"c"; "gw\textunderscore ge");("c5f";"c";"ctp\textunderscore fx\textunderscore a");("d1f";"d";"ctp\textunderscore fx\textunderscore e") ;("gw\textunderscore ca";"gw";"gw\textunderscore gf|gw\textunderscore ge")); .sim.prcs:delete from .sim.prcsall where null target;\par
.sim.conMap:()!(); resetVars:\{show "reset called";.sim.cnt:count .sim.prcs;.sim.pubNodes:()\}; newPrc:\{[prc] h:hopen 5555 ;.sim.conMap  {\ref [prc`prc]} \begin{figure}[htbp]
\noindent\textbf{}\includegraphics[]{image-2.png}
\caption{\label{fig_0}}\end{figure}
 \begin{figure}[htbp]
\noindent\textbf{1}\includegraphics[]{image-3.png}
\caption{\label{fig_1}Fig. 1 :}\end{figure}
    			\footnote{© 2018 Global Journals 1} 		 		\backmatter  			 \par
Appendix below contains the complete implementation of the example in q, JavaScript and HTML. The example needs Kdb+ 3.0 or above.   {\ref (`addprc ;prc); `.pm.prclist upsert (.z.w;prc`prc;prc`grp)};\par
.ps.pub (`add\textunderscore prc\textunderscore event ;prc) \}; addcon :\{[con] .log.info(`addcon ;con); `.pm.conlist upsert  {\ref (.z.w;con`prc;con`target)} 			 			  				\begin{bibitemlist}{1}
\bibitem[ References Références Referencias]{b4}\label{b4} 	 		\textit{},  		 \url{https://linkurio.us/blog/panama-papers-how-linkurious-enables-icij-to-investigate-the-massive-mossack-fonseca-leaks/2.D3.jshttps://d3js.org/3.https://kx.com/solutions/}  	 	 		\textit{References Références Referencias}  		1.  	 
\bibitem[enter() .append("svg:marker") .attr("id svg:defs").selectAll("marker") .data]{b2}\label{b2} 	 		‘enter() .append("svg:marker") .attr("id’.  	 	 		\textit{svg:defs").selectAll("marker") .data},  				 	 	 (var arrows = svg.append. String).attr("viewBox", "0 -5 10 10") .attr("refX", 10).attr("refY", -1) .attr("markerWidth", 4).attr("markerHeight", 4) .attr("orient", "auto").append("svg:path").attr("d", "M0,-5L10,0L0,5")) 
\bibitem[links(nLinks).linkDistance(50).charge(-200) .on("tick]{b0}\label{b0} 	 		\textit{links(nLinks).linkDistance(50).charge(-200) .on("tick},  		 	 	 (tick) 
\bibitem[rect").attr("width", sWidth).attr("height]{b3}\label{b3} 	 		\textit{rect").attr("width", sWidth).attr("height},  		 	 	 (sHeight) 
\bibitem[var svg = d3.select("body").append("svg").attr("width", sWidth).attr("height]{b1}\label{b1} 	 		\textit{var svg = d3.select("body").append("svg").attr("width", sWidth).attr("height},  		 	 	 (sHeight) 
\end{bibitemlist}
 			 		 	 
\end{document}
