DEGREE ENGINEERING(COMPUTER)

Branch: COMPUTER ENGINEERING Sem: 6th (3rd Year)

Subject Name: DATA VISUALIZATION Subject Code: 3160717

Question Bank

Chapter-1: Introduction to Data Visualization:

1. Explain about Acquiring and Visualizing Data. (Answer is in Ebook-1 & Page-16)
2. Explain in detail about the Applications of Data Visualization. (Page-19)
3. Explain about any two Keys factors of Data Visualization. (Page-24)
4. Explain about any two charting Primitives for Exploring the Visual Data Spectrum. OR
Write about following charting Primitives: 1) Data Points, 2) Bar Charts OR
Write about following charting Primitives: 1) Pie Charts, 2) Area Charts. (Page-44)
5. Explain in detail about Candlestick Charts & Bubble Charts. (Page-63)
6. Explain in detail about Surface Charts & Map Charts. (Page-66)
7. What is Infographics? Explain in detail. (Page-70)
8. Write short note about Making use of HTML5 CANVAS. (Page-72)
9. Explain about Integrating SVG in details. (Page-77)
Chapter-2: Basics of Data Visualization – Tables:
10. How to Read the Data from Standard text files such as .txt, XML file? (Page-82)
11. Explain about Displaying JSON Content. (Page-92)
12. Explain about Reading JSON Data. (Page-93)
13. How to Build a basic table? What is Semantic Table Markup? (Page-123)
14. What are the important points for Maximum readability of the Table? (Page-136)
15. Explain about Styling your data table for better data visualization. (Page-137)
16. Explain in details about Adding dynamic Highlighting in data tables. (Page-148)
17. How to include computations(Calculations) in the data tables? (Page-151)
18. Explain about relating data table to a chart in details. (Page-170)
Chapter-3: Visualizing data Programmatically:
19. Write a short note on HTML5 Canvas basics. (Page-197)
20. How to draw A Simple Column Chart using Google charts API? (Page-200)
21. Explain about adding Animation to your Canvas chart. (Page-227)
22. Write the code for A Basic bar chart using Google Charts API Basics. (Page-240)
23. Write the code for A Basic Pie chart using Google Charts API Basics. (Page-243)
24. Write the code for how to work with Chart Animations using Google Charts API Basics.
(Page-245)
Chapter-4: Introduction to D3.js:
25. What is D3.js? Explain about it in details.
26. Explain about Making selections, changing selection’s attribute in D3.js.
27. How to Load and filter External data in D3.js?
28. Write the steps for Building a graphic that uses all of the population distribution data in
D3.js.
29. Which Data formats you can use with D3? Explain about Creating a server to upload
your data.
30. How to Deal with Asynchronous requests in D3.js?
 DEGREE ENGINEERING(COMPUTER)

31. Explain about Loading and formatting Large Data Sets in D3.js.
Chapter-5:Advanced Data Visualization:
32. Explain about Data joins, updates and exits in Data charts.
33. How to Update the charts?
34. Explain about Adding transactions using keys in data charts.
35. How to add a Play Button in your data charts for Animation? & Explain about Making the
Play button go.
36. How to Allow the user to interrupt the play sequence in an Animation?
Chapter-6: Information Dashboard Design:
37. Explain about Dashboard design issues & assessment of needs.
38. Explain about visual perception, Achieving eloquence for Considerations for designing
dashboard.
39. What are the Advantages of Graphics?
40. Explain about Designing Bullet Graphs.
41. How to Design Sparklines in Information Dashboard?
42. Explain about Dashboard Display Media in details.
43. What are the Critical Design Practices? Explain in details.
44. What are the benefits of Putting all Design principals together in Information Dashboard
Design?

Find the reference books for DATA VISUALIZATION (3160717) subject on below link.

https://oopjuniversity.blogspot.com/2021/03/data-visualization-3160717-gtu.html

Subject Teacher H.O.D.

 GUJARAT TECHNOLOGICAL UNIVERSITY
Bachelor of Engineering
Subject Code: 3160717
DATA VISUALIZATION
6th SEMESTER

Type of course: Under graduate (Open Elective)

Prerequisite: Working knowledge of Programming Language, DBMS, JavaScript and HTML5

Rationale: NA

Teaching and Examination Scheme:

Teaching Scheme Credits Examination Marks Total
L T P C Theory Marks Practical Marks Marks
ESE (E) PA (M) ESE (V) PA (I)
2 0 2 3 70 30 30 20 150

Content:

Sr. Content Total %

No. Hrs. Weightage
Introduction to Data Visualization:
1 Acquiring and Visualizing Data, Simultaneous acquisition and visualization, 3 10
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). Making use of
HTML5 CANVAS, Integrating SVG
Basics of Data Visualization – Tables: 5 15
Reading Data from Standard text files ( .txt, .csv, XML), Displaying JSON
2 content Outputting Basic Table Data (Building 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
Visualizing data Programmatically: 5 25
3 Creating HTML5 CANVAS Charts (HTML5 Canvas basics, Linear
interpolations, A Simple Column Chart, Animations), Starting with Google
charts (Google Charts API Basics, A Basic bar chart, A basic Pie chart,
Working with Chart Animations).
Introduction to D3.js: 5 15
4 Getting setup with D3, Making selections, changing selection’s attribute,
Loading and filtering External data : 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
Advanced Data Visualization: 4 15
5 Making charts interactive and Animated:
Data joins, updates and exits, interactive buttons, Updating charts, Adding
transactions, using keys
Adding a Play Button:

Page 1 of 3
w.e.f. AY 2018-19
 GUJARAT TECHNOLOGICAL UNIVERSITY
Bachelor of Engineering
Subject Code: 3160717
wrapping the update phase in a function, Adding a Play button to the page,
Making the Play button go, Allow the user to interrupt the play, sequence
6 Information Dashboard Design: 6 20
Introduction, Dashboard design issues and assessment of needs,
Considerations for designing dashboard-visual perception, Achieving
eloquence, Advantages of Graphics _Library of Graphs, Designing Bullet
Graphs, Designing Sparklines, Dashboard Display Media, Critical Design
Practices, Putting it all together - Unveiling the dashboard.

Suggested Specification table with Marks (Theory):

Distribution of Theory Marks

R Level U Level A Level N Level E Level C Level

15 20 20 5 5 5
Legends: R: Remembrance; U: Understanding; A: Application, N: Analyze and E: Evaluate C:
Create and above Levels (Revised Bloom’s Taxonomy)

Note: This specification table shall be treated as a general guideline for students and teachers. The
actual distribution of marks in the question paper may vary slightly from above table.

Reference Books:

1. Jon Raasch, Graham Murray, Vadim Ogievetsky, Joseph Lowery, “JavaScript and jQuery for Data
Analysis and Visualization”, WROX
2. Ritchie S. King, Visual story telling with D3” Pearson
3. Ben Fry, "Visualizing data: Exploring and explaining data with the processing environment",
O'Reilly, 2008.
4. A Julie Steele and Noah Iliinsky, Designing Data Visualizations: Representing Informational
Relationships, O’Relly
5. Andy Kirk, Data Visualization: A Successful Design Process, PAKT
6. Scott Murray, Interactive Data Visualization for Web, O’Relly
7. Nathan Yau, "Data Points: Visualization that means something", Wiley, 2013.
8. Tamara Munzner, Visualization Analysis and Design, AK Peters Visualization Series, CRC Press,
Nov. 2014

Course Outcome: After learning the course the students will be able to:

Sr. No. CO statement Marks % weightage

CO-1 Explore various data visualization techniques in order to provide new 20
insight.
CO-2 Apply appropriate data visualization techniques to provide 35
trends/insights for the given dataset.
CO-3 Apply visualization tools / techniques for various data analysis tasks. 30
CO-4 Given the application context for given data set, Design the 15
information Dashboard for access information based on user criteria.

Page 2 of 3
w.e.f. AY 2018-19
 GUJARAT TECHNOLOGICAL UNIVERSITY
Bachelor of Engineering
Subject Code: 3160717
List of Experiments:

1. Setup Environment for All the Tools

2. Develop the following Program Using HTML5 CANVAS and SVG 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
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
f. Read the data XML file and draw Data Table
g. Read the data XML file and draw Simple Chart
h. Read JSON Data and draw Data Table
i. Read JSON Data and draw Simple Chart
4. Develop Following Program Using HTML5 and D3.js and Canvas.js
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)
5. Develop Following Program Using HTML5 and Google Chats API and 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 draw PieChart.
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.
g. Using Google API read JSON file and create Google Map.
6. Build interconnected Dashboard using

List of Open Source Software/learning website:

 HTML5 (Canvas and SVG tags)

 D3.js (https://d3js.org/), Canvas.js
 Google API

Page 3 of 3
w.e.f. AY 2018-19
Seat No.: ________ Enrolment No.___________

GUJARAT TECHNOLOGICAL UNIVERSITY

BE - SEMESTER–VI (NEW) EXAMINATION – SUMMER 2022
Subject Code:3160717 Date:06/06/2022
Subject Name:Data Visualization
Time:10:30 AM TO 01:00 PM Total Marks: 70
Instructions:
1. Attempt all questions.
2. Make suitable assumptions wherever necessary.
3. Figures to the right indicate full marks.
4. Simple and non-programmable scientific calculators are allowed.

Q.1 (a) Define following Term : Visualization, Filtering, Axes 03

(b) Differentiate following: 04
1) Canvas and SVG
2) Linear Scale and Ordinal Scale
(c) How to work with Google API? Give an example of pie chart in 07
Google API

Q.2 (a) What is XSLT? Explain with example. 03

(b) Write a code to read CSV file and display its content on the browser 04
(c) Define Document Object Model (DOM). Write a code to Read a 07
XML file and display its content on the browser.
OR
(c) Define DTD, Explain XML syntax with example. 07

Q.3 (a) Define Data binding. What is the use of text( ). 03

(b) What is the Transaction? How to apply Transaction? 04
(c) Explain bar chart, pie chart, line chart, bubble chart with example. 07
OR
Q.3 (a) Differentiate between .xml file and .csv file 03
(b) How to read JSON file? Explain with example. 04
(c) Explain Data points and XY chart with example 07

Q.4 (a) How to use selection in D3.js? 03

(b) Explain select and append command in D3.js with example 04
(c) Explain data-joins in D3.js with example. 07
OR
Q.4 (a) Describe the changing method of D3.js with example. 03
(b) Explain Select all and exit command in D3.js with example. 04
(c) Explain Various Functions in D3.js 07

Q.5 (a) Explain syntax of polygon and poly points in canvas with example. 03
(b) How to make interactive button? Explain with example. 04
(c) Explain Dashboard with example. 07
OR
Q.5 (a) Differentiate between Linear Scale and Ordinal Scale. 03
(b) How to add Play button to the page? Explain with example. 04
(c) What are the key Factors of Data Visualization? 07

*************

1
 Seat No.: ________ Enrolment No.___________

GUJARAT TECHNOLOGICAL UNIVERSITY

BE - SEMESTER–VI (NEW) EXAMINATION – SUMMER 2023
Subject Code:3160717 Date:10-07-2023
Subject Name:Data Visualization
Time:10:30 AM TO 01:00 PM Total Marks:70
Instructions:
1. Attempt all questions.
2. Make suitable assumptions wherever necessary.
3. Figures to the right indicate full marks.
4. Simple and non-programmable scientific calculators are allowed.
MARKS
Q.1 (a) Define: (1) Data Point (2) Scale (3) Infographics 03
(b) Discuss the real applications of data visualization in short. 04
(c) Write a code to display both Pie chart and Column chart using Google API in 07
single browser window.

Q.2 (a) Differentiate CSV Vs JSON files. 03

(b) Write down a code for reading and displaying csv file using 04
Jquery.
(c) Explain linear gradient and radial gradient of HTML5 Canvas with example. 07
OR
(c) Write down a code to display a typical Exam Schedule Time Table with CSS. 07

Q.3 (a) What is D3.js? Explain in short. 03

(b) Explain Candlestick Charts in short. 04
(c) Define Data Binding. Also explain different uses of append(), 07
text(), selectAll() (using class,id).
OR
Q.3 (a) Differentiate text file with XML file 03
(b) Write a suitable code to demonstrate dynamic highlighting. 04
(c) Write down a code to animate a Rectangle using Canvas API. 07

Q.4 (a) What is Data joins? Explain it in short. 03

(b) What is interactive button. Explain it in short. 04
(c) Write a code that uses the join() method to merge the two datasets and 07
create a new dataset that includes both the datasets.
OR
Q.4 (a) What is sequence w.r.t data visualization? 03
(b) Write down a code snippet that demonstrate transaction w.r.t data 04
visualization.
(c) Write a code snippet that adds a Play button to the page. 07

Q.5 (a) What is eloquence? Explain in short. 03

(b) How do you update charts ? Explain in short. 04
(c) What is information Dashboard? Create a sketch/wireframe of any 07
hypothetical Engineering College.
OR
Q.5 (a) What is Bullet graph? 03
(b) Explain Critical Design Practices w.r.t data visualization? 04
(c) What are different considerations associated with visual presentation of 07
information dashboard. Explain all in detail.
*************
1
Enrolment No./Seat No_____________

GUJARAT TECHNOLOGICAL UNIVERSITY

BE - SEMESTER–VI (NEW) EXAMINATION – SUMMER 2024
Subject Code:3160717 Date:20-05-2024
Subject Name:Data Visualization
Time:10:30 AM TO 01:00 PM Total Marks:70
Instructions:
1. Attempt all questions.
2. Make suitable assumptions wherever necessary.
3. Figures to the right indicate full marks.
4. Simple and non-programmable scientific calculators are allowed.

MARKS
Q.1 (a) What is Data visualization? How it is used in real time world? 03
(b) What are the keys factors for Data visualization? Explain in short. 04
(c) What is Google API? Explain how it can be used in data 07
visualization? Explain it with examples.

Q.2 (a) Differentiate: (1) Canvas Vs SVG (2) JSON Vs XML 03

(b) Write down a code for reading and displaying .txt file. 04
(c) How do you assure maximum readability? Explain it with example. 07
OR
(c) What is DOM? Write a code to read student XML file and display 07
on the browser.

Q.3 (a) What is Bar chart? Explain it in short. 03

(b) Explain Bubble Chart in short. 04
(c) What is Semantic table? Explain it with suitable example 07
OR
Q.3 (a) What is Pie chart? Explain it in short. 03
(b) Write down a code for reading and displaying JSON file. 04
(c) Write down code to display Line chart and Area chart. Explain it. 07

Q.4 (a) Write a short note: D3.js 03

(b) Explain Data join of D3.js with suitable example. 04
(c) Explain Various Functions of D3.js with example code. 07
OR
Q.4 (a) Write a short note: XML 03
(b) What is an Asynchronous request? How do you deal with it. 04
(c) Write a code snippet to demonstrate animation on the page. 07

Q.5 (a) What is Spark line? Explain in short. 03

(b) What is an interactive button? Explain with example. 04
(c) Draw an information dashboard of any hypothetical University. 07
OR
Q.5 (a) What is Information dashboard? 03
(b) What are advantages of Graphics library? 04
(c) Explain all issues related in designing Dashboard in detail. 07

*************

1
Seat No.: ________ Enrolment No.___________

GUJARAT TECHNOLOGICAL UNIVERSITY

BE - SEMESTER–VI(NEW) EXAMINATION – WINTER 2022
Subject Code:3160717 Date:15-12-2022
Subject Name:Data Visualization
Time:02:30 PM TO 05:00 PM Total Marks:70
Instructions:
1. Attempt all questions.
2. Make suitable assumptions wherever necessary.
3. Figures to the right indicate full marks.
4. Simple and non-programmable scientific calculators are allowed.

Q.1 (a) What is Acquiring and Visualizing Data? 03

(b) Describe Simultaneous acquisition and visualization. 04
(c) What is charting Primitives? List all types of Charts and explain Pie Chart 07
and Area Chart.

Q.2 (a) Define following terms: Candlestick Charts, Bubble Charts, and Surface 03
Charts.
(b) Why is HTML5 so important to data visualization? 04
(c) How to use the HTML5 canvas to render dynamic column charts? 07
OR
(c) How to use the Google Charts API to render a pie chart for sales data of 07
various electronic devices.

Q.3 (a) What is Infographics explain with example. 03

(b) How the HTML5 canvas differs from SVG graphics tools. 04
(c) List down installation setup steps of D3. 07
OR
Q.3 (a) How can we deal with Asynchronous requests? 03
(b) Explain CSS-style selectors with example. 04
(c) How to use the Google Charts API to animate a bar chart? 07

Q.4 (a) Which Data formats you can use with D3? 03
(b) Explain Data joins, interactive buttons with examples. 04
(c) Describe Loading and Filtering External Data in data visualization. 07
OR
Q.4 (a) Prepare column chart using the HTML5 canvas. 03
(b) Explain how you can allow the user to interrupt the play? 04
(c) Explain steps to create and upload data in D3. 07

Q.5 (a) Explain Scalable Vector Graphics. 03

(b) Develop Following Program Using HTML5 and Google Chats API and Map 04
API Using Google Charts API Basics draw charts like a Line chart
(c) Develop Following Program Using HTML5 and JavaScript 07
Read JSON Data and draw Data Table.
OR
Q.5 (a) Enlist Dashboard design issues in Data Visualization. 03
(b) Develop Following Program Using HTML5 and JavaScript 04
Read the data from XML file and draw Simple Chart
(c) Develop Following Program Using HTML5 and D3.js and Canvas.js 07
Showing the Data as a column chart for four age group.
************

1
Seat No.: ________ Enrolment No.___________

GUJARAT TECHNOLOGICAL UNIVERSITY

BE - SEMESTER–VI (NEW) EXAMINATION – WINTER 2023
Subject Code:3160717 Date:07-12-2023
Subject Name:Data Visualization
Time:02:30 PM TO 05:00 PM Total Marks:70
Instructions:
1. Attempt all questions.
2. Make suitable assumptions wherever necessary.
3. Figures to the right indicate full marks.
4. Simple and non-programmable scientific calculators are allowed.
MARKS
Q.1 (a) Define: (1) Data Visualization (2) Data Point (3) Infographics 03
(b) Differentiate following:(1) Canvas and SVG (2) HTML and SVG 04
(c) What is Google API? Write HTML code to display Bar chart using 07
Google APIs.

Q.2 (a) Differentiate CSV Vs XML files 03

(b) Write down code for reading and displaying JSON file using java script. 04
(c) What is Semantic table? Explain it with suitable example 07
OR
(c) Write down code for reading asynchronously and displaying XML file 07
using JQuery.
Q.3 (a) What is D3.js? Explain in short. 03
(b) How do you assure maximum readability using CSS? 04
(c) Write D3 code to demonstrate data binding and data loading. 07
OR
Q.3 (a) Differentiate text file with JSON file 03
(b) What is dynamic highlighting? Explain it using suitable code example. 04
(c) How to use selection in D3? Describe chaining method of D3.js using 07
suitable example.

Q.4 (a) What is Data joins? 03

(b) Explain interactive buttons with suitable example. 04
(c) Write a code to demonstrate play button also explain it. 07
OR
Q.4 (a) What is sequence w.r.t data visualization? 03
(b) Explain transaction w.r.t data visualization. 04
(c) Write a code to interrupt the play button also explain it. 07

Q.5 (a) How do you update charts? 03

(b) How you achieve eloquence? Explain it 04
(c) What is information Dashboard? Explain various design issues of it. 07
OR
Q.5 (a) What is Bullet graph? 03
(b) Explain Sparkline? 04
(c) What are different considerations associated with visual perception of 07
information dashboard.
************

1
 Enrolment No./Seat No_______________

GUJARAT TECHNOLOGICAL UNIVERSITY

BE- SEMESTER–VI (NEW) EXAMINATION – WINTER 2024
Subject Code:3160717 Date:28-11-2024
Subject Name:Data Visualization
Time:02:30 PM TO 05:00 PM Total Marks:70
Instructions:
1. Attempt all questions.
2. Make suitable assumptions wherever necessary.
3. Figures to the right indicate full marks.
4. Simple and non-programmable scientific calculators are allowed.

Marks
Q.1 (a) What is Infographics explain with example 03
(b) Describe Simultaneous acquisition and visualization. 04
(c) What is charting Primitives? List all types of Charts and explain bar Chart 07
and line Chart.

Q.2 (a) Explain linear gradient and radial gradient in canvas. 03

(b) Why is HTML5 so important to data visualization? 04
(c) How to use the HTML5 canvas to render dynamic column charts? 07
OR
(c) How to use the Google Charts API to render a column chart for University 07
result data of various subjects.

Q.3 (a) How to read XML file? Explain with example. 03

(b) Explain CSS-style selectors with example. 04
(c) How to use the Google Charts API to render a Pie chart for Election data 07
of various states.
OR
Q.3 (a) How to read JSON file? Explain with example. 03
(b) How the HTML5 canvas differs from SVG graphics 04
(c) Explain Data points and XY chart with example 07

Q.4 (a) Explain transaction with respect to data visualization 03

(b) Explain select and append command in D3.js with example 04
(c) Write a code to demonstrate play button also explain it. 07
OR
Q.4 (a) Prepare column chart using the HTML5 canvas. 03
(b) Explain Select all and exit command in D3.js with example. 04
(c) Describe Loading and Filtering External Data in data visualization 07

Q.5 (a) How do you update charts? 03

(b) How to add Play button to the page? Explain with example 04
(c) What are the key Factors of Data Visualization? 07
OR
Q.5 (a) Explain syntax of polygon and poly points in canvas with example. 03
(b) How you achieve eloquence? Explain it 04
(c) What is information Dashboard? Explain various design issues of it 07

*************