D3JS Data Visualization: Technical Details, Advantages & Analysis

This report delves into the technical aspects of data visualization using D3.js (Data-Driven Documents), a JavaScript library for creating interactive and dynamic data visualizations. It discusses how D3.js binds arbitrary data to the Document Object Model (DOM) and applies data-driven transformations. The report covers key features like selections, dynamic properties, enter and exit functionalities, transformations, and transitions. It also explores the advantages of D3.js, such as its open-source nature, flexibility, dynamic capabilities, and capacity to handle large datasets, alongside its disadvantages, including browser compatibility issues and limitations in data concealment and pre-determined visualizations. A literature review highlights the importance of D3.js for web-based data visualization. The report presents a case study using 2016 Olympics data to visualize gold medal distribution, demonstrating D3.js implementation and findings. The code used for generating the SVG file and plotting the data with nationality as a series is included. The report concludes by summarizing the functionalities and applications of D3.js in data visualization.

Running head: DATA VISUALIZATION
Data Visualization Using D3JS
Name of the Student
Name of the University

1DATA VISUALIZATION
Table of Contents
Data Visualization Technical Details: 2
Advantages and Disadvantages of D3.js: 3
Literature Review 5
Result and Findings: 6
Bibliography: 8

2DATA VISUALIZATION
Data Visualization Technical Details:
Data visualisation defines data in a graphical form, and it helps the decision makers to
develop a pattern of data. D3.js or Data Driven Documents is a Javascript Library that is used to
develop interactive as well as dynamic data visualisations. D3.js enables users to bind arbitrary
data to a Document Object Model (DOM). D3.js applies data-driven transformations to the
document. A user can generate HTML table from the array of numbers with the assistance D3.js.
D3.js solves the problem’s crux. It provides an effective manipulation of documents by data.
D3.js thus avoids proprietary representation and caters flexibility. One can get the full
functionalities of web standard such as CSS, HTML and SVG. It requires minimal overhead.
Also, D3.js is relatively fast and can support large datasets. D3.js technology supports dynamic
behaviours for animations well as interaction. The functional style of D3 enables the code reuse
through a collection of community-developed modules as well as official modules.
Selections: D3.js can be used as to modify the documents by using the W3C DOM API.
The method names used are verbose. D3.js takes the declarative approach and works on an set of
nodes known as selections. W3C Selectors API defines the selectors, and nearly all the modern
browsers support the selectors. The D3.js elements can be selected utilising the predicates; the
predicates involve ID, containment, attribute values and class.
D3.js caters various methods for the nodes mutation. D3.js is used to set attributes or
styles. The D3.js is useful to register event listeners. D3.js can prove to be useful for adding and
removing nodes. The nodes can also be sorted with the help of D3.js. The text content, as well as
the HTML code, can be changed with the help of D3.js.

3DATA VISUALIZATION
Dynamic Properties: D3.js has some similarities with jQuery. The d3.geoPath function
provides functionalities like the conversion of geographic coordinates to SVG path data. D3.js
comes with reusable functions and function factories like graphical primitives for the line, area
and pie charts.
Enter and Exit: The user can create new nodes for the arriving data. D3.js can be used to
remove the outgoing nodes that are obsolete.
Transformation: D3.js does not use a new visual representation. D3.js’s graphical marks
come directly from the web standards CSS, HTML and SVG. A user can develop SVG elements
using the technology of D3.js and style them with the external stylesheets. The user can use the
filter effects, dashed strokes as well as the clipping. The user will not require any new toolkit to
use if the browser vendors update themselves and introduce new features.
Transitions: D3.js’s interpolators support primitives like numbers and the numbers
within the string. The user can be able to extend D3.js interpolators registry to support the data
structures as well as the complex properties.
Advantages and Disadvantages of D3.js:
D3.js is open source library, and it enables the users to integrate user’s code to the code
samples that are already present within the framework. Thus the users can be able to create their
diagrams with the already prevalent charting library. D3.js provides a platform with unique
charts. The users can be able to develop their charts with already existing codes that are available
within the framework library. The d3.js framework is relatively very easy to use for all the
functions. D3.js provides certain functionalities like –

4DATA VISUALIZATION
Free and Open Source- D3.js integrates with the large dataset of examples and
documentation of functions as well as codes.
Flexible platform- D3.js is flexible, and it can work flawlessly with the prevalent web
technologies. It helps to make any modifications within the DOM. Thus D3.js provides similar
kinds of flexibility offered by SVG, HTML and CSS.
Highly dynamic- D3.js is highly dynamic; it works relatively fast and responsive. D3.js is
dynamic as well as interactive at the same time. The D3.js facilitates the users to explore data by
own using skills and creativity. The functionality of DOM is dynamic, the users can be able to
add classes or can remove classes and the IDs at any time the user wants.
Capacity to handle a large volume of data- D3.js is relatively better compared to the other
frameworks. D3.js provides facility to the users to manage large chunks of data very easily
freeing up both resources as well as time.
Aids in writing custom code- There are several customisation options available for D3.js.
The users or the coders can build custom codes. Thus, D3.js provides the platform and freedom
to the coders so that the coders can experiment and can develop custom code.
Rich Array of plugins- D3.js has a huge plugin collection. The coders have the liberty to
use those plugins instead of using the proprietary software’s plugin.
Re-usable code- D3.js has a functional style, and D3.js comes with diverse components
and plugins collection, and it helps the coders or the users to reuse the code.
D3.js has several properties like selections, transitions, enter and exit, and data binding.

5DATA VISUALIZATION
Besides having several advantages, D3.js also have several disadvantages-
D3.js does not support the old browsers. The developers will have to build a static
placeholder so that all the users can view the browsers and the contents of the browsers. If the
static placeholder is not used then, the content on the browsers will not be visible to all the users.
D3.js also have data-source imitations. Also, D3.js cannot conceal authentic data. If the
users do not want to disclose any data, then it can prove to be challenging for the users to use the
D3.js framework or the technology.
D3.js cannot generate predetermined visualisations; it is time-consuming the generate the
D3.js visualisations, one can generate the visualisations with the help of quick chart relatively
fast compared to D3.js.
Literature Review
It is nearly impossible to visualise large dataset on the web without installing any apps.
For this reason, they must use D3.js. The users can be able to develop custom visualisations with
the aid of the D3.js. D3.js is web based visualisation library which provides a plethora of APIs to
manage the heavy lifting of creating advanced, dynamic and visualisation content online. The
users can be able to build own diagrams with the prevalent charting library. The gallery contains
the unique charts and D3.js gives the opportunity to the users to develop charts on their own
using the codes that are available in the D3.js framework library. D3.js offers several facilities.
D3.js is open source and free to use. It offers flexibility, and it is highly dynamic. D3.js can
handle large volumes of data, helps coders to write custom codes.

6DATA VISUALIZATION
Result and Findings:
The proposed web application has used the data sets of the athletics of the 2016 Olympics
in Rio de Janeiro. The application shows the distribution of gold medals between various
countries.
The fraction of the data set has presented in below.
id name
nationa
lity sex dob
heig
ht
weig
ht sport
gol
d
silv
er
bron
ze
736041
664 A Jesus Garcia ESP male
10/17/1
969 1.72 64
athletic
s 0 0 0
532037
425 A Lam Shin KOR
fema
le
9/23/19
86 1.68 56 fencing 0 0 0
435962
603 Aaron Brown CAN male
5/27/19
92 1.98 79
athletic
s 0 0 1
521041
435 Aaron Cook MDA male
1/2/199
1 1.83 80
taekwo
ndo 0 0 0
339225
79 Aaron Gate NZL male
11/26/1
990 1.81 71 cycling 0 0 0
173071
782 Aaron Royle AUS male
1/26/19
90 1.8 67
triathlo
n 0 0 0
266237
702 Aaron Russell USA male
6/4/199
3 2.05 98
volleyba
ll 0 0 1
382571
888 Aaron Younger AUS male
9/25/19
91 1.93 100 aquatics 0 0 0
876897
76
Aauri Lorena
Bokesa ESP
fema
le
12/14/1
988 1.8 62
athletic
s 0 0 0
997877
719
Ababel
Yeshaneh ETH
fema
le
7/22/19
91 1.65 54
athletic
s 0 0 0
343694
681 Abadi Hadis ETH male
11/6/19
97 1.7 63
athletic
s 0 0 0
591319
906
Abbas Abubakar
Abbas BRN male
5/17/19
96 1.75 66
athletic
s 0 0 0
258556
239 Abbas Qali IOA male
10/11/1
992 aquatics 0 0 0
Total 11538 rows have been used within the data set.
var svg = dimple.newSvg("#chartContainer",600,410);

7DATA VISUALIZATION
The above code is used for generating the SVG file with specific size.
chart.addSeries("nationality",dimple.plot.bar);
The above code is used for plotting, with nationality as series.
Figure 1: The Visualization Using D3js Method
(Source: Created by Author)
It has been found that the Chrome is not able to collect data form external source. That is
why the visualization app has been opened in the firefox. The graph shows total amount of gold
for a specific sport.

8DATA VISUALIZATION
Bibliography:
Bryant, N. and Wildfire, J., 2016. Webcharts–A Web-based Charting Library for Custom
Interactive Data Visualization. Journal of Open Research Software, 4(1).
Castillo, P.N., 2014. Mastering D3. js. Packt Publishing Ltd.
David, A. and Tauro, C.J., 2015. Web 3D data visualization of spatio temporal data using data
driven document (D3js). International Journal of Computer Applications, 111(4).
Friend, S., 2015. Visualizing Relationships between Related Variables: Improving Physics
Education through D3. js Network Visualizations.
Gibbs, C., Hernandez, M. and Sennyey, P., 2017. Adopting a distributed model for data services.
Code4Lib Journal, 35.
Hanson, B.A. and Seeger, C.J., 2016. D3. js: Introduction to Mapping.
Heydt, M., 2015. D3. js by example. Packt Publishing Ltd.
Kreft, Ł., Botzki, A., Coppens, F., Vandepoele, K. and Van Bel, M., 2017. PhyD3: a
phylogenetic tree viewer with extended phyloXML support for functional genomics data
visualization. Bioinformatics, 33(18), pp.2946-2947.
Kromer, L., Wagner, M., Blumenstein, K., Rind, A. and Aigner, W., 2016. Performance
Comparison between Unity and D3. js for Cross-Platform Visualization on Mobile Devices. In
Proceedings of the Forum Media Technology (pp. 47-52).

9DATA VISUALIZATION
Mattingly, W.A., Kelley, R.R., Chariker, J.H., Weimken, T. and Ramirez, J., 2015. An iterative
workflow for creating biomedical visualizations using Inkscape and D3. js. BMC bioinformatics,
16(15), p.P10.
Morales, A.F., 2016. Enriching the statistics learning experience with D3. js interactive
animations: Insurance applications of Markov chains. IJERI: International Journal of Educational
Research and Innovation, (7), pp.25-37.
Ono, K., Demchak, B. and Ideker, T., 2014. Cytoscape tools for the web age: D3. js and
Cytoscape. js exporters. F1000Research, 3.
Strode, G., Thornton, B., Mesev, V. and Johnson, N., 2016. Bivariate Statistical Legends:
Mapping Examples on Florida Covariance Data using Scatterplots from Open Source Visual
Analytic Tools. The Florida Geographer, 47.
Woodward, K., 2017. Visualizing Cyclic Datasets: Circular Streamgraphs Using D3. js.