Hi! I created some animations to explain what happens internally with map & reduce functions.
The code is open source. Any feedback is welcome !
https://lambdabricks.github.io/animating-hofs/
12 Likes
Heh, that’s cool looking.
1 Like
Nice, I finally understood reduce!
4 Likes
It was a joke. Bad one, sorry!
Anyway, I like your animation and I am sure it is going to help to understand the functional approach. You might try to add more examples on reduce, like traversing the list of strings with counting the overall number of characters (to show that the reduced value doesn’t have to be the same type as an enumerable member), etc.
Great job!
3 Likes
Love it Daniel 
It reminds me of this screencast by Joe Armstrong:
1 Like
I’d definitely say add Enum.flat_map if you are wanting to show the basics, it is one of the basic monad operators. 
2 Likes
Also just a quick thought - could you make it so that it takes a copy and works on (or makes obvious it’s) the copy? At the moment anyone new might thing it is altering the starting data, rather than returning a copy
Thanks for the comments !
I’ve been thinking about how to make the list in the animation appear immutable but I don’t have a solution for it yet. Do you have any suggestions on how to do it Aston ?
1 Like
At the beginning I was thinking of doing: map, reduce & filter because are the most common HOF.
Filter is a bit more difficult to represent visually because it uses an if statement.
flat_map would be also cool with examples from different Monads.
Filter can be done by reduce as well. 
Also map can be done with reduce
1 Like
Hey there, I know this is a super old thread but hoping someone will respond anyway!
I’m teaching MapReduce in a data science course and the animation the OP posted is exactly what I was looking for. Which software was used to create the animation? I’d love to be able to create some of my own
@half-of-a-glazier I don’t know what they used but one I saw recently was Mainm: https://www.manim.community/
I checked the source code and found the following Javascript library:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
I did some research and it seems that TweenMax has been replaced by GSAP.
Another way to easily find out what servers, libraries, etc. are being used on a website is by using the Wappalyzer Browser extension.
It would be great to see the animations you make. If you can, please post them in this forum. 
That’s right, I used greensock. TweenMax used to be a version available to use for free, I’m not sure if there’s a similar offering nowadays.
If you want to check the code for the animations it’s open source in this repo
A newer animation library that a lot of people recommend is theatrejs, I haven’t used it myself but maybe you can give it try
2 Likes
