Confused by data set and output orientations

[moosehill]

It looks like the data set is flipped vertically relative to the output? I see an earlier commit that seems to have introduced this flip, but I don't understand why they look different. Can someone explain?

I'd like to show this to students in a class on Thursday and don't know how to explain this point.

[emmanuelrouxfr]

Hello @moosehill !

It's probably due to the way the thumbnail of the dataset (visible in top left corner of the playground) is generated using this function drawDatasetThumbnails,

Indeed, the function context.fillRect is filling the small square by considering the origin of the coordinates in the top left corner (with increasing values of X2 pointing downwards... while the data plotted in the right hand side of the playground is rendered with the positive value of X2 pointing upward.

I could solve it by adding a "-" (minus) sign before the d.y (which is X2) on line 1003 in the same drawDatasetThumbnails function

context.fillRect(w * (d.x + 6) / 12, h * (-d.y + 6) / 12, 4, 4);

which gives the following display :

Hope it helps :)
All the best,
Emmanuel

[emmanuelrouxfr]

I was about to do the same pull request as this one :
#101

I hope this will be integrated in the main branch quickly...

Have a great day,
Emmanuel

[moosehill]

I see -- that makes sense. Thanks for looking at it.

…

On Oct 27, 02021, at 7:00 AM, Emmanuel Roux ***@***.***> wrote: Hello @moosehill <https://github.com/moosehill> ! It's probably due to the way the thumbnail of the dataset (visible in top left corner of the playground) is generated using this function drawDatasetThumbnails, <https://github.com/tensorflow/playground/blob/29b78ca68b7792871222d30374cbd1d7e84d7295/src/playground.ts#L993> Indeed, the function context.fillRect is filling the small square by considering the origin of the coordinates in the top left corner (with increasing values of X2 pointing downwards... while the data plotted in the right hand side of the playground is rendered with the positive value of X2 pointing upward. <https://user-images.githubusercontent.com/38685126/139052774-47142c73-715f-4262-a94c-10d5b8dbce3f.png> I could solve it by adding a "-" (minus) sign before the d.y (which is X2) on line 1003 in the same drawDatasetThumbnails function <https://github.com/tensorflow/playground/blob/29b78ca68b7792871222d30374cbd1d7e84d7295/src/playground.ts#L1003> context.fillRect(w * (d.x + 6) / 12, h * (-d.y + 6) / 12, 4, 4); which gives the following display : <https://user-images.githubusercontent.com/38685126/139051266-19c53a9f-7d9e-4cc6-a8c0-ff16665f017c.png> Hope it helps :) All the best, Emmanuel — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#161 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABYGGTJ2ASNW34XPV2MI4MLUI7SURANCNFSM5GWQH5RQ>. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[moosehill]

That issue looks pretty old, but I hope so as well. It would make explaining the display much simpler.