Adding visual effect for tree map box

[raashika03]

adding a resize feature in the tree map box will be a good idea I think, cause while scrolling through the browser in smaller screens like in phone, tree map box acquires almost the whole screen leaving some spaces below and above it, and only those spaces can be used for scrolling which makes it difficult for the user to scroll down or up.

Only red area marked can be used for scrolling down, which seems frustrating, I felt this when I used Edam browser in the phone for the first time,
I thought my phone isn't working :( took me few minutes to realise that box isn't scrollable like other elements. Even scrolling using vertical scrollbar isn't at all feasible in phone at least because of its less width by default.

So a decrease option to minimise the box size( not to zero) will be nice.

1. It can be done something similar to what's there for applications in an os, Resizing using cursor at the corners.
   

2. Another way can be to provide a button kind of thing like in some PDF reader to change size to 50%, 100%, 10%... For the tree map box only.
   

I think 1 will work in desktop version only, so option 2 can be used which will be made to appear for screens of size less than a particular value.

Refreshing is also difficult currently.

What are your views @bryan-brancotte @matuskalas @hmenager :-)

[raashika03]

I just noticed that, This feature is really important for smaller screens, because when you zoom out the tree map once (using points at both those red areas Simulataneously, just by two fingers)

then there's no go back to the scroll option easily unless you press back button in the phone.
This's how it appears after zoom out

So a soln might be the availability of option 2 on the screen , visibility only for smaller screens.
Try it out, you'll understand the need :-P

[bryan-brancotte]

Hi @raashika03

I understand the frustration, that why I reduce the size of the tree to not 100% of the view height, so we can grab after the tree. Still, your point is valid as we do not know when dragging inside the tree that we are not dragging the page but the tree ... which doesn't move as not zoomed enough :/

I understand your solution but I think this issue could be solve in an other way:

In this example you see that the border changes to black when we drag/scroll inside the tree, while is grey when scroll/drag/zoom outside the tree. The border might not be the best visual solution, but I think we should visually inform the user that only the tree is affected when scrolling inside.

P.S: I agree that if we zoom so the whole viewed area is the tree then we cannot escape it, the buttons would not solve the issue completely as if they are not visible at this moment we are still trapped.

[raashika03]

I understand the frustration, that why I reduce the size of the tree to not 100% of the view height, so we can grab after the tree.

But This's not so much useful for size of normal android screen.

I understand your solution but I think this issue could be solve in an other way:

In this example you see that the border changes to black when we drag/scroll inside the tree, while is grey when scroll/drag/zoom outside the tree. The border might not be the best visual solution, but I think we should visually inform the user that only the tree is affected when scrolling inside.

But this visual effect is not available for Android phone size reason may be a limit on that effect to a particular size only. May be I can edit this thing.

So visual effect generation for this size will solve this problem at least.

P.S: I agree that if we zoom so the whole viewed area is the tree then we cannot escape it, the buttons would not solve the issue completely as if they are not visible at this moment we are still trapped.

What if some pop up option is generated for the size (of the visual screen) smaller than a particular value which'll will appear when tree map box size>= visual screen size. I think this should do the work. This pop up option can be generated on the visual screen for the above '>=' condition Ig.

[bryan-brancotte]

I wasn't very clear about the border effect I showed in the animation sorry, it is something that is for now not available but could be implemented by you, and would then be available on any screen/os. Implementing such effect would also allow you to dive into the code of the tree, and find where to add the listeners.

[raashika03]

I wasn't very clear about the border effect I showed in the animation sorry, it is something that is for now not available but could be implemented by you, and would then be available on any screen/os.

OK I'll implement this.

Implementing such effect would also allow you to dive into the code of the tree, and find where to add the listeners.

What does listeners means here? Are you linking with screen reader thing(out of box:/)?

[bryan-brancotte]

I did not understood your second question, but to answer the first I was talking about listener in the d3js code.

[raashika03]

I did not understood your second question,

I understood second one too by your answer to first.

but to answer the first I was talking about listener in the d3js code.

Ok👍

[matuskalas]

Thank you sooo much @raashika03 & @bryan-brancotte for diving into the details of this usability issue! 🚀

As @bryan-brancotte suggested, it will indeed be very nice if you, @raashika03 work on the implementation with help of @bryan-brancotte's suggestions. I'm assigning it and looking forward!

[bryan-brancotte]

A first attempt with pure css have been tried in #95 but does not do the trick. As far as I know there is no solution without javascript.

[raashika03]

Oki @bryan-brancotte I'll now go for listeners.

[HagerDakroury]

I guess this is now a duplicate of #201 ? The issue now is to make the resizer work on mobile, right? Or the visual effect is still a desired feature? @bryan-brancotte