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 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 | Most economists push the idea that growth in everything is the way to go - economies, populations, energy consumption. However some countries have managed to reduce their overall energy consumption while growing their populations and their economies. These charts show it can be done. |
| Energy Intensity by country | Contains interactive charts showing how efficient various countries are at using energy for producing economic output. |
| Achieving Page Speed with a Data-heavy Visualisation (slides) | These are the slides for a talk I gave for Singapore's TalkJS meetup, where I demonstrate how a Tableau Public visualisation of the energy consumption data can be speeded up considerably. |
SVGMath Demos | |
| SVGMath demo | SVGMath is fast, beautiful math on the Web using SVGs and no javascript. |
| SVGMath overview | An explanation of the process used in creating SVGMath, and some comparison statistics |
| Wrapping wide equations in SVGMath | Wrapping wide equations in SVGMath. |
| 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 by delivering SVGs via img tags. |
| 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. |
JSXGraph Demos | |
| Slides: Mobile-friendly JSXGraph | These are the slides I used for the talk I gave at the JSXGtaph Conference in October 2020, where I tried to convince everyone to develop their apps such that they are mobile-friendly. |
| Examples: Mobile-friendly JSXGraph | This page has several examples of how to go about incorporating JSXGraph in a phone-friendly fashion, allowing for resizing and scrolling. |
| Smooth animations - JSXGraph conference 2022 slides | Slides for the conference talk on achieving smooth animations in JSXGraph. |
| 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-firendly and fast |
| Reducing SVG file size in JSXGraph | JSXGraph animations are slow in part because there are a lot of (often unseen) elements that need to move around as well. Here are some thoughts about how to reduce unnecessary elements and characters. |
| MP3 and Text-to-speech in JSXGraph | This is an example of how to add an MP3 player and a text-to-speech facility to a JSXGraph board. |
KaTeX Demos | |
| KaTeX-DB demo | Fast math using KaTeX output via a database, rather than with javascript. |
| Wrapping wide KaTeX equations | A KaTeX user asked for a way to wrap wide equations on a phone. |
| KaTeX - cancelTo proposal | This arose from a request by a KaTeX user for a /cancelTo option |
| Implementing label, tag and eqref in KaTeX | Many KaTeX users have asked for a way to implement \eqref and \label in KaTeX the KaTeX environment. |
| Implementing label, tag and eqref in KaTeX using a macro approach | Many KaTeX users have asked for a way to implement \eqref and \label in KaTeX the KaTeX environment. Here's one way to go about it. |
| Fixing Overlaps for Large Absolute Value Signs in KaTeX | Here are two possible solutions for the problem of overlaps in large absolute value signs in KaTeX. |
MathJax Demos | |
| MathJax - coloring sparse arrays | This is a suggestion for how to color sparse arrays in MathJax. It arose from a request by a user. |
| Speed up MathJax slow loading time | Some suggestions on how to speed up a large page containing MathJax. It arose from a request by a user. |
Geogebra Demos | |
| 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. |