Dynamic Graphics

Terms defined: Scalable Vector Graphics (SVG), raster graphics, vector graphics

Overview

Outline

• SVG is a widely-used vector graphics format
  • Represent lines, circles, etc. in a notation like HTML
  • Also represent transformations (move, rescale, etc.)
  • Scales more smoothly than raster graphics like PNG and JPEG
• shapes.html and shapes.js
  • Create an SVG object and insert into the page
  • Ask that object to create other shapes
  • Move them into position and change their properties
• colors.js changes the color of a square dynamically
  • Note the use of window.addEventListener
• bar_chart.html: create a bar chart with fixed values
  • A lot of calculations, many of which would have to be re-done if the X-axis labels weren't rotated
• Use Frappe Charts
  • Not as popular as Chart.js, but it uses SVG