FastPivot – Process and Shift JSON data with JavaScript

Imagine a table of data, perhaps car data with columns: ID, Model, Make, Color, Age, etc. How do you process this data so that you can answer some simple questions or visualize it with JavaScript charts? Some questions, like “how many cars are red?” can be processed by looking at a count of rows that meet your criteria (rows where column color is red).

Other questions, like “what is the distribution of colors in your data set?”, requires shifting or pivoting the data, as you want to evaluate a specific column instead of rows. Charting will often need this data pivot and doing it optimally is crucial if you are working with a large amount of data on the client side.

FastPivot is a very simple library or function to shift or pivot data in JavaScript. It works with large JSON and makes it fast and easy to visualize tabular data with charts and graphs.

Consider drawing a simple pie chart that shows color distribution of the data set in the picture above. This will require looping or processing every row as you need to capture all colors from the color column. After that, you need to figure out the frequency of colors to divide the pie chart accordingly. None of this is very hard to do but if you also want to draw the distribution of car makes, years, or values in any other column, it would hurt performance if you had to loop through all rows every time. Instead, use FastPivot to pivot or shift the data and analyze columns instead of rows.

FastPivot.js performs only 1 loop over all the rows and returns an array with unique values in each column (under _labels), an array of frequency for those values (under _labelsdata), and a _data object where any given value could be quickly retrieved.

Check it out on GitHub as well as this example of drawing a chart with FastPivot and ChartJS

External:
PivotTable
React Pivot