Crushing Data in JavaScript (Part 3)

Welcome back. As the title articulates above this is the third in a series of blog posts about working with data in JS. Today we are going to be talking about mapping data elements. In our previous walkthroughs we discussed how to summarize and filter a dataset. Quite often, however, we need to change the way the data is presented to the end user. This could be anything from mapping a code to a description, giving a dimension a ‘prettier’ name, or mapping categories to detailed dimensions.

In this example we are going to explore one of my favorite uses of mapping: The range. As anyone who works with data will know having a numeric value in your dataset is great for counting, averaging, summing, etc. But there are often those times when you absolutely have to see it as a dimension. This might be because you are trying to plot it against some other metrics, or because you simply need to categorize the data. One of the downsides to metrics is that they don’t inherently fit into a dimension. Especially if you have high precision. Consider the following dataset:

If we wanted to plot average height by weight

This makes little to no sense. There is absolutely no value in comparing each of these weights individually. You need to categorize them somehow. Let’s say less than 200 and greater than / equal to 200

Now we have two bars. One for 200+ and the other for below 200. Much easier to draw correlations with this chart. Now back to our fake news data. There is a metric in fake new dataset called Weightvar. This is a decimal number ranging from .5 to 4 (give or take). Lets say, for instance, that we want to create a range for this. I will use high, medium, low with with ranges of greater than one, between .8 and 1, and below .8 making up each of these respectively.

var mappedObj ={
if (Number(obj.Weightvar) <= 0.80) {
return {"weight" : "low", "count": 1};
} else if(Number(obj.Weightvar) > 0.80 && Number(obj.Weightvar) < 1.0) {
return {"weight": "Medium", "count": 1};
} else if (Number(obj.Weightvar) >= 1.0) {
return {"weight": "High", "count": 1};
} else {
return {"weight": "Unknown", "count": 0};

What the map function of the Array prototype does for us is create another array (in this case an array of objects called mappedObj) that correlates the data from the original data array and assigns values to a new array based on the value of Weightvar. What we pass in is an array of objects that have a specific numeric value and what is returned is an array of objects that has three unique values (high, medium, and low). This can then be easily reduced and graphed. I am not going to go through the exercise of reducing these and plotting them on a graph. To see how you would accomplish that please refer back to my previous blog post.

This concludes my overview of manipulating and visualizing data with JavaScript. I hope this was helpful to you and you will take what you learned to start making some beautiful creations of your own. The code from this blog is available on GitHub for your personal use.

Update — I have committed a new version of the code on the GitHub repo. This new version creates functions for getting unique values as well as grouping your data and rendering the bar chart. I think this makes the code easier to understand and makes it more reusable. Feel free to fork this code for your own projects. I have also taken our some of the extraneous code and added in comments. This does change the code somewhat so it doesn’t align 100% with the blog but the core of the program is the same.

This also allowed me to create the graph for the mapped dataset in case you are interested:

Thanks for reading this series. I just posted a short addendum to the series focusing on some of my key omissions. Feel free to reach out to me with questions or comments as I love to hear what you thing.