# Explaining map & reduce with animated examples

**URL:** <https://discourse.elm-lang.org/t/explaining-map-reduce-with-animated-examples/1230>\
**Category:** Show and Tell\
**Created:** [May 6, 2018, 5:17pm UTC](https://discourse.elm-lang.org/t/explaining-map-reduce-with-animated-examples/1230 "2018-05-06T17:17:17Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![pel\_daniel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/pel_daniel/32/229_2.png) [@pel\_daniel](https://discourse.elm-lang.org/u/pel_daniel)\
**Post date:** [May 6, 2018, 5:17pm UTC](https://discourse.elm-lang.org/t/explaining-map-reduce-with-animated-examples/1230/1 "2018-05-06T17:17:17Z")

</div>

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/](https://lambdabricks.github.io/animating-hofs/)

---

<div class="post-metadata">

**Author:** ![joelq](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/joelq/32/445_2.png) [@joelq](https://discourse.elm-lang.org/u/joelq)\
**Post date:** [May 7, 2018, 3:08pm UTC](https://discourse.elm-lang.org/t/explaining-map-reduce-with-animated-examples/1230/2 "2018-05-07T15:08:59Z")

</div>

Nice work! As a very visual person, I appreciate these a lot! 👏

---

<div class="post-metadata">

**Author:** ![blisscs](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/blisscs/32/949_2.png) [@blisscs](https://discourse.elm-lang.org/u/blisscs)\
**Post date:** [May 7, 2018, 9:59pm UTC](https://discourse.elm-lang.org/t/explaining-map-reduce-with-animated-examples/1230/3 "2018-05-07T21:59:56Z")

</div>

I like the animation you’ve made @pel_daniel.

Looking back at the beginner time, when started studying about functional programming and map/folds (reduce) in the paper “Why Functional Programming Matters”. I find this animation is much more simpler to grasp and concise for the map and fold topics.

---

<div class="post-metadata">

**Author:** ![rtfeldman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rtfeldman/32/50_2.png) [@rtfeldman](https://discourse.elm-lang.org/u/rtfeldman)\
**Post date:** [May 7, 2018, 10:03pm UTC](https://discourse.elm-lang.org/t/explaining-map-reduce-with-animated-examples/1230/4 "2018-05-07T22:03:46Z")

</div>

This is lovely! What a great visualization. 😍

---

<div class="post-metadata">

**Author:** ![pel\_daniel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/pel_daniel/32/229_2.png) [@pel\_daniel](https://discourse.elm-lang.org/u/pel_daniel)\
**Post date:** [May 7, 2018, 10:43pm UTC](https://discourse.elm-lang.org/t/explaining-map-reduce-with-animated-examples/1230/5 "2018-05-07T22:43:35Z")

</div>

Thanks @blisscs, I should read “Why Functional Programming Matters” again.  
And maybe do an Animated/Illustrated version of it 🤔

---

<div class="post-metadata">

**Author:** ![pel\_daniel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/pel_daniel/32/229_2.png) [@pel\_daniel](https://discourse.elm-lang.org/u/pel_daniel)\
**Post date:** [May 7, 2018, 10:45pm UTC](https://discourse.elm-lang.org/t/explaining-map-reduce-with-animated-examples/1230/6 "2018-05-07T22:45:20Z")

</div>

Thanks @rtfeldman !

You may like my work-in-progress tutorial to learn functional programming: [http://lambdabricks.github.io/bricks-front-react/tutorial/](http://lambdabricks.github.io/bricks-front-react/tutorial/)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [May 17, 2018, 10:45pm UTC](https://discourse.elm-lang.org/t/explaining-map-reduce-with-animated-examples/1230/7 "2018-05-17T22:45:22Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.