3.6 Task 6-6: Draw a scatterplot

From Day 10

  • 6-6-1. First, create a SVG element before the enclosing tag of <body>. Set the width of the svg to be 500, and the height 100. Dataset = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88] ]. In each hard bracket, the first number is the x, and the second the y. Draw a scatterplot of all these data points. Basically, you are expected to draw small circles. cx and cy are the above data points. Set the radius to be 5 pixels.

    • In the above dataset, dataset[2][0] = 480
  • 6-6-2. Label each data point in the format of d[0], d[1]. Place each label right beside each data point (just use d[0] as x, and d[1] as y will do the job). Please note here that text can both be an SVG element and a D3 method.

Chapter Six, Drawing the data is finally over. We’ll begin learning scales. p.117