Data visualization in d3.js - Joyplot/Ridgeline plot

Hi,

I would like to have a joyplot (also called ridgeline plot) visualization developed in d3.js, where:

- X-axis is a continuous variable

- Y-axis is a categorical variable

- Kernel based density is used with Gaussian basis.

- Densities are colored by a categorical variable

- Show a legend for the colors

Functional requirements:

- Range of the x-axis should be set automatically

- On hovering over a density curve (for example: the red colored): all red density curves should be highlighted

Inputs:

- data in long format (see [login to view URL])

- overlapping of density curves (float value between 0 and 1, where 0 stands for no overlap and 1 stand for 100% overlapping)

- level of transparency (float value between 0 and 1, where 1 is intransparent)

Output: See output.png. It was created in R via the ggridges package with the following code:

read_csv("[login to view URL]") %>% ggplot(aes(x = value, y = var)) +

geom_density_ridges(aes(fill = c_id), alpha = 0.8)

Deliverable should be a single html file including all CSS rules and JS script that creates a joyplot from the example data provided.

Dthreejs JavaScript

项目ID： #17876491

关于项目