Most Important Data Visualization
Questions & Topics
Subject Code: 3160717 - Priority Study Guide
HIGHEST PRIORITY TOPICS (Appear in 4-5 papers)
1. Data Visualization Definitions & Concepts
Questions Asked 5 times:
• Define: Data Visualization, Data Point, Infographics, Scale, Visualization,
Filtering, Axes
• Real-time applications and key factors of data visualization
Must Know:
• Definition of data visualization and its real-world applications
• Key factors: Control of Presentation, HTML5 rise, JavaScript processing
• Data points, scales, and infographics concepts
2. Canvas vs SVG Comparison
Questions Asked 4 times:
• Differentiate Canvas and SVG
• HTML vs SVG differences
Must Know:
• Canvas: Bitmap, pixel-based, good for complex graphics/games
• SVG: Vector-based, scalable, DOM manipulable, good for simple graphics
3. File Format Handling (CSV, JSON, XML)
Questions Asked 8 times:
• Read and display CSV, JSON, XML files
• Differentiate between file formats
• Code implementations for file reading
Must Know:
// CSV Reading with jQuery
$.get('data.csv', function(data) {
// Parse and display CSV data
});
// JSON Reading
$.getJSON('data.json', function(data) {
// Process JSON data
});
4. D3.js Fundamentals
Questions Asked 6 times:
• What is D3.js?
• Data joins, selections, and binding
• Various D3.js functions
Must Know:
// Basic D3 Selection
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d) { return d; });
// Data Joins: Enter, Update, Exit pattern
5. Google Charts API
Questions Asked 5 times:
• Implementation of Pie charts, Bar charts, Column charts
• Google API basics and usage
Must Know:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11], ['Eat', 2], ['Commute', 2], ['Sleep', 9]
]);
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
6. Interactive Buttons & Play Functionality
Questions Asked 6 times:
• Interactive buttons implementation
• Play button with start/stop functionality
• User interruption handling
Must Know:
// Play Button Implementation
var isPlaying = false;
var playInterval;
function playButton() {
if (!isPlaying) {
playInterval = setInterval(updateChart, 1000);
isPlaying = true;
} else {
clearInterval(playInterval);
isPlaying = false;
}
}
7. Information Dashboard Design
Questions Asked 7 times:
• Dashboard definition and design issues
• Wireframe creation for university/college
• Visual perception considerations
Must Know:
• Dashboard components: KPIs, charts, filters, navigation
• Design principles: clarity, consistency, hierarchy
• Common issues: clutter, poor navigation, slow loading
HIGH PRIORITY TOPICS (Appear in 3-4 papers)
8. Chart Types Explanation
Bar Chart, Pie Chart, Line Chart, Bubble Chart, Candlestick Charts
• Definitions and use cases
• When to use which chart type
9. Semantic Tables & Maximum Readability
• HTML semantic table structure
• CSS styling for readability
• Dynamic highlighting techniques
10. HTML5 Canvas Programming
• Canvas basics and syntax
• Linear/Radial gradients
• Animation implementation
MEDIUM PRIORITY TOPICS (Appear in 2-3 papers)
11. XML and DOM
• DOM definition and XML file reading
• XSLT and DTD concepts
• Asynchronous XML processing
12. Data Binding in D3.js
• Data binding concepts
• Use of text(), append(), selectAll()
• Chaining methods
13. Transactions & Chart Updates
• Transaction implementation in data visualization
• Chart update mechanisms
• Animation sequences
MUST-MEMORIZE CODE TEMPLATES
1. Basic HTML5 Canvas Chart
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw bar chart
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 200);
</script>
2. D3.js Data Join Pattern
var circles = svg.selectAll("circle")
.data(dataset);
circles.enter()
.append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 5);
3. CSV Reading with Papa Parse
Papa.parse("data.csv", {
download: true,
header: true,
complete: function(results) {
console.log(results.data);
}
});
EXAM STRATEGY
3-Mark Questions (40 questions) - Focus on definitions
• Memorize exact definitions of D3.js, Canvas, SVG, Data Points, etc.
• Practice differentiating between concepts
4-Mark Questions (40 questions) - Focus on explanations
• Chart types explanations
• File reading implementations
• Interactive elements explanation
7-Mark Questions (45 questions) - Focus on coding
• Complete Google Charts implementation
• D3.js data binding with examples
• Dashboard design with wireframes
• Canvas/SVG programming
CRITICAL SUCCESS FACTORS
1. Master Google Charts API - Appears in every paper
2. Know file format differences - CSV vs JSON vs XML
3. Understand D3.js basics - Selections, data joins, binding
4. Practice Canvas vs SVG - Most common differentiation question
5. Dashboard design principles - Always asked in 7-mark questions
QUICK REVISION CHECKLIST
• Data Visualization definition and applications
• Canvas vs SVG differences (4+ times asked)
• Google Charts: Pie, Bar, Column implementation
• D3.js: selections, data binding, joins
• File formats: CSV, JSON, XML reading codes
• Interactive buttons and play functionality
• Dashboard design issues and wireframes
• HTML5 Canvas basic programming
• Semantic tables and readability
• Chart types: Bar, Pie, Line, Bubble explanations
