JavaScript Graphics & Data Visualization — Interview Questions & Answers

Ques: What are JavaScript graphics?

Ans: JavaScript graphics involve creating and manipulating visual elements (like charts, shapes, or animations) using JavaScript APIs or libraries directly in the browser.

These graphics are typically drawn using:

HTML5 <canvas>
SVG (Scalable Vector Graphics)
WebGL for 3D graphics
Visualization libraries like Chart.js, D3.js, and Plotly

Ques: What are the main ways to create graphics in JavaScript?

Canvas API – Pixel-based 2D drawing
SVG – Vector-based scalable graphics
Libraries:
- Chart.js – Easy 2D chart creation
- Plotly – Interactive charts
- D3.js – Data-driven, customizable visualizations
- Three.js – 3D rendering

Ques: What is the difference between Canvas and SVG?

Feature	Canvas	SVG
Type	Raster (pixel-based)	Vector (shape-based)
Scalability	Loses quality when scaled	Infinite scalability
DOM Interaction	No (drawn pixels)	Yes (individual elements accessible)
Performance	Faster for many objects	Better for small/medium graphics
Best For	Games, animations	Diagrams, charts, icons

Ques: What is the HTML5 Canvas API?

Ans: The Canvas API allows you to draw graphics, shapes, images, and animations directly inside an HTML <canvas> element using JavaScript.

Example:

<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 100);
</script>

Ques: What is the getContext() method used for?

Ans: getContext() defines the rendering context — how graphics are drawn.

canvas.getContext("2d");   // 2D graphics
canvas.getContext("webgl"); // 3D graphics

Ques: How do you draw shapes on a canvas?

Ans: Using context methods like:

ctx.fillRect(x, y, width, height);
ctx.strokeRect(x, y, width, height);
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.fill();

Ques: How to draw text using the Canvas API?

ctx.font = "20px Arial";
ctx.fillStyle = "green";
ctx.fillText("Hello Canvas", 50, 50);

Ques: Can you draw images on a canvas?

Ans: Yes, using drawImage():

const img = new Image();
img.src = "image.png";
img.onload = () => ctx.drawImage(img, 10, 10, 100, 100);

Ques: How can you create animations in Canvas?

Ans: By continuously clearing and redrawing using requestAnimationFrame():

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  x += 2;
  ctx.fillRect(x, 50, 50, 50);
  requestAnimationFrame(draw);
}
draw();

Ques: What is Plotly.js?

Ans: Plotly.js is an open-source library for interactive, publication-quality charts in JavaScript.

It supports bar charts, scatter plots, 3D surfaces, and more.

Ques: How do you create a simple Plotly chart?

<div id="chart"></div>
<script src="<https://cdn.plot.ly/plotly-latest.min.js>"></script>
<script>
Plotly.newPlot('chart', [{
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter'
}]);
</script>

Ques: What are the advantages of Plotly.js?

Interactive charts (zoom, hover, export)
Easy to integrate with React, Angular, etc.
Supports 3D and statistical plots
Built on top of D3.js and WebGL

Ques: What is a 3D chart in Plotly?

Ans: Plotly allows 3D plots using type: 'surface', scatter3d, etc.

Example:

Plotly.newPlot('myDiv', [{
  z: [[1,2,3],[3,2,1]],
  type: 'surface'
}]);

Ques: What is Chart.js?

Ans: Chart.js is a simple, open-source library for creating 2D responsive charts using the <canvas> element.

Ques: How do you create a chart using Chart.js?

<canvas id="myChart"></canvas>
<script src="<https://cdn.jsdelivr.net/npm/chart.js>"></script>
<script>
new Chart("myChart", {
  type: "bar",
  data: {
    labels: ["A", "B", "C"],
    datasets: [{
      label: "Values",
      data: [10, 20, 30],
      backgroundColor: ["red", "blue", "green"]
    }]
  }
});
</script>

Ques: What chart types does Chart.js support?

Line
Bar
Pie / Doughnut
Radar
Polar Area
Bubble / Scatter

Ques: What are Chart.js plugins used for?

Ans: Plugins in Chart.js let you extend or customize chart behavior — e.g., tooltips, animations, data labels.

Ques: How do you make charts responsive in Chart.js?

Ans: By default, Chart.js charts are responsive. You can ensure it by setting:

options: { responsive: true, maintainAspectRatio: false }

Ques: What is Google Charts?

Ans: Google Charts is a cloud-based charting library that renders data visualizations using HTML5/SVG.

Ques: How do you load Google Charts?

<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() {
  const data = google.visualization.arrayToDataTable([
    ['Year', 'Sales'],
    ['2022', 1000],
    ['2023', 1170],
  ]);
  const chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data);
}
</script>
<div id="piechart"></div>

Ques: What are the advantages of Google Charts?

Free and easy to use
Cloud-hosted, no installation needed
Interactive charts
Integrates with Google Sheets and APIs

Ques: What chart types does Google Charts provide?

Ans: Pie, Line, Column, Bar, Area, GeoChart, Gauge, Candlestick, Timeline, TreeMap, etc.

Ques: What is D3.js?

Ans: D3.js (Data-Driven Documents) is a powerful JavaScript library for binding data to the DOM and creating dynamic, interactive visualizations using SVG, Canvas, and HTML.

Ques: How does D3.js differ from Chart.js?

Feature	D3.js	Chart.js
Level	Low-level	High-level
Customization	Full control	Limited templates
Complexity	Steeper learning curve	Easier
Use Case	Custom data visuals	Quick charts

Ques: Give an example of a simple D3.js bar chart.

<svg width="300" height="150"></svg>
<script src="<https://d3js.org/d3.v7.min.js>"></script>
<script>
const data = [30, 70, 45, 60];
const svg = d3.select("svg");
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d,i) => i * 70)
  .attr("y", d => 150 - d)
  .attr("width", 50)
  .attr("height", d => d)
  .attr("fill", "steelblue");
</script>

Ques: What are D3.js advantages?

High flexibility & control
Data-driven DOM updates
Works with both Canvas & SVG
Enables animations, transitions, interactivity

Q27. When should you use D3.js over Chart.js or Plotly?

Ans: Use D3.js when:

You need custom or complex visualizations.
You want fine-grained control over data and styling.
Performance or data binding is crucial.