Creating a Logarithm Scale with Min, Max and Discrete "steps" - javascript

I'm building a scale for generating colors for a map, where various ranges of numbers correspond to colors. In the scale below, the a, b, and c values (along with the min and max) form "steps" or "buckets" corresponding to colors. Anything between -1 and min will be colored "#ffeda0 in this example, and anything between min and a will be colored differently:
return [
"#e7e9e9",
-1,
"#ffeda0",
min,
"#fed976",
a
"#feb24c",
b
"#fd8d3c",
c
"#fc4e2a",
max
"#e31a1c"
];
This scale will always start an a minimum value, called min, and will end at a maximum value, max. I've currently got a simple linear scale like this:
const min = Math.min(data);
const range = Math.max(data) - min;
const step = range / 4;
return [
"#e7e9e9",
-1,
"#ffeda0",
min,
"#fed976",
min + step,
"#feb24c",
min + step * 2,
"#fd8d3c",
min + step * 3,
"#fc4e2a",
max,
"#e31a1c"
];
How could one write a function that, given a minimum, maximum, and the number of steps in a scale (in this case three) output the correct numbers for a logarithmic scale?

A logarithmic scale is linear in its logarithms. So:
const min = Math.min(data);
const max = Math.max(data);
const logmin = Math.log(min);
const logmax = Math.log(max);
const logrange = logmax - logmin;
const logstep = logrange / 4;
Now where the linear scale has
value = min + n * step;
the logarithmic scale has:
value = Math.exp(logmin + n * logstep);
This will work only if both min and max are positive, because you cannot take the logarithm of zero or a negative number and bcause in logarithmic scale, each value has a constant positive factor to the previous one. You can make this work for negative min and max by adjusting the signs.
You can do the calculations in other bases, for example 10:
const logmin = Math.log10(min);
const logmax = Math.log10(max);
value = Math.pow(10, logmin + n * logstep);
Alternatively, you can find the common factor from one step to the next by taking the n-th root of the quotient of the min and max values:
const min = Math.min(data);
const max = Math.max(data);
const fact = Math.pow(max / min, 1.0 / 4.0);
The values are then found by repeated multiplication:
value = prev_value * fact
or
value = xmin * Math.pow(fact, n);
Both methods might yield "untidy" numbers even if the scale should have nice round numbers, because the logarithms and n-th roots could produce inaccurate floating-point results. You might get better results if you pick a round factor and adjust your min/max values.

Related

Figuring out the value for PI

Let's say I have a function called bars()
bars () {
const bars = []
for (let i = 0; i < this.numberOfBars; i++) {
bars.push(Math.sqrt(this.numberOfBars * this.numberOfBars - i * i))
}
return bars
}
If I'm reducing the bars array to approximate PI, what should be on the right side of the arrow function?
PI = bars().reduce((a, b) =>
I tried adding the values and dividing by the number of bars, but I'm not getting anywhere near the approximation of Pi. I feel like there's a simple trick that I'm missing.
Your funcion seems to list lengths of "bars" in a quarter of a circle, so we have to add them all up (to have the area of the quarter of a circle), then multiply by 4 (because there is 4 quarter) and the divide by this.numberOfBars ^ 2 because area = π * r^2, but like we have to know the radius, it is better using a pure function :
// Your function rewritten as a pure one
const bars = numberOfBars => {
const bars = []
for (let i = 0; i < numberOfBars; i++) {
bars.push(Math.sqrt(numberOfBars * numberOfBars - i * i))
}
return bars
}
// Here we take 1000 bars as an example but in your case you replace it by this.numberOfBars
// Sum them all up, multiply by 4, divide by the square of the radius
const PI = bars(1000).reduce((g, c) => g + c) * 4 / Math.pow(1000, 2)
console.log(PI)
/** Approximates PI using geometry
* You get a better approximation using more bars and a smaller step size
*/
function approximatePI(numberOfBars, stepSize) {
const radius = numberOfBars * stepSize;
// Generate bars (areas of points on quarter circle)
let bars = [];
// You can think of i as some point along the x-axis
for (let i = 0; i < radius; i += stepSize) {
let height = Math.sqrt(radius*radius - i*i)
bars.push(height * stepSize);
}
// Add up all the areas of the bars
// (This is approximately the area of a quarter circle if stepSize is small enough)
const quarterArea = bars.reduce((a, b) => a + b);
// Calculate PI using area of circle formula
const PI = 4 * quarterArea / (radius*radius)
return PI;
}
console.log(`PI is approximately ${approximatePI(100_000, 0.001)}`);
There is no reason to push all terms to an array, then to reduce the array by addition. Just use an accumulator variable and add all terms to it.
Notice that the computation becomes less and less accurate the closer you get to the end of the radius. If you sum to half of the radius, you obtain r²(3√3+π)/24, from which you can draw π.
(Though in any case, this is one of the worst methods to evaluate π.)

How to calculate percentage of width from value between min and max numbers?

I am struggling with simple problem. What is elegant way of achieving this.
I have 2 values minimum and maximum which can be positive or negative and a third value which is between them. Now I want to calculate position(percentage) of other given number, which in my case is the width of element.
For example here I want to find what is position in the range 0-200 that represents value -10 in range -500 to 600 ?
var min = -500;
var max = 600;
var value = -10;
var width = 200;
var positionInWidth = ???;
You can one-liner this but let's do this in a few steps to see how it works:
// first we get the total range
var length = max - min; // 1100
// then we offset the position by the start position
var positionInLength = value - min; // 490
// now we get the percent through the value is in the position
var valuePercent = positionInLength / length;
// or a one liner (value - min) / (max - min);
// Then finally, apply `width percentage`
const positionInWidth = width * valuePercent;
Or as a one liner:
const positionInWidth = width * ((value - min) / (max - min));
So if I understand the question correctly, you are looking for the so called map function. If that's the case, the implementation is as given:
function map(input, inMin, inMax, outMin, outMax) {
return (input - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
}
In your scenario outMin = 0:
console.log(map(-10, -500, 600, 0, 200)); // === 89.0909090909091

Getting two points on the edges of a rectangle

I have a rectangle and would like to:
Get a random point on one (any) of the sides.
Get a random point on one (except for the previously picked) side.
My initial approach is to create arrays for each possible side.
var arr:Array = [[{x:0,y:0}, // Top
{x:width,y:0}], //
[{x:width,y:0}, // Right
{x:width,y:height}], //
[{x:width,y:height}, // Bottom
{x:0,y:height}], //
[{x:0,y:height}, // Left
{x:0,y:0}]]; //
Then, I get the sides.
rand is an instance of Rand and has the methods:
.next() which provides a random number between 0 and 1
.between(x,y) which returns a random number between x and y.
var firstSide:Array = arr[rand.next() * arr.length];
var secondSide:Array;
do {
secondSide = arr[rand.next() * arr.length];
} while(secondSide.equals(firstSide));
Finally, I calculate my points.
var pointOnFirstSide:Object = {x:rand.between(firstSide[0].x, firstSide[1].x),
y:rand.between(firstSide[0].y, firstSide[1].y};
var pointOnSecondSide:Object = {x:rand.between(secondSide[0].x, secondSide[1].x),
y:rand.between(secondSide[0].y, secondSide[1].y};
I don't think this is the most efficient way to solve this.
How would you do it?
Assuming we have the following interfaces and types:
interface Rand {
next(): number;
between(x: number, y: number): number;
}
interface Point {
x: number;
y: number;
}
type PointPair = readonly [Point, Point];
and taking you at your word in the comment that the procedure is: first randomly pick two sides, and then pick random points on those sides... first let's see what's involved in picking two sides at random:
const s1 = Math.floor(rand.between(0, arr.length));
const s2 = (Math.floor(rand.between(1, arr.length)) + s1) % arr.length;
s1 and s2 represent the indices of arr that we are choosing. The first one chooses a whole number between 0 and one less than the length of the array. We do this by picking a real number (okay, floating point number, whatever) between 0 and the length of the array, and then taking the floor of that real number. Since the length is 4, what we are doing is picking a real number uniformly between 0 and 4. One quarter of those numbers are between 0 and 1, another quarter between 1 and 2, another quarter between 2 and 3, and the last quarter are between 3 and 4. That means you have a 25% chance of choosing each of 0, 1, 2 and 3. (The chance of choosing 4 is essentially 0, or perhaps exactly 0 if rand is implemented in the normal way which excludes the upper bound).
For s2 we now pick a number uniformly between 1 and the length of the array. In this case, we are picking 1, 2, or 3 with a 33% chance each. We add that number to s1 and then take the remainder when dividing by 4. Think of what we are doing as starting on the first side s1, and then moving either 1, 2, or 3 sides (say) clockwise to pick the next side. This completely eliminates the possibility of choosing the same side twice.
Now let's see what's involved in randomly picking a point on a line segment (which can be defined as a PointPair, corresponding to the two ends p1 and p2 of the line segment) given a Rand instance:
function randomPointOnSide([p1, p2]: PointPair, rand: Rand): Point {
const frac = rand.next(); // between 0 and 1
return { x: (p2.x - p1.x) * frac + p1.x, y: (p2.y - p1.y) * frac + p1.y };
}
Here what we do is pick a single random number frac, representing how far along the way from p1 to p2 we want to go. If frac is 0, we pick p1. If frac is 1, we pick p2. If frac is 0.5, we pick halfway between p1 and p2. The general formula for this is a linear interpolation between p1 and p2 given frac.
Hopefully between the two of those, you can implement the algorithm you're looking for. Good luck!
Link to code
jcalz already gave an excellent answer. Here is an alternate version for the variant I asked about in the comments: When you want your points uniformly chosen over two sides of the perimeter, so that if your w : h ratio was 4 : 1, the first point is four times as likely to lie on a horizontal side as a vertical one. (This means that the chance of hitting two opposite long sides is 24/45; two opposite short side, 1/45; and one of each, 20/45 -- by a simple but slightly tedious calculation.)
const rand = {
next: () => Math. random (),
between: (lo, hi) => lo + (hi - lo) * Math .random (),
}
const vertices = (w, h) => [ {x: 0, y: h}, {x: w, y: h}, {x: w, y: 0}, {x: 0, y: 0} ]
const edges = ([v1, v2, v3, v4]) => [ [v1, v2], [v2, v3], [v3, v4], [v4, v1] ]
const randomPoint = ([v1, v2], rand) => ({
x: v1 .x + rand .next () * (v2 .x - v1 .x),
y: v1 .y + rand .next () * (v2 .y - v1 .y),
})
const getIndex = (w, h, x) => x < w ? 0 : x < w + h ? 1 : x < w + h + w ? 2 : 3
const twoPoints = (w, h, rand) => {
const es = edges (vertices (w, h) )
const perimeter = 2 * w + 2 * h
const r1 = rand .between (0, perimeter)
const idx1 = getIndex (w, h, r1)
const r2 = (
rand. between (0, perimeter - (idx1 % 2 == 0 ? w : h)) +
Math .ceil ((idx1 + 1) / 2) * w + Math .floor ((idx1 + 1) / 2) * h
) % perimeter
const idx2 = getIndex (w, h, r2)
return {p1: randomPoint (es [idx1], rand), p2: randomPoint (es [idx2], rand)}
}
console .log (
// Ten random pairs on rectangle with width 5 and height 2
Array (10) .fill () .map (() => twoPoints (5, 2, rand))
)
The only complicated bit in there is the calculation of r2. We calculate a random number between 0 and the total length of the remaining three sides, by adding all four sides together and subtracting off the length of the current side, width if idx is even, height if it's odd. Then we add it to the total length of the sides up to and including the index (where the ceil and floor calls simply count the number of horizontal and vertical sides, these values multiplied by the width and height, respectively, and added together) and finally take a floating-point modulus of the result with the perimeter. This is the same technique as in jcalz's answer, but made more complex by dealing with side lengths rather than simple counts.
I didn't make rand an instance of any class or interface, and in fact didn't do any Typescript here, but you can add that yourself easily enough.

Non-uniform (biased towards a value) random numbers in JavaScript

I am aware that random integers can be generated in JavaScript like this:
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
But what I want is a set of random numbers that are biased towards a specific value.
As an example, if my specific center value is 200, I want a set of random numbers that has a large range, but mostly around 200. Hopefully there will be a function like
biasedRandom(center, biasedness)
It sounds like a Gaussian distribution might be about right here.
This stackoverflow post describes how to produce something that is Gaussian in shape. We can then scale and shift the distribution by two factors;
The mean (200 in this case) which is where the distribution is centred
The variance which gives control over the width of the distribution
I have included a histogram of the generated numbers (using plotly) in my example so you can easily see how varying these two parameters v and mean affects the numbers generated. In your real code you would not need to include the plotly library.
// Standard Normal variate using Box-Muller transform.
function randn_bm() {
var u = 0, v = 0;
while(u === 0) u = Math.random(); //Converting [0,1) to (0,1)
while(v === 0) v = Math.random();
return Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v );
}
//generate array
// number of points
let n = 50;
// variance factor
let v = 1;
// mean
let mean = 200;
let numbers = []
for (let i=0; i<n;i++){
numbers.push(randn_bm())
}
// scale and shift
numbers = numbers.map( function (number){ return number*v + mean})
// THIS PURELY FOR PLOTTING
var trace = {
x: numbers,
type: 'histogram',
};
var data = [trace];
Plotly.newPlot('myDiv', data);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>

Generating labels for a chart

I'm trying to find an algorithm for generating a Y axis for a chart engine I'm writing and am at the pulling out hair stage.
Searching around yields various solutions however I'm struggling to find one that caters for all data ranges.
Here's what I've got so far:
// Raise the max and lower the min so that we get a prettier looking chart.
var tickRangeMinMax = maxValue - minValue;
var min = tickRangeMinMax * Math.round(minValue / tickRangeMinMax);
var max = tickRangeMinMax * Math.round(1 + (maxValue / tickRangeMinMax));
This gives me a new range for which I'd like to generate a Y axis.
I calculate the distance between each YAxis label as follows:
var ticks = tickRange(min, max, labelCount);
function tickRange(minVal, maxVal, tickCount) {
var range = maxVal - minVal;
var unRoundedTicksSize = range / (tickCount - 1);
var x = Math.ceil(log10(unRoundedTicksSize) - 1);
var pow10X = Math.pow(10, x);
var roundedTickRange = Math.ceil(unRoundedTicksSize / pow10X) * pow10X;
return roundedTickRange;
}
I've also tried calculating the ticks using the much simpler algorithm:
return (max - min) / labelCount
The former method works well with small ranges such as 23 -> 200 however neither of these methods work well for me when I've got a range of say, 0 -> 3000.
In the case of 0 -> 3000 I end up with negative values in some of my labels.
I add labels to the label collection by looping over the labelCount, in my case it's 5, and subtracting the tick range from the previous label value. I start with the max value.
For reference, same as yours only in Python (don't speak JS):
import math
def ticks (low, high, labels):
nlabels = len(labels)
tick = (high - low) / (nlabels - 1)
x = math.floor(math.log10(tick))
pow10x = math.pow(10,x)
tick = int(math.ceil(tick/pow10x)*pow10x)
return zip (range(low,high+tick,tick), labels)
print (ticks (0, 225, ['a', 'b', 'c', 'd', 'e']))
PS. maybe floor on the logarithm is better

Categories