npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@zaba-web/formula_tor

v1.0.7

Published

Simple library that renders mathematical expressions as visualized formulas.

Downloads

20

Readme

Welcome

formula_tor is a small JS library that visualizes mathematical expressions into the HTML markup. Live demo.

Example

Install & Setup

If your project uses NPM:

npm i @zaba-web/formula_tor

and then in your project file:

import Formulator from '@zaba-web/formula_tor'

Otherwise, you can use CDN:

<script src='https://cdn.jsdelivr.net/npm/@zaba-web/formula_tor/dist/formulator.js'></script>

Then, if you want to save visualized markup somewhere and use it later, you need to add file with styles on that page:

import '@zaba-web/formula_tor/dist/style.css'

Or with CDN:

<link refl='stylesheet' href='https://cdn.jsdelivr.net/npm/@zaba-web/formula_tor/dist/style.css'>

Usage

Getting started

First of all, we need to create an HTML element that we will use as a container for formula.

<div class='formula-container'></div>

Then we need to create instance of Formulator class. Formulator's constructor requires container (HTML element) as the argument.

const containerElement = document.querySelector('.formula-container')
const formulator = new Formulator(containerElement)

That's it. Now we can visualize formulas by call formulator.visualize(expressionString) method.

For example, formulator.visualize('x + 1/3') will produce following:

Example 2

Usage principles

There are several types of parts from which we build expression:

  • Regular Strings

Regular string is a character or sequence of characters that are not operators or functions (see Operators table and Functions table).

Example: 10x + 4 - 8 = 15

(Note: formula_tor's visualizer considers +, -, =, *, <, > and | as regular strings because it doest not chagne a view of formula in terms of markup)

  • Operators

Operators are reserved characters (see Operators table) that works with operands. There are unary operators that work with single operand and binary that work with two respectively.

As an operand you can use arbitary expression. If this expression consists more than from one regular string or it is another operator or function, it should be wrapped in parentheses.

Exampe 1: 1/5 - binary operator / with two operands: 1 and 2. Both of them are regular string

Example 2: 1/(2+2*x) - in this example we use more than one regular string.

Example 3: 1/(2/5) - in this example we use another binary operator as an operand.

  • Functions

Functions are reserved words that work with arguments (see Functions table). Name of function begins with capital letter. Arguments should be written in parentheses, separated by coma (,) character.

To the function's arguments applied the same rules as for operands. If you intend to use function as an operand or argument of another function you should wrap it in parentheses.

Example 1: Root(x, 3)

Example 2: 1/(Root(x, 3))

Example 3: Root((1/3x), 3)

Example 4: Root((Root(2,3)),2)

  • Constants

There are several most common used math symbols that are factored as constants (see Constants table). Constant name should be written in capital letters.

  • Separation

Commonly, parts of the formula separates automatically. But if you are using two parts of formula without explicit seprator (Operators and +, -, =, *, <, >, (, ), | characters) you should separate it by hand using coma separator.

Example 1: DELTA, x

Example 1: 3, Root(4, 2)

Operatos table

| Operator | Description | Count of operands | Usage example | | ------------- | ---------------------- | ----------------- | ------------- | | ^ | Power operator | 1 | x^2 | | _ | Bottom index | 1 | x_i | | / | Division operator | 2 | 1/2 |

Functions table

| Function | Description | Count of agrumetns | Usage example | | -------------------------------- | ----------------------------------- | ------------------- | ------------------------------- | | Root(expr, nth_root) | Root construction visualization | 2 | Root(27, 3) | | Log(expr, base) | Log function | 2 | Log(x, 2) = 4 | | System2(expr1, expr2) | System of 2 equations/inequalities | 2 | System2((2+xy = 2), (y - x = 4)) | | System3(expr1, expr2, expr3) | System of 3 equations/inequalities | 3 | System3((2+xy = 2), (y - x = 4), (y - x = 4)) | | System4(expr1, expr2, expr3, expr4) | System of 4 equations/inequalities | 4 | System4((2+xy = 2), (y - x = 4), (y - x = 4), (y - x = 4))| | IndefInt(expr) | Indefinite Integral | 1 | IndefInt((1/dx)) | | DefInt(expr, from, to) | Definite Integral | 3 | DefInt((1/dx), 0, PI) | | IntLine(from, to) | Using in definite integral calculation | 2 | IntLine(0, 1) | | Lim(expr, variable, approaching) | Limit visualization | 3 | Lim((x^a,lnx), x, 0) | | Indexes(topIndexExpr, bottomIndexExpr) | Put two indexes togather | 2 | x, Indexes(2,i) | | Sum(expr, topExp, bottomExpr) | Visualize sum | 3 | Sum((x_i+2), m, (i=1)) | | Vec(expr) | Add vetor arrow to expression | 1 | Vec(A) |

Constants table

| Constant | Character | | ------------- | ---------- | | ALPHA | α | | BETA | β | | GAMMA | γ | | DELTA | Δ | | DELTASM | δ | | PI | π | | PHI | φ | | DEG | ° | | INFINITY | ∞ |