Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dumbbell plot #418

Open
kMutagene opened this issue Sep 20, 2023 · 4 comments
Open

Dumbbell plot #418

kMutagene opened this issue Sep 20, 2023 · 4 comments
Labels
Difficulty: Beginner Hackathon projects with beginner difficulty FsLab Hackathon 2023 Implementation projects for the 2023 FsLab Hackathon

Comments

@kMutagene
Copy link
Collaborator

kMutagene commented Sep 20, 2023

Description

Dumbbell plot [1] (also known as Dumbbell chart, Connected dot plot) is great for displaying changes between two points in time, two conditions or differences between two groups.

Example:

Pointers

  • Ideally, you start prototyping in a scripting or notebook environment where you can iterate fast. installation instructions can be found here: https://plotly.net/#Installation
  • Charts like this that are using baseline trace types to create a new chart type should only be implemented in the top-level Chart API. An example where this is already done is the Range chart that combines a set of differently styled line charts.
  • When possible, use #IConvertible for data input, as this allows for strings, number types such as int and float, and DateTime.

References

Hints (click to expand if you need additional pointers)
  • The most suitable base chart for this is a set of line charts that each connect the two data points by a line
  • The high-level function should look quite similar to the base implementation of Chart.Range
@kMutagene kMutagene added Difficulty: Beginner Hackathon projects with beginner difficulty FsLab Hackathon 2023 Implementation projects for the 2023 FsLab Hackathon Status: Available labels Sep 20, 2023
@kMutagene kMutagene moved this to Status: Available in FsLab Hackathon 2023 Sep 20, 2023
@Lewiszz
Copy link

Lewiszz commented Sep 30, 2023

I am having a look at this one!

@bvenn bvenn moved this from Status: Available to Status: In Progress in FsLab Hackathon 2023 Sep 30, 2023
@kMutagene
Copy link
Collaborator Author

Hey @Lewiszz. Are you still planning to finish this? If not, I would greatly appreciate if you could link what you ended up with during the hackathon (e.g. a script or notebook you worked in) so others can use it as a foundation to tackle this chart. If also do not have anything to link, no worries, please just tell me that this issue is up-for-grabs again. Thanks ❤️

@Lewiszz
Copy link

Lewiszz commented Oct 16, 2023

Hey @kMutagene! Sorry, forgot to post it here, but I didn't get anywhere worth sharing and I also think there are other libraries (or issues) where I can contribute in a more productive way. This was a bit too far out of my comfort zone :)

So yes, open for anyone to pick up!

Thanks for giving me the opportunity to try though.

@kMutagene kMutagene added this to the Plotly.NET 5.0 milestone Feb 5, 2024
@kMutagene
Copy link
Collaborator Author

This is either achievable by creating one trace per pair, or one trace per group. I settled in implementing one trace per group, as that enables way more useful legends. However, now the lines have to been drawn as shapes, and correct shape layer between is just recently implemented in plotly.js 2.31.0, so it makes sense to move this to v6 as v5 will only target < v2.28.0.

Meanwhile, here is simple way to achieve this:

 let group1 = [1; 2; 3; 6]

let group2 = [3; 1; 4; 1]

let labels = ["A"; "B"; "C"; "D"]

[
    Chart.Point(
        labels, 
        group1, 
        Name = "Group 1",
        Marker = Marker.init(Size = 20)
    )
    Chart.Point(
        labels, 
        group2, 
        Name = "Group 2",
        Marker = Marker.init(Size = 20, Color = Color.fromString "red")
    )

]
|> Chart.combine
|> Chart.withShapes (
    Seq.zip3 labels group1 group2
    |> Seq.map (fun (label, y1, y2) -> 
        Shape.init(
            ShapeType = StyleParam.ShapeType.Line,
            X0 = label, 
            X1 = label, 
            Y0 = y1, 
            Y1 = y2
        )
    )
)

note that there is no way to place the markers above the lines pre 2.31.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Difficulty: Beginner Hackathon projects with beginner difficulty FsLab Hackathon 2023 Implementation projects for the 2023 FsLab Hackathon
Projects
None yet
Development

No branches or pull requests

3 participants