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?

1. Canvas API – Pixel-based 2D drawing
2. SVG – Vector-based scalable graphics
3. 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?

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?

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.