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

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

CSS Tutorial: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started

Draw negative numbers in red and positive numbers in green. RED

    <span style="color:green">43</span>
    // <positive>43</positive>



    <span style="color:green">21</span>
    // <positive>21</positive>



    <span style="color:red">-13</span>
    // <negative>-13</negative>



    <span style="color:green">32</span>
    // <positive>32</positive>



    <span style="color:green">20</span>
    // <positive>20</positive>



    <span style="color:green">5</span>
    // <positive>5</positive>



    <span style="color:red">-8</span>
    // <negative>-8</negative>



    <span style="color:green">29</span>
    // <positive>29</positive>



    <span style="color:green">9</span>
    // <positive>9</positive>

(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.

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.