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
andcy
are the above data points. Set the radius to be 5 pixels.- In the above
dataset
,dataset[2][0] = 480
- In the above
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 thattext
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