A curated list of tools that can be used for creating interactive mathematical explorables.

Overview

Awesome interactive math tools Awesome

A curated list of tools that can be used for creating interactive mathematical explorables on the web.

Tools

  • CindyJS - a framework to create interactive (mathematical) content for the web.
  • D3.js - a JavaScript library for manipulating documents based on data.
  • Desmos API - dead-simple way to embed rich, interactive math into your web page or web app.
  • Geogebra embeded
  • Grafar - a javascript library for reactive, 3D mathematical visualization (data visualization capabilities coming sometime). Built on top of WebGL (via Three.js).
  • JSXGraph - a cross-browser JavaScript library for interactive geometry, function plotting, charting, and data visualization in the web browser.
  • Mafs - a set of opinionated React components for creating math visualizations.
  • MathBox - a library for rendering presentation-quality math diagrams in a browser using WebGL. Built on top of Three.js and ShaderGraph, it provides a clean API to visualize mathematical relationships and animate them declaratively.
  • Observable - a platform for creating interactive explorables.
  • p5.js - a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners...
  • pts - a library for visualization and creative-coding
  • Liqvid - library for interactive videos in React.
  • SageMath WebGL Renderer
  • Shiny - an R package that makes it easy to build interactive web apps straight from R.
  • three.js - a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.

Examples of awesome interactive math

Articles

Books

Plotters

Other awesomeness

Math games

See this list.

Contribution

Feel free to recommend any awesome tool not listed here.

You might also like...

Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

Jan 5, 2023

📊 Interactive JavaScript Charts built on SVG

📊 Interactive JavaScript Charts built on SVG

A modern JavaScript charting library to build interactive charts and visualizations with simple API. Our Partner ApexCharts is now a partner of Fusion

Jan 3, 2023

Beautiful and interactive javascript charts for Java-based web applications.

Wicked Charts Beautiful and interactive JavaScript charts for Java-based web applications. Check out the Changelog Check out the Feature Overview with

Aug 23, 2022

Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas

Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas

Planner Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas. Try it yourself at plannerjs.dev Plans created

Jan 2, 2023

Visualize your tech stack and database with a simple, beautiful, and interactive web app.

Stacify Visualize your tech stack and database with a simple, beautiful, and interactive web app. Why Stacify Why would you want to use Stacify? Well,

Jan 20, 2022

Timeline/Graph2D is an interactive visualization chart to visualize data in time.

Timeline/Graph2D is an interactive visualization chart to visualize data in time.

vis-timeline The Timeline/Graph2D is an interactive visualization chart to visualize data in time. The data items can take place on a single date, or

Jan 3, 2023

📱📈An elegant, interactive and flexible charting library for mobile.

📱📈An elegant, interactive and flexible charting library for mobile.

F2,一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(node, 小程序,weex)。完备的图形语法理论,满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。英文 README 在此衷心感谢《The Grammar of Graphics》的作者

Dec 27, 2022

Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

roughViz.js is a reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser, based on D3v5, roughjs, and handy. Why? Use

Jan 4, 2023

JQuery plugin for creating charts

JQuery plugin for creating charts

JQuery Linechart JQuery plugin for building a linechart. Chart ruler completely on HTML/CSS/JS. Bar chart, calendar view visualisation. Diagram, graph

Oct 25, 2022
Comments
  • DOM-diff

    DOM-diff

    Someone https://github.com/marcelklehr quoted DOM-diff that is no longer within your repos (am I wrong?). I am trying to build a support for history in Geogebra (to give some evidence whenever you use GGB in activities with auto grading in Moodle). GGB stores its internal status in a large XML and snapshotting it at every student's step to get some evidence, for all the students in all classes for the whole school year, will sink Moodle MySQL DB. At every step few things changes so storing DOM diffs will be a game changer. When some evidence/explanation is required for a bad note teacher will show the history created applying deltas and showing the student's process. Surprisingly Stackoverflow do not contain any hint for diff-ing XMLs. Obviously I can utter a bunch of recursive js lines that can do the job but I do not like to reinvent the wheel. To fit in GGB Javascript it must be a single file js. Can you help?

    opened by TWINGSISTER 1
  • Some additional resources

    Some additional resources

    Hi,

    Thanks for the mention! I would like to suggest other resources you may like to include:

    https://explorabl.es

    https://mathcell.org

    https://integral-calculator.com

    https://derivative-calculator.net

    https://polyhedra.tessera.li

    http://g.ivank.net

    https://euclidea.xyz

    http://gratrix.net/polyhedra/webgl/

    https://www.dynamicmath.xyz/

    Kind regards

    opened by jcponce 1
  • Adding more examples & one more library

    Adding more examples & one more library

    I love this project, thanks for starting it. In case I can interest you, there are many mathematical texts with interactive visualizations on my website (completely FOSS: https://quoteme.github.io/projects). Some highlights are top2man, an interactive visualization of all topological compact, non-empty, real 2 manifolds, a visual explanation of e^it = cos(t)+isin(t), and my seminar on rational points on elliptic curves

    Some tool I used which might be of interest and which were not mentioned before is sage-math with its awesome to-THREE.js export function. This allows for much more powerful 3d-plots. Also impress.js is nice to have

    opened by Quoteme 1
  • RactivePlayer -> Liqvid

    RactivePlayer -> Liqvid

    RactivePlayer has been renamed to Liqvid (even though it still says RactivePlayer in the tutorials, I'll get around to updating those…)

    Thanks for including it!

    opened by ysulyma 0
Owner
Nikola Ubavić
Nikola Ubavić
JavaScript toolkit for creating interactive real-time graphs

Rickshaw Rickshaw is a JavaScript toolkit for creating interactive time series graphs, developed at Shutterstock Table of Contents Getting Started Ins

Shutterstock 6.5k Dec 28, 2022
A platform for creating interactive data visualizations

owid-grapher This is the project we use at Our World in Data to create embeddable visualizations like this one (click for interactive): ⚠️ This projec

Our World in Data 1.1k Jan 4, 2023
A repostory of samples, which demonstrates, how to use the 'Power Tools' extension for Visual Studio Code.

vscode-powertools-samples A repository of samples, which demonstrates, how to use the Power Tools extension for Visual Studio Code. Apps data-url-conv

e.GO Mobile 7 Feb 3, 2022
A Joplin plugin to provide a set of tools like recent notes, shortcuts, scratchpad, and .... in a single sidebar.

Joplin DDDot DDDot is a Joplin plugin to provide a set of tools like recent notes, shortcuts, scratchpad, and .... in a single sidebar. Main Features:

Ben Lau 9 Nov 1, 2022
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 9, 2023
📊 A highly interactive data-driven visualization grammar for statistical charts.

English | 简体中文 G2 A highly interactive data-driven visualization grammar for statistical charts. Website • Tutorial Docs • Blog • G2Plot G2 is a visua

AntV team 11.5k Dec 30, 2022
:dango: An interactive and responsive charting library

English | 简体中文 G2Plot A charting library based on the Grammar of Graphics. G2Plot is an interactive and responsive charting library. Based on the gram

AntV team 2.3k Dec 30, 2022
vizflow is an ES6 interactive visualization engine

Vizflow vizflow.js - a render-loop library written using EcmaScript.6 (ES6) with no other external dependencies. Vizflow is a relatively small library

Vizflow 332 Oct 27, 2022
Interactive visualizations of time series using JavaScript and the HTML canvas tag

dygraphs JavaScript charting library The dygraphs JavaScript library produces interactive, zoomable charts of time series: Learn more about it at dygr

Dan Vanderkam 3k Jan 3, 2023
📱📈An elegant, interactive and flexible charting library for mobile.

中文 README F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based, and is also compatible with Node.js, Weex an

AntV team 7.8k Dec 31, 2022