3.2 Task 6-2: Drawing SVGs

6-2-1, dataset = [5, 10, 15, 20, 25]
6-2-2, Create a SVG within <body></body>; Set the width of the SVG to be 500, and the height to be 50;
6-2-3, var svg = d3.select("body").append("svg"), what does this line of code do?
6-2-4, Draw five circles, the x-pistion value of each circle’s center is (index * 50) + 25, the y-position is half of the pre-defined height, and the value of the radius is the data value itself;
6-2-5, Fill the five circles with “yellow”, the stroke being “orange”, and the stroke width is half of the corresponding data values;
6-2-6, Delete all the above codes except for the div.bar{} CSS styling, and then set the dataset to be [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ], generate n number of divs before the enclosing tag of <body>(n = the length of the above dataset; and yes, you still need the CSS between <head> and </head>), give it a class named as “bar”. The height of each bar is five timees the corresponding data values. Attributions of the CSS, div.bar: inline-block, set the width to be 20px, the height 75px, background color is teal, and create a 2px margin between bars.