Mathematics and Statistics
These are various experiments I've been doing involving math and graphs on Web pages. The overall aim has been to create the quickest and best solution for mobile devices.
With a little work and planning, dramatic improvements in page load speed or phone-friendliness are possible.
Energy Consumption | |
|---|---|
| Energy consumption by fuel and country | Contains interactive charts showing how far we have to go to reduce fossil fuel usage. |
| Total Energy consumption | A data visualization showing energy consumption by country 1970 to 2020, with yearly totals and fuel source proportions. |
| Fossil fuel consumption percentages | A data visualization showing fossil fuel percentages in energy consumption by country 1970 to 2023. |
| Energy Intensity by country | Energy intensity for selected countries, 1970 to 2017 - data visualization. |
| Achieving Page Speed with a Data-heavy Visualisation (slides) | An explanation of the steps taken to replace Tableau Public's bloated, slow-to-load and phone-unfriendly presentation for a data rich page. |
SVGMath demos and experiments | |
| SVGMath demo | SVGMath is fast, beautiful math on the Web without javascript. |
| SVGMath overview | An explanation of the process used in creating SVGMath, and some comparison statistics |
| Wrapping wide equations in SVGMath | Some possible solutions for wrapping equations within the SVGMath environment. |
| Large Stackexchange math page rendered in SVGMath | Stackexchange uses MathJax to render math, but it is slow and produces a huge DOM. SVGMath addresses these issues. |
| Comparison of rendering speed SVGMath, KateX and MathJax | A video comparison of rendering speed SVGMath, KateX and MathJax of a large math page |
| ASCIIMath input, SVGMath output example | This page uses ASCIIMath for input, and is processed using SVGMath. |
ASVG demos and experiments | |
| ASVG Challenge Plots | This page uses ASVG, a lightweight SVG plotter to demonstrate how we can produce better plots for various challenging functions. |
| Desmos and Wolfram|Alpha - challenge plots | Desmos and Wolfram|Alpha are excellent graph plotters, but they trip up on certain functions when plotted at particular domains or ranges. |
| Javascript numbers - slides | JavaScript's 64-bit floating number system has many traps for the unwary. This talk demonstrates how to handle some of the issues using a math graphing facility as an example. |
JSXGraph demos and experiments | |
| jxgFiddle | A sandbox where you can create and share JSXGraph plots. |
| JSXGraph interactive demonstrator | Proposed demonstrator facility for JSXGraph example pages, and for the discussion forum. |
| Examples: Mobile-friendly JSXGraph | This page has several examples of how to incorporate JSXGraph in a phone-friendly fashion, allowing for resizing and scrolling. |
| Smooth animations - JSXGraph conference 2022 slides | Slides for the talk on achieving smooth animations in JSXGraph. |
| Slides: Mobile-friendly JSXGraph | The slides for the JSXGtaph Conference in October 2020, where I tried to convince everyone to develop mobile-friendly apps. |
| Animating points efficiently in JSXGraph | This shows a few different ways points can be animated in JSXGraph, and how best to achieve smooth animations. |
| Cellular Automaton (Game of Life) - Phone friendly and fast | This is an example presented by Leslie Wong at the JSXGraph Conference and I've tweaked it so it's mobile-friendly and fast |
| Reducing SVG file size in JSXGraph | Suggestions for reducing unnecessary elements and characters in JSXGraph. |
| KaTeX, MathJax and JSXGraph on the same page | Examples of how to have KaTeX and MathJax boards on the same page. |
| Segment approach to y = sin(e^x) with JSXGraph | Plotting functions like f(x) = sin(e^x) are a challenge for any Web-based plotter. Here's a method to ensure a near-perfect curve that doesn't leave out values. |
| Interval arithmetic approach to y = sin(e^x) with Functionplot | Here's another approach to plotting f(x) = sin(e^x) which uses interval arithmetic to ensure a smooth curve, with no gaps. |
| JSXGraph - challenge plots | JSXGraph is a versatile math function plotter, but struggles with demanding functions, especially if the domain is large, or when animations are involved. |
| MP3 and Text-to-speech in JSXGraph | Examples of how to add an MP3 player and a text-to-speech facility to a JSXGraph board. |
KaTeX demos and experiments | |
| KaTeX-DB demo | Fast math using KaTeX output via a database, rather than with javascript. |
| Wrapping wide KaTeX equations | Some possible solutions for wrapping equations within the KaTeX environment. |
| KaTeX - cancelTo proposal | This arose from a request by a KaTeX user for a /cancelTo option. |
| Implementing label, tag and eqref in KaTeX | A possible solution for implementing \label, \tag and \eqref in the KaTeX environment. |
| Implementing label, tag and eqref in KaTeX using a macro approach | A possible solution for implementing \label, \tag and \eqref in the KaTeX environment via a KaTeX macro. |
| Fixing Overlaps for Large Absolute Value Signs in KaTeX | Two possible solutions for the problem of overlaps in large absolute value signs in KaTeX. |
MathJax demos and experiments | |
| Speed up MathJax slow loading time | Some suggestions on how to speed up a large page containing MathJax |
| MathJax - coloring sparse arrays | This is a suggestion for how to color sparse arrays in MathJax, making them easier to read. |
| MathJax - set cursor position | This is a possible approach for the situation where we have a textarea with LaTeX and when we click on MathJax output, the cursor moves to the correct place. |
Temml demos and experiments | |
| Temml Kepler's Law demo | Large math page rendered by Temml as a comparison with MathJax and KaTeX. Content is derivation of Kepler's laws. |
| Large math page rendered by Temml | This is a very large page used to test the speed of various math libraries. This is Temml's output. |
| Temml autorender template | This is a "bare bones" template that will process any LaTeX math it finds on a HTML page using Temml. |
| Temml autorender options template | This page shows how to render math between $ signs, how to render specific parts of a page, and the effects of Temml.woff2 font. |
| Temml dynamic math template | This page shows how to add math dynamically to a page and have it rendered by Temml. |
Geogebra demos and experiments | |
| Mobile-friendly Geogebra example | This is an example of how to go about incorporating Geogebra in a phone-friendly fashion, allowing for resizing and scrolling. |