# Interactive visualization of fundamental concepts in calculus/linear algebra

**URL:** <https://discourse.julialang.org/t/interactive-visualization-of-fundamental-concepts-in-calculus-linear-algebra/90407>\
**Category:** General Usage\
**Created:** [November 17, 2022, 3:26pm UTC](https://discourse.julialang.org/t/interactive-visualization-of-fundamental-concepts-in-calculus-linear-algebra/90407 "2022-11-17T15:26:08Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![sloede](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sloede/32/44787_2.png) [@sloede](https://discourse.julialang.org/u/sloede)\
**Post date:** [November 17, 2022, 3:26pm UTC](https://discourse.julialang.org/t/interactive-visualization-of-fundamental-concepts-in-calculus-linear-algebra/90407/1 "2022-11-17T15:26:08Z")

</div>

Is there any publicly available material suitable for in-class teaching of mathematical principles that provides interactive visualization of concepts such as eigenvectors, matrix rotation, extremal points of function graphs etc?

I am thinking about something like Pluto + Makie, but really anything would be OK. The only condition I have is that it should be interactive, ie, enabling and encouraging students to exploratively learn about these concepts in an easily accessible way.

---

<div class="post-metadata">

**Author:** ![j-fu](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/j-fu/32/11373_2.png) [@j-fu](https://discourse.julialang.org/u/j-fu)\
**Post date:** [November 21, 2022, 9:21pm UTC](https://discourse.julialang.org/t/interactive-visualization-of-fundamental-concepts-in-calculus-linear-algebra/90407/2 "2022-11-21T21:21:28Z")

</div>

Just remembered [JSXGraph](https://jsxgraph.uni-bayreuth.de/wp/index.html). May be it works in a pluto notebook.

Update: it works: [jsxgraph-pluto · GitHub](https://gist.github.com/j-fu/418fcf450d53a91f391781ea500cfd2b) Could be made with `publish_to_js` (as in PlutoVista.jl).

---

<div class="post-metadata">

**Author:** ![sloede](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sloede/32/44787_2.png) [@sloede](https://discourse.julialang.org/u/sloede)\
**Post date:** [November 22, 2022, 12:59pm UTC](https://discourse.julialang.org/t/interactive-visualization-of-fundamental-concepts-in-calculus-linear-algebra/90407/3 "2022-11-22T12:59:38Z")

</div>

Thanks a lot for the suggestions, @j-fu! However, I was really looking for something in Julia to also encourage my students to consider using programming as a regular tool in their toolbox. I was also hoping that someone has already done this, e.g., for some Calculus 101/Linear Algebra 101 class for mathematics/computational engineering students, since I don’t know if I will have the time to code everything (anything) myself.

However, since I asked, I managed to nerd-snipe myself and created two visualizations for a Taylor approximation for the sine/cosine function as a proof-of-concept/demonstrator (mostly for myself). One solution uses just Makie.jl (GLMakie.jl), the other is based on Pluto.jl + Plots.jl. Maybe they will serve someone else as a starting point; should I manage to create more of these I will probably put them in repo and link to it after the semester.

**EDIT** : I think the Makie version is visually nicer. On the other hand, the Pluto solution requires less code, is conceptually simpler, and probably easier to get running (and easier to tinker with) for a non-programmer student.

## Taylor approximation using Makie

![makie_taylor_series](https://global.discourse-cdn.com/julialang/original/3X/c/0/c085e8a73e0ddae28c4564946588e0743d51f2ba.gif)

> <https://gist.github.com/sloede/a680cf36245e1794801a6bcd4530487a>

## Taylor approximation using Pluto + Plots

![pluto_taylor_series](https://global.discourse-cdn.com/julialang/original/3X/e/9/e9cc8dd8a27e78fce7d626ad024796640763a173.gif)

> <https://gist.github.com/sloede/e279a4c6f51141765443675d51ba323d>

---

<div class="post-metadata">

**Author:** ![stevengj](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/stevengj/32/71_2.png) [@stevengj](https://discourse.julialang.org/u/stevengj)\
**Post date:** [November 22, 2022, 1:26pm UTC](https://discourse.julialang.org/t/interactive-visualization-of-fundamental-concepts-in-calculus-linear-algebra/90407/4 "2022-11-22T13:26:12Z")

</div>

> [@sloede](#):
>
> Is there any publicly available material suitable for in-class teaching of mathematical principles that provides interactive visualization of concepts such as eigenvectors, matrix rotation, extremal points of function graphs etc?

I have a bunch of Jupyter notebooks for [my linear algebra class](https://github.com/mitmath/1806/tree/spring22), a number of which use `Interact` for interactive sliders etcetera.

---

<div class="post-metadata">

**Author:** ![sashmit](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sashmit/32/18791_2.png) [@sashmit](https://discourse.julialang.org/u/sashmit)\
**Post date:** [November 22, 2022, 1:53pm UTC](https://discourse.julialang.org/t/interactive-visualization-of-fundamental-concepts-in-calculus-linear-algebra/90407/5 "2022-11-22T13:53:54Z")

</div>

Here are some linear algebra pluto notebooks done by Prof Eric Marberg @ the Hong Kong University of Science and Technology:  
[https://www.math.hkust.edu.hk/~emarberg/teaching/2021/Math2121/](https://www.math.hkust.edu.hk/~emarberg/teaching/2021/Math2121/)

---

<div class="post-metadata">

**Author:** ![photor](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/photor/32/14343_2.png) [@photor](https://discourse.julialang.org/u/photor)\
**Post date:** [November 22, 2022, 1:56pm UTC](https://discourse.julialang.org/t/interactive-visualization-of-fundamental-concepts-in-calculus-linear-algebra/90407/6 "2022-11-22T13:56:12Z")

</div>

`Interact` frequently breaks after each updating of packages, for me.

---

<div class="post-metadata">

**Author:** ![sloede](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sloede/32/44787_2.png) [@sloede](https://discourse.julialang.org/u/sloede)\
**Post date:** [November 22, 2022, 1:57pm UTC](https://discourse.julialang.org/t/interactive-visualization-of-fundamental-concepts-in-calculus-linear-algebra/90407/7 "2022-11-22T13:57:33Z")

</div>

Thanks a lot for sharing! This looks great as well! Now I am really torn between Pluto+Plots and IJulia+Plots+Interact. I like (for instructive) reasons that you can go through a Jupyter notebook step by step (i.e., “developing the story”). OTOH, Pluto still seems to be much easier to set up for the students, since they only need to install Pluto and run it and the rest happens automagically.

---

<div class="post-metadata">

**Author:** ![agentyikes](https://avatars.discourse-cdn.com/v4/letter/a/e8c25b/32.png) [@agentyikes](https://discourse.julialang.org/u/agentyikes)\
**Post date:** [February 7, 2024, 12:46am UTC](https://discourse.julialang.org/t/interactive-visualization-of-fundamental-concepts-in-calculus-linear-algebra/90407/8 "2024-02-07T00:46:40Z")

</div>

Hi, I am new to Julia. I ran your gist in vscode and found no graph displayed. Is there any way to make it run in vscode?

---

<div class="post-metadata">

**Author:** ![agentyikes](https://avatars.discourse-cdn.com/v4/letter/a/e8c25b/32.png) [@agentyikes](https://discourse.julialang.org/u/agentyikes)\
**Post date:** [February 7, 2024, 12:54am UTC](https://discourse.julialang.org/t/interactive-visualization-of-fundamental-concepts-in-calculus-linear-algebra/90407/9 "2024-02-07T00:54:11Z")

</div>

Ah, I found that a new window is opened and the graph is plotted inside. Just wonder if it can be shown inside vscode.