book

Template Engine

In the intro class, you made bar charts by writing plain <svg> tags. Imagine having to do that for lots and lots of data points! No way.

This week, your learning task is to learn how to utilize a template engine to automate the creation of svg-based data visualization. Fortunately, gitbook has a template engine built-in already, which is nunjuncks. Below are working examples how to utilize the for tag to render a whole bunch of elements.

A list of numbers

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

    • An array of rectangles

    The rectangles below are also generated using the tag.

    Challenges

    Now it's your team's turn to work together to complete the challenges below.

    1D Data

    A list of numbers

    Draw negative numbers in red and positive numbers in green.

  • 43
  • 21
  • -13
  • 32
  • 20
  • 5
  • -8
  • 29
  • 9

    • (Hint: use the if tag)

    Bar Chart

    • Below should be a bar chart to display the data: 43,21,32,20,5,29,9
    • There should be some gaps between the bars.

    Bar Chart (Horizontal)

    • Same as the previous, but bars are horizontal.

    2D Data

    Table

    • Draw a table to display the data, using <table>, <tr>, <td>
    • You will need to create a nested for loop.
    10 15
    20 12
    31 42
    12 52
    33 24

    X-Y Plot

    • Plot the data using <circle> to represent each data point.
    • Scale the data to nicely occupy the display area

    X-Y Plot (Colored)

    Now each data point has three values. Extend the previous solution. Use size of the circle to represent the third value.