[QUESTION] Tooltips for "chart.barChartMultiSeries()" or 3d bar graph #243

Teloshav · 2023-08-30T17:10:29Z

I have been looking for ways to get a 3d bar graph working and I'm happy to say that the example code on the d3-x3d website was the exact thing I was looking for!

While I am already happy with this, something had me thinking about the potential of a tooltip for this (or if such a thing already exists for this). I was thinking about it being something like the tooltips that are shown for the Plotly 3d surface plots.

An example from the Plotly surface plots website:

Is there a way I could try add this? Does such a feature exist but I haven't found it?

It's likely more trouble than it's worth for me as what I already have from the example code alone has been what I've been looking for all this time. Just might as well save someone else down the line who may have the question 😃.

Teloshav

Teloshav · 2023-08-30T17:21:50Z

I've tried the chart.position value to see if that's what I'm looking for but no dice, just says undefined.

My search continues...!

Teloshav

EDIT:

I have found this page that has an example that'd show world coordinates, it's not exactly what I'm looking for, but I can imagine having a value that shows the current coordinates of the nearest bar on the page below... If I could render a line for each dimension as well, that'd be what I'm looking for! :D

Just have no clue how to do that... =_=

Teloshav · 2023-08-30T19:19:47Z

I think I've figured it out something else that I can hopefully use for this as well... I'll share what I've figured out, please note that I am a novice with Javascript and know basically nothing!

https://jamesleesaunders.github.io/d3-x3d/global.html#getEventCoordinates I found this page which spoke about getting some event coordinates which sounded like something I was looking for, but I didn't know what this meant exactly and I had to find what kind of event I wanted to find.

I found the following websites for the corresponding bits of information:

LINK	INFORMATION GAINED
https://jamesleesaunders.github.io/d3-x3d/events.js.html	Used for finding out what types of events there are. There is `click`, `mouseover`, and `mouseout`.
https://gist.github.com/hlvoorhees/5376764	This page had an example with 3 shapes which I found to be really useful as a playground environment to test what I found and modify the existing code.

I modified the d3_x3dom_event_test.xhtml file from the events.js.html link in the following ways:

<body> <!-- Line 14 -->
  <div id="display"></div> <!-- Used to display position. :) -->

document.onload = function() // Line 73
{
  // . . .

  // This works too.
  // d3.select('Cone').node().addEventListener('click', showAlertWithEventCoordinate) [Changed to below]
  document.getElementById('Green cone').addEventListener('mouseover', showEventCoordinate)
  // d3.select('Text').node().addEventListener('click', showAlertWithEventCoordinate)

  // function showAlertWithEventCoordinate(event) { [Changed to below]
  // . . . 
  // }        
  function showEventCoordinate(event) {
     var pagePt = invertMousePosition(event);
     document.getElementById("display").innerHTML = event.hitPnt;
  }
}

This is probably very obvious to anyone who already knows this kind of thing but this is all new to me.

If I can do this with the bar chart shape I could try to do something that'd display the height of the point. :)

That is all.

Teloshav

EDIT:
If I manage to find a way to continuously get the scene coordinates of the cursor no matter what's being selected that could make it MUCH easier to do this. All I'd have to do is find the nearest bar coordinate (granted I need to find out how to actually find what coordinates each bar exhibits) just through the x and y coordinates alone! After that the z value can just be extracted from the values given in the example or something like that. :)

In terms of what I could do about a potential tooltip continues to elude me. This link showing how the bar graphs are made may be useful now that I understand more of what's being shown here!

jamesleesaunders · 2023-08-30T20:18:26Z

Hi Teloshav,

Thanks for your interest in d3-x3d. I have started to implement event listners across the components in order to add the ability to do tool-tips.

You can see it in action on the Scatter Plot chart type:
https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X3DOM/chart/ScatterPlot.html
(click on bubble to see crosshair and tooltip).

I added this to the Scatter Plot as a proof of concept (which works), here https://github.com/jamesleesaunders/d3-x3d/blob/master/src/chart/scatterPlot.js#L152
I have not got round to implementing similar across the other chart types yet.

I would be extremely interested in your thoughts and contributions!

Appologies I have to race now but I will get back to you and digest your findings more later.

Jim

Teloshav · 2023-08-31T05:30:51Z

I would be extremely interested in your thoughts and contributions!

I've tried out the scatter plot example and like your approach to it.

The project I've been working on has graphs done with Plotly, you see that they trend towards a 'hover' style where the selection is wherever the cursor is hovering (you can see this kind of behaviour on Plotly's page on 3d bar graphs done with MATLAB page).

I noticed that you took a different approach. The crosshairs show up and move only when you click on a specific bubble and stays there until you select another bubble. While a simple difference, I've come to prefer that style over how Plotly handles it (especially for 3d graphs).

I'll explain why:

The ability to rotate and view 3d graphs from different angles and spaces is a big part of the use case. If set so that tooltips are visible only when you've got the cursor selecting it, how could you see it if the point of focus is no longer visible?
E.g. These two photos (screenshots taken from Plotly):
Photo 1:

Photo 2:

The point of interest is the blue bar from the first photo (Photo 1), but you can't see it (or any crosshairs) once you rotate and change your perspective in such a way that the bar isn't visible any more (shown in Photo 2).

Having the option to click to have the crosshair to stay at that position, even if it's hidden from a different perspective.
E.g. These other two photos (screenshots taken from your scatter plot example):
Photo 3:

Photo 4:

The bubble selected in Photo 3 isn't visible in Photo 4 but you can still see the crosshairs. That's the thing I like about this style, it allows for users to have a better chance to 'explore' the 3d spaces and to see the data in ways that could be more useful to them.

Another use case: I know that I'd like to see if a certain bar lines are the same height as other bars, but the bars in question may be far apart from each other, this kind of selection is the only way something like that could be done!

In the use case for my project I want to try find a way to implement getting a 2d cross-section of the 3d bar graph (it allows for some extra insight into the data)... I had an epiphany that if I had the option to replace the crosshairs with a plane instead of some lines, I could better communicate to the end user what they're looking at when I display the corresponding 2d cross-section.
Another option that could be there is the option to select which crosshair axes are visible.

Here's an example of what this planar cross-section view could look like (Original screenshot from a modified version of the example barChartMultiSeries() chart on the d3-x3d website):
Original:

Planer cross-section version after selecting the bar at the intersection of these two planes (took a little while to make this lmao 😅):

This is a LOT to write about (this response alone took me a few hours to craft!), but these have been my thoughts so far. I doubt I could make most (if any) of this happen but I certainly think that if these could be implemented, it'd look really cool. 😄

Teloshav

PS:
Out of all of my ideas, I just want to try get a little text that shows and stays much like the crosshairs once you click on one of the bars. I'd been working with an example with a bunch of shapes as I had mentioned earlier but haven't found a way to try get the shapes from inside the chart.barChartMultiSeries() object thing. (Lack of any Javascript knowledge is even more apparent now!)

If there was anything I'd even have the chance to do, it'd be that, but even that'd a big ask for me. Either way I'd been looking for over a month to see if I could even create an interactive web graph like this at all! I appreciate the work you and the other contributors have put into this so that even Javascript newbies like me can use them.

Thanks! :D

jamesleesaunders · 2023-08-31T20:00:47Z

Hi Teloshav,

Thanks for your thoughts and ideas. Your ideas of a planer cross-section should be fairly easy for me to implement a component for.

As you may have ready the d3-x3d 'charts' are made up of two or more 'components'.

For example the ScatterPlot Chart is built up by combining the following components:

/* Components */
const viewpoint = component.viewpoint();
const axis = component.axisThreePlane();
const crosshair = component.crosshair();        <--- of interest to you?
const label = component.label();                       <--- of interest to you?
const bubbles = component.bubbles();

Another example, the Multi Series Bar Chart is made up of the following components:

/* Components */
const viewpoint = component.viewpoint();
const axis = component.axisThreePlane();
const bars = component.barsMultiSeries();
const light = component.light();

Notice I have not (yet) added the crosshair or label components to the Bar Chart, which is why they only appear on the Scatter Plot.

Full list of components: https://github.com/jamesleesaunders/d3-x3d#components
Examples of most (not all) of the components on their own: https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X3DOM/component/Showcase.html

A little more info on this can be found on Observable Components. The point being that you can combine any number of the 'components' together to create different graphs and visual elements.

Returning back to your idea of a planar cross-section; at the moment there is no Planar CrossHair component, but if I get a chance I will try and rattle this new component up. Then this could be added to one of the charts (or a brand new chart type could be constructed).

In short, in time, I am considering adding more visual aid improvements (i.e crosshair / tooltip labels) to all the other charts (by adding the components). Adding your new Planar CrossHair component also.

All the best,

Jim

jamesleesaunders · 2023-09-02T16:40:24Z

Update...

I have added a new 'Intersecting Planes' component (I could not think of a good name for it, can you think of a better name?)
I have it in a feature branch, of you want to see it:
https://raw.githack.com/jamesleesaunders/d3-x3d/planar/examples/X3DOM/component/IntersectPlanes.html

The above is just a test example with it moving to randomly generated coordinates. I will next integrate it into one of the bar charts and get it to intersect on a clicked bar.

Teloshav · 2023-09-03T05:28:21Z

I have it in a feature branch, of you want to see it:

This looks great! I love it! :D

As you may have ready the d3-x3d 'charts' are made up of two or more 'components'.

I'm going to have a look into this and to see about what you were saying earlier about the fact that the "chart.barChartMultiSeries()" is made of the smaller component thingies like you mentioned in your previous reply.

A little busy at the moment but I'd love to give a shot at detecting which bar graph is clicked. Recently I've been doing a bit of javascript practise (albeit in a really weird way) so hopefully I can use what I learnt to better understand what's going on and dissect it! If I get the chance to do it I'll gladly share my code with you.

That'd have to wait though as I've been spending hundreds of hours doing things OTHER than my studies... 😓

I really appreciate the work you're doing here and even the fact you decided to help me with my silly endeavors by coding this up for me (and anyone else who'd want to use this, of course!) for free and out of your own time. :)

Teloshav

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[QUESTION] Tooltips for "chart.barChartMultiSeries()" or 3d bar graph #243

[QUESTION] Tooltips for "chart.barChartMultiSeries()" or 3d bar graph #243

Teloshav commented Aug 30, 2023

Teloshav commented Aug 30, 2023 •

edited

Loading

Teloshav commented Aug 30, 2023 •

edited

Loading

jamesleesaunders commented Aug 30, 2023

Teloshav commented Aug 31, 2023 •

edited

Loading

jamesleesaunders commented Aug 31, 2023 •

edited

Loading

jamesleesaunders commented Sep 2, 2023

Teloshav commented Sep 3, 2023

[QUESTION] Tooltips for "chart.barChartMultiSeries()" or 3d bar graph #243

[QUESTION] Tooltips for "chart.barChartMultiSeries()" or 3d bar graph #243

Comments

Teloshav commented Aug 30, 2023

Teloshav commented Aug 30, 2023 • edited Loading

Teloshav commented Aug 30, 2023 • edited Loading

jamesleesaunders commented Aug 30, 2023

Teloshav commented Aug 31, 2023 • edited Loading

jamesleesaunders commented Aug 31, 2023 • edited Loading

jamesleesaunders commented Sep 2, 2023

Teloshav commented Sep 3, 2023

Teloshav commented Aug 30, 2023 •

edited

Loading

Teloshav commented Aug 30, 2023 •

edited

Loading

Teloshav commented Aug 31, 2023 •

edited

Loading

jamesleesaunders commented Aug 31, 2023 •

edited

Loading