tensorflow / playground

Play with neural networks!
http://playground.tensorflow.org
Apache License 2.0
12.03k stars 2.56k forks source link

Confused by data set and output orientations #161

Open moosehill opened 3 years ago

moosehill commented 3 years ago

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?

Banners_and_Alerts_and_A_Neural_Network_Playground

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

emmanuelrouxfr commented 3 years ago

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.

image

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 :

image

Hope it helps :) All the best, Emmanuel

emmanuelrouxfr commented 3 years ago

I was about to do the same pull request as this one : https://github.com/tensorflow/playground/pull/101

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

Have a great day, Emmanuel

moosehill commented 3 years ago

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 https://github.com/tensorflow/playground/issues/161#issuecomment-952800433, 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 commented 3 years ago

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