Replicate a version of plot_degree.gif in d3 using r2d3

[jhofman]

Create a version of the full animation here for small_salary data of 100 points in d3 using r2d3.

This should load the data:

load('src/dmpkg/data/small_salary_100.rda')

For now, let's go for the following key frames:

1. Ungrouped data, in a grid all grey.
2. Grouped data, in a grid blue and red.
3. Scatter plot (x = degree, y = salary, color = degree), as you have from Get a basic d3.js example working with r2d3 #5.
4. Collapsed points for averages (x = degree, y = average_salary, color = degree), also from Get a basic d3.js example working with r2d3 #5.

There will be issues with scales zooming in and with showing error bars, etc., that we can address in a future iteration.

[giorgi-ghviniashvili]

Hi @jhofman.

Here is the video:
https://user-images.githubusercontent.com/6615532/113862991-27a88980-97ba-11eb-9ad3-b8725506e63d.mov

I separated coordinate calculation and drawing logic into their own functions. The calculation and drawing initialization happens in main().

  const frames = [];
  frames.push(grid());
  frames.push(colored_grid());
  frames.push(scatter_plot());
  frames.push(averages());

Frames are scenically animated.

[jhofman]

@giorgi-ghviniashvili, quick question on the scatter portion of this ("step 3"), do the y coordinates correspond to actual salary amounts?

if not, can you update things so that's the case?

[giorgi-ghviniashvili]

@jhofman yes they use salary amounts, but then collision detection is applied which spreads the nodes a bit.

[giorgi-ghviniashvili]

If I set exact y coords, I am getting this:

[jhofman]

ah okay. is there a way to keep the y coords exact but jitter on the x coords only to avoid collisions?

[giorgi-ghviniashvili]

Ok, done it: