d3 How to align average of data in right axis with name in left axis in plot?

Question

Let's say I have a data

name,percentage
1,0.01
1,0.03
2,0.02
2,0.04
3,0.03
3,0.05
4,0.04
4,0.06

First I will create a scatter plot to display all data points and y-axis on left as name, x-axis as average. Then, I want to compute the average of the above dataset, which is

name,average
1,0.02
2,0.03
3,0.04
4,0.05

and assign these average values to right axis to align with name in the left. The result should roughly like below image.