Published
Edited
Dec 13, 2018
10 stars
Algebra = require("ganja.js")
Algebra(2, 0, 1, () => {
// 1e1 is the dimension (Y)
// Change to 1e2 to make this a horizontal line
return this.graph([1e1])
})
Algebra(2, 0, 1, () => {
// if you think of a line equation like
// a = mx + b
// then this makes some sense: y = 0.5 * x
// change 0.5 to different things to change the slope
return this.graph([1e1 * 0.5 + 1e2])
})
Algebra(2, 0, 1, () => {
// things in the graph array get drawn.
// the array can contain shapes, represented by these algebra-like
// expressions, but also styling instructions.
// An entry can be:
// algebra: a shape
// 0x00ff00: a color, represented as hex
// 'a string': a label.
// the ordering works like:
// define a color before the things you want to color.
// define a label after the things you want to label.
return this.graph([1e1 * 0.5 + 1e2, 0xff00ff, 1e1 * 1 + 1e2, 'second line'])
})
Algebra(2, 0, 1, () => {
// you can do algebra on shapes. here i use the ^ operator
// to find the intersection of the two lines.
return this.graph([1e1 * 0.5 + 1e2, 1e1 * 1 + 1e2, 1e1 * 0.5 + 1e2 ^ 1e1 * 1 + 1e2])
})
Algebra(2, 0, 1, () => {
// really note that GANJA MATH IS NOT JAVASCRIPT. for example,
//
// 1e12 * 1 + 1e02 * 2 + 1e01
// and
// 1e12 * 1 + 1e02 * 2+ 1e01
//
// Do precisely the same thing in JavaScript, but _very_ different
// things in ganja.
//
// Anyway, here’s a point.
return this.graph([1e12 - 1e01 * 0 - 1e02 * 0], { grid: true })
})
Algebra(2, 0, 1, () => {
// In this algebra, an array of points becomes a shaded shape.
return this.graph([
1e12 - 1e01 * 0 - 1e02 * 0,
1e12 - 1e01 * 1 - 1e02 * 0,
1e12 - 1e01 * 1 - 1e02 * 1,
0x55ff22,
[
1e12 - 1e01 * 0 - 1e02 * 0,
1e12 - 1e01 * 1 - 1e02 * 0,
1e12 - 1e01 * 1 - 1e02 * 1
]
], { grid: true })
})
// If you assign a geometry to a variable, it becomes draggable,
// even if you drag a point and that point is also part of what
// makes a shape. Here, for example, you can drag A and the
// triangle updates.
Algebra(2, 0, 1, () => {
let A = 1e12 - 1e01 * 0 - 1e02 * 0;
return this.graph([
A,
'A',
1e12 - 1e01 * 1 - 1e02 * 0,
1e12 - 1e01 * 1 - 1e02 * 1,
0x55ff22,
[
A,
1e12 - 1e01 * 1 - 1e02 * 0,
1e12 - 1e01 * 1 - 1e02 * 1
]
], { grid: true })
})
// Oddly, it doesn't update geometries that reference the geometry,
// just the geometry 'verbatim'
Algebra(2, 0, 1, () => {
let A = 1e12 - 1e01 * 0 - 1e02 * 0;
return this.graph([
A,
'A',
A + 1e12 - 1e01 * 1 - 1e02 * 0,
A + 1e12 - 1e01 * 1 - 1e02 * 1,
0x55ff22,
[
A,
A + 1e12 - 1e01 * 1 - 1e02 * 0,
A + 1e12 - 1e01 * 1 - 1e02 * 1,
]
], { grid: true })
})
// Oddly, it doesn't update geometries that reference the geometry,
// just the geometry 'verbatim'
Algebra(2, 0, 1, () => {
let A = 1e12 - 1e01 * 0 - 1e02 * 0;
let B = A + 1e12 - 1e01 * 1 - 1e02 * 0;
let C = A + 1e12 - 1e01 * 1 - 1e02 * 1;
return this.graph([
A,
'A',
B,
C,
0x55ff22,
[
A,
B,
C,
]
], { grid: true })
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.