FrançaisGet started

Web languages for data

Drawing data in a web page: SVG elements and their coordinate system, Canvas, choosing between the two, and loading CSV or JSON data.

  • 28 cards
  • 4 topics
  • Free
Study this deck

The outline, topic by topic

Each topic is weighted the way the exam weighs it.

  1. Concepts
  2. Questions
  3. Sort and link
  4. Scenarios

A few cards from the deck

  • SVG: what is it?

    Show the answer

    A vector image format described in XML: each shape (rect, circle, line, path, text) is an element of the page, which CSS and JavaScript can modify.

    Shapes stay sharp at any zoom and receive events, but every shape costs one element in the page.

  • An SVG chart is 100 px high. Which rectangle draws, standing on the bottom, the bar for a value of 60?

    • <rect y="40" height="60" />
    • <rect y="0" height="60" />
    • <rect y="60" height="60" />
    • <rect y="60" height="40" />
    Show the answer

    <rect y="40" height="60" />

    The y axis points down: the bar must start at 100 − 60 = 40 and extend 60 downwards. With y="0" it hangs from the top; with y="60" height="60" it overflows the chart; with height="40" it shows 40, not 60.

  • In an SVG coordinate system, the origin (0, 0) is at the … and the y axis ….

    Show the answer

    In an SVG coordinate system, the origin (0, 0) is at the top left and the y axis points down.

    It is the opposite of a maths chart: for a bar standing on the bottom, y is the total height minus the bar's height.

  • viewBox: what is it?

    Show the answer

    An attribute of the svg element that sets the drawing's internal coordinate system (x, y, width, height); it is then stretched to the displayed size.

    With viewBox="0 0 100 50" displayed 400 px wide, everything is scaled up 4 times: you draw in data units and the browser deals with pixels.

  • A scatter plot of 50,000 points drawn in SVG makes the page slow to display and scroll. What should you do?

    • Use a canvas, a single surface of pixels
    • Reduce the viewBox value so the browser has less to compute
    • Convert the CSV file to JSON before loading it
    • Group the points into g elements
    Show the answer

    Use a canvas, a single surface of pixels

    Each SVG shape is a DOM element the browser must track: at 50,000 that is heavy. Canvas paints pixels and forgets. The file format or the viewBox does not change the number of elements, and a g removes none.

Study this deck