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

echarts-stat-fix

v1.1.2

Published

a statistical tool for ECharts

Downloads

6

Readme

ecStat

A statistical and data mining tool for ECharts. You can use it to analyze data and then visualize the results with ECharts, or just use it to process data.

It works both in node.js and in the browser.

Read this in other languages: English, 简体中文.

Installing

If you use npm, you can install it with:

 npm install echarts-stat

Otherwise, download this tool from dist directory:

<script src='./dist/ecStat.js'></script>
<script>

var result = ecStat.clustering.hierarchicalKMeans(data, clusterNumber, false);

</script>

API Reference

Histogram

A histogram is a graphical representation of the distribution of numerical data. It is an estimate of the probability distribution of a quantitative variable. It is a kind of bar graph. To construct a histogram, the first step is to "bin" the range of values - that is, divide the entire range of values into a series of intervals - and then count how many original sample values fall into each interval. The bins are usually specified as consecutive, non-overlapping intervals of a variable. Here the bins(intervals) must be adjacent, and are of equal size.

Syntax

var bins = ecStat.histogram(data, binMethod);
Parameter
  • data - Array<number>. Data samples of numbers.

    var data = [8.6, 8.8, 10.5, 10.7, 10.8, 11.0, ... ];
  • binMethod - string. There are four methods to calculate the number of bin, which are squareRoot, scott, freedmanDiaconis, and sturges. Of course, there is no "best" number of bin, and different bin size can reveal different feature of data.

    • squareRoot - This is the default method, which is also used by Excel histogram. Returns the number of bin according to Square-root choice:

      var bins = ecStat.histogram(data);
    • scott - Returns the number of bin according to Scott's normal reference Rule:

      var bins = ecStat.histogram(data, 'scott');
    • freedmanDiaconis - Returns the number of bin according to The Freedman-Diaconis rule:

      var bins = ecStat.histogram(data, 'freedmanDiaconis');
    • sturges - Returns the number of bin according to Sturges' formula:

      var bins = ecStat.histogram(data, 'sturges');
Return Value
  • bins - Object. Contain detailed messages of each bin and data used for ECharts to draw the histogram.
    • bins.bins - Array.<Object>. An array of bins, where each bin is an object, containing three attributes:
      • x0 - number. The lower bound of the bin (inclusive).
      • x1 - number. The upper bound of the bin (exclusive).
      • sample - Array.<number>. Containing the associated elements from the input data.
    • bins.data - Array.<Array.<number>>. Used for bar chart to draw the histogram, each bin data is an array not only containing the mean value of x0 and x1, but also the length of sample, which is the number of sample values in this bin.
    • bins.customData - Array.<Array<number>>. Used for custom chart to draw the histogram, each custom data is an array not only containing the x0 and x1, but also the length of sample, which is the number of sample values in this bin.

Examples

This example using ECharts custom chart to draw the histogram, which is the best type of chart we recommend.

<script src='https://cdn.bootcss.com/echarts/3.4.0/echarts.js'></script>
<script src='./dist/ecStat.js'></script>
<script>

var bins = ecStat.histogram(data);
var option = {
	...
	series: [{
		type: 'custom',
		...
	}],
	...
}

</script>

histogram

Run

Clustering

Clustering can divide the original data set into multiple data clusters with different characteristics. And through ECharts, you can visualize the results of clustering, or visualize the process of clustering.

Syntax

var result = ecStat.clustering.hierarchicalKMeans(data, clusterNumber, stepByStep);
Parameter
  • dataArray.<Array.<number>>. Two-dimensional numeric array, each data point can have more than two numeric attributes in the original data set. In the following example, data[0] is called data point and data[0][1] is one of the numeric attributes of data[0].

    var data = [
      	[1, 2, 3, 4, 5],
      	[6, 7, 8, 9, 10],
      	[11, 12, 13, 14, 15],
      	...
          ];
  • clusterNumernumber. The number of clusters generated. Note that it has to be greater than 1.

  • stepByStepboolean. Control whether doing the clustering step by step

Return Value
  • resultObject. Including the centroids, clusterAssment, and pointsInCluster. For Example:

    result.centroids = [
    
    	[-0.460, -2.778],
    	[2.934, 3.128],
        	...
    ];
    
    // Indicate which cluster each data point belonging to, and the distance to cluster centroids
    result.clusterAssment = [
    
    	[1, 0.145],
    	[2, 0.680],
    	[0, 1.022],
    	...
    ];
    
    // Concrete data point in each cluster
    result.pointsInCluster = [
    	[
    		[0.335, -3.376],
    		[-0.994, -0.884],
    		...
    	],
    	...
    ];

Examples

You can not only do cluster analysis through this interface, but also use ECharts to visualize the results.

Note: the clustering algorithm can handle multiple numeric attributes, but for the convenience of visualization, two numeric attributes are chosen here as an example.

Directly visualize the final results of clustering
<script src='https://cdn.bootcss.com/echarts/3.4.0/echarts.js'></script>
<script src='./dist/ecStat.js'></script>
<script>

var clusterNumber = 3;
var result = ecStat.clustering.hierarchicalKMeans(data, clusterNumber, false);

</script>

static clustering

Run

Visualize the process of clustering
<script src='https://cdn.bootcss.com/echarts/3.4.0/echarts.js'></script>
<script src='./dist/ecStat.js'></script>
<script>

var clusterNumber = 6;
var result = ecStat.clustering.hierarchicalKMeans(data, clusterNumber, true);

</script>

dynamic clustering

Run

Regression

Regression algorithm can according to the value of the dependent and independent variables of the data set, fitting out a curve to reflect their trends. The regression algorithm here only supports two numeric attributes.

Syntax

var myRegression = ecStat.regression(regressionType, data, order);
Parameters
  • regressionType - string. There are four types of regression, whice are 'linear', 'exponential', 'logarithmic', 'polynomial'.

  • data - Array.<Array.<number>>. Two-dimensional numeric array, Each data object should have two numeric attributes in the original data set. For Example:

    var data = [
    
    	[1, 2],
    	[3, 5],
    	...
    ];
  • order - number. The order of polynomial. If you choose other types of regression, you can ignore it.

Return Value
  • myRegression - Object. Including points, parameter, and expression. For Example:

    myRegression.points = [
    	[1, 2],
    	[3, 4],
    	...
    ];
    
    // This is the parameter of linear regression, for other types, it shoule be a little different
    myRegression.parameter = {
    	gradient: 1.695,
    	intercept: 3.008
    };
    
    myRegression.expression = 'y = 1.7x + 3.01';

Examples

You can not only do regression analysis through this interface, you can also use ECharts to visualize the results.

Linear Regression
<script src='https://cdn.bootcss.com/echarts/3.4.0/echarts.js'></script>
<script src='./dist/ecStat.js'></script>
<script>

var myRegression = ecStat.regression('linear', data);

</script>

linear regression

Run

Exponential Regression
<script src='https://cdn.bootcss.com/echarts/3.4.0/echarts.js'></script>
<script src='./dist/ecStat.js'></script>
<script>

var myRegression = ecStat.regression('exponential', data);

</script>

exponential regression

Run

Logarithmic Regression
<script src='https://cdn.bootcss.com/echarts/3.4.0/echarts.js'></script>
<script src='./dist/ecStat.js'></script>
<script>

var myRegression = ecStat.regression('logarithmic', data);

</script>

logarithmic regression

Run

Polynomial Regression
<script src='https://cdn.bootcss.com/echarts/3.4.0/echarts.js'></script>
<script src='./dist/ecStat.js'></script>
<script>

var myRegression = ecStat.regression('polynomial', data, 3);

</script>

polynomial regression

Run

Statistics

This interface provides basic summary statistical services.

ecStat.statistics.deviation()

Syntax
var sampleDeviation = ecStat.statistics.deviation(dataList);
Parameter
  • dataList : Array.<number>
Return Value
  • sampleDeviation: number. Return the deviation of the numeric array dataList. If the dataList is empty or the length less than 2, return 0.

ecStat.statistics.sampleVariance()

Syntax
var varianceValue = ecStat.statistics.sampleVariance(dataList);
Parameter
  • dataList : Array.<number>
Return Value
  • varianceValue: number. Return the variance of the numeric array dataList. If the dataList is empty or the length less than 2, return 0.

ecStat.statistics.quantile()

Syntax
var quantileValue = ecStat.statistics.quantile(dataList, p);
Parameter
  • dataList : Array.<number>. Sorted array of numbers.
  • p: number. where 0 =< p <= 1. For example, the first quartile at p = 0.25, the seconed quartile at p = 0.5(same as the median), and the third quartile at p = 0.75.
Return Value
  • quantileValue: number. Return the quantile of the sorted array of numbers. If p <= 0 or the length of dataList less than 2, return the first element of the sorted array dataList; if p >= 1, return the last element of the sorted array dataList; If dataList is empty, return 0.

ecStat.statistics.max()

Syntax
var maxValue = ecStat.statistics.max(dataList);
Parameter
  • dataList : Array.<number>
Return Value
  • maxValue: number. The maximum value of the dataList.

ecStat.statistics.min()

Syntax
var minValue = ecStat.statistics.min(dataList);
Parameter
  • dataList : Array.<number>
Return Value
  • minValue: number. The minimum value of the dataList.

ecStat.statistics.mean()

Syntax
var meanValue = ecStat.statistics.mean(dataList);
Parameter
  • dataList : Array.<number>
Return Value
  • meanValue: number. The average of the dataList.

ecStat.statistics.median()

Syntax
var medianValue = ecStat.statistics.median(dataList);
Parameter
  • dataList : Array.<number>. Sorted array of numbers
Return Value
  • medianValue: number. The median of the dataList.

ecStat.statistics.sum()

Syntax
var sumValue = ecStat.statistics.sum(dataList);
Parameter
  • dataList : Array.<number>
Return Value
  • sumValue: number. The sum of the dataList.