Uka Tarsadia University

Diploma
Semester VI

DATA VISUALIZATION
(CEXXXX)

EFFECTIVE FROM July-2021

Syllabus version: 1.00
 Teaching Scheme
Subject
Subject Title Hours Credits
Code
Theory Practical Theory Practical
CEXXXX Data Visualization 3 2 3 1

Theory Practical
Subject Examination Marks Examination Marks Total
Subject Title
Code Marks
Internal External Internal External
CEXXXX Data Visualization 40 60 20 30 150

Objectives of the course:

● To introduce the fundamentals of data visualization.
● To understand the techniques of data visualization.
● To elaborate the tools to implement data visualization.

Course Outcomes:
Upon completion of the course, the student will be able to:
CO1: Describe the concept of data visualization.
CO2: Represent the data in the form of tables.
CO3: Demonstrate the data in form of charts.
CO4: Use SVG to implement data visualization.
CO5: Handle data and data visualizations in a manner that demonstrates an
understanding of data using D3 technique.
CO6: Understand the concept and types of balancing along with analytical and
numerical analysis. The student also gets to know about detailed knowledge of
vibrations.

Sr. No. Topics Hours

Unit – I
1 Introduction to Data Visualization: 6
Acquiring and Visualizing Data, Simultaneous acquisition and
visualization, Applications of Data Visualization, Keys factors of
Data Visualization (Control of Presentation, Faster and Better
JavaScript processing, Rise of HTML5, Lowering the
implementation Bar)
Exploring the Visual Data Spectrum: charting Primitives (Data
Points, Line Charts, Bar Charts, Pie Charts, Area Charts),
Exploring advanced Visualizations (Candlestick Charts, Bubble
Charts, Surface Charts, Map Charts, Infographics).
Unit – II
2 Basics of Data Visualization - Tables: 8
Reading Data from Standard text files (.txt, .csv, XML), Displaying
JSON content, Outputting Basic Table Data (a table, Using
Semantic Table, Configuring the columns), Assuring Maximum
readability (Styling your table, Increasing readability, Adding
dynamic Highlighting), Including computations, Using data tables
library, relating data table to a chart
Unit – III
 3 Visualizing data Programmatically: 6
Creating HTML5 CANVAS Charts (HTML5 Canvas basics, Linear
interpolations, A simple column Chart, Adding animations),
Starting with Google charts (Google Charts API Basics, A Basic bar
chart, A basic Pie chart, Working with Chart Animations).
Unit – IV
4 Scalable Vector Graphics: 9
Introduction to SVG, Circles, Rectangles, Rounded rectangles,
Ellipses, Polygons, Lines, Paths in SVG, Inspecting SVG in the Web
Inspector, Styling SVG Elements with CSS, SVG Text, SVG Style
Properties, Drawing Order and Groups, Transformations,
Building a Bar Chart in SVG
Unit – V
5 Introduction to D3.js: 8
Getting setup with D3, Making selections, changing selection’s
attribute (attr()), D3 strives to be declarative, Changing methods,
appending new elements, Selecting multiple elements with
d3.selectall(), Building Bar charts with selections
Data-joins:
Conceptual overview of data joins, Enter and binding data, using a
data join to make a Bar chart, Using anonymous functions to
access bound data, finishing the rest of chart, storing data in
objects
Sizing charts and Axes:
Linear scales, Using smart margin conventions, adding axes,
Ordinal scales and axes
Unit – VI
6 Loading and filtering External data: 8
Building a graphic that uses all of the population distribution
data, Data formats you can use with D3, Creating a server to
upload your data, D3’s function for loading data, Dealing with
Asynchronous requests, Loading and formatting Large Data Sets.
Advance concept:
Google Map, Dashboard, Timeline

Sr. No. Data Visualization (Practical) Hours

1 Setup Environment for Tools: HTML5(Canvas and SVG tags), D3.js, 4
Google API, Canvas.js
2 Develop the following Program Using HTML5 CANVAS and SVG 4
TAG:
a) Develop the Different basic Graphical Shapes using HTM5
CANVAS
b) Develop the Different Advanced Graphical Shapes using HTM5
CANVAS
c) Develop the Different basic Graphical Shapes using HTM5 SVG
d) Develop the Different Advanced Graphical Shapes using HTM5
SVG
 3 Develop Following Program Using HTML5 and JavaScript: 2
a)Develop the simple bar chart usingTML5 CANVAS
b) Read the data .txt file and draw Data Table
c) Read the data .txt file and draw Simple Bar Chart
d) Read the data .csv file and draw Data Table
e) Read the data .csv file and draw Column Bar Chart
4 Develop Following Program Using HTML5 and JavaScript: 4
a) Read the data XML file and draw Data Table
b) Read the data XML file and draw Simple Chart
5 Develop Following Program Using HTML5 and JavaScript: 4
a) Read JSON Data and draw Data Table
b) Read JSON Data and draw Simple Chart
6 Develop Following Program Using HTML5, D3.js and Canvas.js 6
a) Showing the data as a column chart (simple)
b) Showing the data as a stacked column chart
c) Showing the Data as a column chart for four age group
d) Showing the data as a Line chart (single, fewer and multiple
lines)
e) Showing the data as a Pie Chart (single and multiple pie)
f) Showing the data as a Bar Chart (Simple and multiple)
7 Develop Following Program Using HTML5, Google Chats API and 6
Map API
a) Using Google Charts API Basics draw charts like a Bar chart
b) Using Google Charts API Basics draw charts like a Line chart
c) Using Google Charts API Basics drawPieChart.
d) Using Google Charts API Basics draw Donut Chart.
e) Using Google Charts API Basics draw Candle Chart.
f) Using Google Charts API Basics draw other types of Chart.
8 Using Google API read JSON file and create Google Map. 6

Text book:
1. S. Y. Ragadia Jon Raasch, Graham Murray, Vadim Ogievetsky, Joseph Lowery,
“JavaScript and jQuery for Data Analysis and Visualization”, WROX
Reference books:

1. Ritchie S. King,” Visual storytelling with D3” ,Pearson

2. Amelia Wattenberge, “Fullstack D3 and Data Visualization”, Fullstack.IO

Course objectives and Course outcomes mapping:

 To introduce the fundamentals of data visualization: CO1, CO2, CO3
 To understand the techniques of data visualization: CO4, CO5
 To elaborate the tools to implement data visualization: CO6
Course units and Course outcome mapping:

Unit Course Outcomes

Unit Name
No. CO1 CO2 CO3 CO4 CO5 CO6
1 Introduction to Data Visualization & √
Exploring the Visual Data Spectrum
2 Basics of Data Visualization - Tables √
3 Visualizing data Programmatically √
4 Scalable Vector Graphics √
5 Introduction to D3.js, Data-joins & √
Sizing charts and Axes
6 Loading and filtering External data & √
Advance concept

Programme Outcomes:
PO 1: Basic and Discipline specific knowledge: Apply knowledge of basic
mathematics, science and engineering fundamentals and engineering specialization to
solve the engineering problems.
PO 2: Problem analysis: Identify and analyse well-defined engineering problems
using codified standard methods.
PO 3: Design/ development of solutions: Design solutions for well-defined technical
problems and assist with the design of systems components or processes to meet
specified needs.
PO 4: Engineering Tools, Experimentation and Testing: Apply modern engineering
tools and appropriate technique to conduct standard tests and measurements.
PO 5: Engineering practices for society, sustainability and environment: Apply
appropriate technology in context of society, sustainability, environment and ethical
practices.
PO 6: Project Management: Use engineering management principles individually, as
a team member or a leader to manage projects and effectively communicate about well-
defined engineering activities.
PO 7: Life-long learning: Ability to analyse individual needs and engage in updating
in the context of technological changes.

Programme Outcomes and Course Outcomes mapping:

Programme Course Outcomes
Outcomes CO1 CO2 CO3 CO4 CO5 CO6
PO1 √
PO2
PO3 √ √
PO4 √ √
PO5 √
PO6 √
PO7 √