This article is interactive meaning that you should open up developer tools and test the code straight in the console as you read. You don’t need to understand every code line but it is a big advantage that you try the code so you develop an understanding of how it works so you can use it in your own projects. the article is based on Statistics every writer should know by Robert Niles and aims to add functions for every statistical method mentioned if possible. Currently this article is in progress and not complete.
If you want to present correct data you need to know a bit of coding and a bit of statistics. In this article we will practice both. Open up developer tools right away (Win: F12 or ctrl + shift + i Mac: Cmd + shift + i) and try the following examples in the console. By ‘plain’ javascript I mean that we will not use any javascript library such as d3.js. Some libraries might have built in methods for statistical operations but there is a lot to win by understanding what is going on.
Mean
The mean can also be referred to as the average. You get the mean by dividing the sum of all values in the dataset by the number of values in the dataset. In javascript we express the mean like this:
let theData = [4,7,2,1,7,4,32,5,7,8,21];
function getMean(){
//Loop through the dataset
let sumData = 0;
for (var i = 0; i < theData.length; i++){
//Add each data point to sumData
sumData+=theData[i];
}
return (sumData/theData.length);
}
getMean();You can use the function above in your project with very small modifications. You can make a input parameter in this function where you send in any array and get the mean of that array in the return statement. This way you can make a dynamic function that can be reused for any array. The data in the array must be of type number. If any numerical value in your dataset is wrapped in ” ” you need to convert the datatype tu number. If you are stuck here you have to Google how to convert strings to numbers for your dataset before you proceed. If you don’t know data types you should start by reading this article on w3schools.
//calculates and returns the mean of this dataset
return (sumData/myData.length);Median
The median is the value in the middle of the dataset if the the dataset is sorted by value. The following section goes through the method for getting the median in detail. If you just want to grab the code scroll down and copy paste away.
First let’s look at sorting the array from above. If you have entered an array in the console you don’t need to do it again, otherwise just grab the array from above and type or paste it in the console. Once that is done we will sort the array. Now, about sorting. The basic sort method in javascript does an alphabetical sort and this is important. Consider the followin array:
myNumbers = [10, 2, 3, 100, 1];
Sorting this array results in:
myNumbers.sort();
//returns [1, 10, 100, 2, 3]That’s not right?
Ok, like I wrote earlier this is alphabetical sorting so it sorts the values based on the first digit. If this is done with numbers things can go very wrong. Don’t let this error remain in your code ever! it can easily slip under the radar during development and make a big mess much later. Get rid of it ASAP!
Here is the javascript way of sorting numerical values:
myNumbers.sort(function(a, b){return b-a});
//returns[100, 10, 3, 2, 1]This sorts the array numerically and with descending values. You can read more about how this sort function works here. Keep reading to sort your array.
If you want ascending values rather than descending reverse the array using the reverse method.
//The original array
[100, 10, 3, 2, 1]
myNumbers.reverse();
//Reversed array:
[1, 2, 3, 10, 100]The aim is still to find the median. As long as the values are sorted it doesn’t matter if the array is descending or ascending.
If the array has an odd amount of numbers like in myNumbers 3 should be the median. The index of the first value is zero,but the length of the same array returns the total amount of elements in the array. So while the array length of myNumbers is five, the index we need to use to get the last element is four. That means that the following code will return the median of an array with an odd amount of values.
let mid = ((myNumbers.length - 1) / 2);
let median = myNumbers[mid];This returns 3 so everything is ok, as long as we have an array with an odd amount of values this will return the median. Now consider the following array with six values:
let yourNumbers = [1,3,5,7,8,9];This array is already ascending so no need to sort. The correct way to get the median of a dataset with an even amount of values is to get the mean of the two values in the middle. So with the yourNumbers array we have to write some code that gets the mean of of the numbers 5 and 7. For fun we can try the previous method just to watch it fail.
//This will not give the median
median = yourNumbers[(myNumbers.length- 1) / 2];This returns 5 so it is not good enough. Take a moment to watch the code below. It takes two values out of the yourNumbers array. The first value it picks is the same as in the code above. The second value is the element that follows in the array. The code sums these two values and divides them by two.
let mid = ((myNumbers.length - 1) / 2);
median = (yourNumbers[mid] + yourNumbers[mid + 1]) / 2;And the code returns 6 as it should.
We have two codes, one that works for odd amount of values and one that works for even amount of values. We have to check if an array has odd or even amount of values in order to run the right code for the dataset. This can be done by using the modulo operator. It is referred to on w3schools as the modulus and also the remainder. The modulo operator will return the remainder (whats left) after a division when the result of the division are only integers. Try the following codes to see it in action.
let mymodulo = myNumbers.length % 2;This will divide the amount of array elements in two and then return what is left after. If you divide even numbers such as 4, 6 or 18 with two there will not be a remainder after the modul operation and we know we have an even number. If you divide odd numbers sucha as 5, 7 or 19 by 2 the modulo operation will return 1. So this
return myNumbers.length % 2 == 0 ? (myNumbers[mid - 1] + myNumbers[mid]) / 2 : myNumbers[mid];The question mark in the code above is the conditional operator. The condition in this case is to check if the remainder of a division is zero. If it is zero it runs the code immideately after the ‘?’. If the reminder is not zero the length if the array must be an odd number and in that case the code after the ‘:’ will run instead. The two outcomes are separated with a colon.
let a=2;
console.log(a==2 ? "A is two" : "A is not two");//returns 'A is two'.Test the code and then change the value of a to 1 and try it again to see how it works.
a=1;
console.log(a==2 ? "A is two" : "A is not two");//returns 'A is not two'.The final function for the median:
function getMedian(){
let mid = Math.floor((theData.length - 1) / 2);
let median = theData.length % 2 !== 0 ? theData[mid].val1 : ((theData[mid].val1 +
theData[mid+1].val1) / 2);
return median;
} You can now run this function with both arrays and check the result:
getMedian(myNumbers);
getMedian(yourNumbers);Mode
The mode is simply the value that appears the most in any dataset. In the following dataset the mode is 2.
myPopularNumbers = [2,6,5,8,2,3,4,9,2,4,0,1,2];The mode is not a very useful number. Check out what Robert Niles has to say about mode in his summary ‘Statistics every writer should know’. As a result a code for calculating the mode has not been a priority in this article yet.
Percent
Understanding percent is key to understand a lot of the numbers that pop up in news stories. Percentages are used in different ways. Lets go through the most common ones and try them with some javascript.
First out is percentage as a part of a whole. The math for this is simply dividing the value byt the sum of the entire dataset and then multiplying by a hudred. The percentage symbol is not used for this purpose. The percentage symbol is used as the modulo operator in javascript. Here is how we express percentage of a whole in javascript and return it as a string with a ‘%’ symbol behind it, because lathough we don’t use it as an operator in code, we still use it in plain text. First lets establish the data:
let myData = [12,234,9,78,43,27,14,76,99,118];
let myVal = 118;Here is the function. This is the juicy bit if you just want to copy paste a function that returns a percentage. Please note that this returns a string and also that the percentage number is rounded down to a decimal value with two decimals after the decimal point. The part that does the rounding is the .toFixed(2) method. the 2 represents the number of decimal values after the decimal point.
let percentage = function(val, arr){
//This function calculates the percentage of one datapoint out of an array of several values.
let mySum = arr.reduce((a, b) => a + b, 0);
return ((100 * (val/mySum)).toFixed(2)+"%");
}To run the function we feed it the array and the value we established further up:
percentage(myVal, myData);Percentage change
This is a bit different from the previous case. The change in percent is calculated by subtracting the old value from the new value, and then dividing by the old value. That’s pretty easy to code.
function percentChange(oldVal, newVal){
return((((newVal - oldVal)/oldVal)*100).toFixed(2)+"%");
}
percentChange(80,97);
"21.25%"SO a few words on what is going on above. The old value is subtracted from the new Value and then divided by the oldvalue. It is then multiplied by a hundred to make it a percentage value, and then a little string ‘%’ is added at the end. If you want to have a numerical output and not a string remove the +”%” at the end of the return statement.
S
Per capita and rates
Per capita literally means ‘per head’ in latin and is a way to compare values of different sizes by converting them to rates. It is common to change the rate to a proportion of 100.000 people. Here is how to do that with javascript.
murdersA = 64;
murdersB = 34;
populationA = 575000;
populationB = 183000;
function getPerCapita(val, tot){
return((val/tot) * 100000);
}For the value above it might be an idea to use the .toFixed(2) method to get rid of osme decimals.
This is as far as this article has come. If you want to read more about statistics keep reading Statistics every writer should know by Robert Niles. The following methods might get som coded solutions in the future.
Standard deviation and normal distribution
Survey sample size and margin of error
Regression analysis
Data analysis
Statistical tests