3.3 Task 6-3: Draw a new SVG chart

From Day 8

  • 6-3-1. Still use the above dataset with 20 data values;

  • 6-3-2. Insert a new SVG\ between <body> and </body>. Set the width of the SVG to be 500 and the height 100 pixels;

  • 6-3-3. Now, instead of creating divs, we’ll be creating rect s. Create 20 rect s, each with x =0, y=0, width = 20, height = 100;

  • 6-3-4. Set the x to be dynamic, such that the \(i\)th rect has an x of i*21;

  • 6-3-5. Set the x to be flexible, such that each x = i * (w / dataset.length); Set the width of each rect to be flexible as well, each width = w / dataset.length - 1;

  • 6-3-6. Try to set the height of each rect to be the corresponding data value;

  • 6-3-7. Set the top of each bar to be h-d and the height of each bar to be the corresponding data value;

  • 6-3-8. Change d to be d * 4;

  • 6-3-9. Change the bar color to teal.