Honestly, landing on the page is a bit confusing. On Firefox I have to click and hold before anything happens and it is inconsistent. Seems to help by moving my mouse.
The legend is quite large and causes it to overlap with the graph. I think you can reduce the text size and/or reduce the size of the real and imaginary labels. Smaller they can go on one line and give you more vertical space (The info button is probably too large too). I'd recommend a change of colors too, can be nicer looking and more colorblind friendly. Best to be completely colorblind friendly but a lot of those look ugly and the vast majority of people are only red-green colorblind, so this opens up a lot. (Google pallets rather than just guessing because there are some non-intuitive aspects) Blue-orange (or blue-yellow) is a good choice as they're complementary colors but also consider your background (I'm a dark mode user so I appreciate the graph not being hostile to my eyes). Contrast is your friend and think about hues and saturation, not just color.
The information I think is probably a bit hard to understand. Feels like it is written in a way that makes perfect sense to someone who is already familiar with the topic but not for those that aren't. I think shrinking the width could increase readability (especially important with technical topics) and might be worth throwing in a few pictures to better communicate.
As the graph evolves things become really shaky. Are you computing this in real time (I think you are)? If the user isn't interacting with it, why not just run a gif or video? There's a lot of instability as the components converge, where the samples (circles) flash. This gets really bad as the lines overlap where you got flashing circles and alternating between blue and magenta. I'm not sure how you resolve this in the software you're using, but you probably should be able to make one graph dominate. So that, for example, the real part always occludes the imaginary component. That'll stop flashing. But running a gif or video will also mean you don't get different behaviors across browsers (if that's a concern). With a video you can also add things like frame stepping, rewinding, pausing, changing speed, and pretty much all the things you'd want from running the computation itself. It should be highly compressible if you're concerned with bandwidth because the small changes. A video is identical to a pre-computed version. If you wanted to give users the ability to jump you can still do this with video by associating frame numbers to labels of c. Unless you want them to change the equation or go out of bounds a video is probably the best option here tbh.
Early version. Comments and feedback welcome.
Honestly, landing on the page is a bit confusing. On Firefox I have to click and hold before anything happens and it is inconsistent. Seems to help by moving my mouse.
The legend is quite large and causes it to overlap with the graph. I think you can reduce the text size and/or reduce the size of the real and imaginary labels. Smaller they can go on one line and give you more vertical space (The info button is probably too large too). I'd recommend a change of colors too, can be nicer looking and more colorblind friendly. Best to be completely colorblind friendly but a lot of those look ugly and the vast majority of people are only red-green colorblind, so this opens up a lot. (Google pallets rather than just guessing because there are some non-intuitive aspects) Blue-orange (or blue-yellow) is a good choice as they're complementary colors but also consider your background (I'm a dark mode user so I appreciate the graph not being hostile to my eyes). Contrast is your friend and think about hues and saturation, not just color.
The information I think is probably a bit hard to understand. Feels like it is written in a way that makes perfect sense to someone who is already familiar with the topic but not for those that aren't. I think shrinking the width could increase readability (especially important with technical topics) and might be worth throwing in a few pictures to better communicate.
As the graph evolves things become really shaky. Are you computing this in real time (I think you are)? If the user isn't interacting with it, why not just run a gif or video? There's a lot of instability as the components converge, where the samples (circles) flash. This gets really bad as the lines overlap where you got flashing circles and alternating between blue and magenta. I'm not sure how you resolve this in the software you're using, but you probably should be able to make one graph dominate. So that, for example, the real part always occludes the imaginary component. That'll stop flashing. But running a gif or video will also mean you don't get different behaviors across browsers (if that's a concern). With a video you can also add things like frame stepping, rewinding, pausing, changing speed, and pretty much all the things you'd want from running the computation itself. It should be highly compressible if you're concerned with bandwidth because the small changes. A video is identical to a pre-computed version. If you wanted to give users the ability to jump you can still do this with video by associating frame numbers to labels of c. Unless you want them to change the equation or go out of bounds a video is probably the best option here tbh.