The assignment this week is to build a quick n’ dirty visualization of NYC immigrants. I approached it in three different chart types with the help of Chart.js library.
The most important part of this assignment is to convert the .csv file to the data structure recognized by Chart.js. Chart.js is using a data student structure that accepts arrays, so all we need to do is to convert our data to an array that contains a set of numbers.
First, we are going to declare a few variables for the arrays and other uses.
Then, let us load the table and pass all the data, according to its column, to an array called “objArray”.
At this point, let’s create two arrays for the estimate and the country name so that it can fit into the Chat.js data structure.
We are almost done here but if we look into the estimate numbers we will find a huge difference between each country. For example, Mexico counts for over 11 million iimigrants while only 21364 for Latvia. The huge difference is gonna make our chart seem nasty. So let do a map function here, by projecting the value of estimate ranging from 0 to 12 million, all the way to 0 to 100. In this way, we get a good looking chart.
The rest of the part is simple. Just feed the data and we get a chart!
I also looked into Google Chart API and found that they use a completely different data structure. I guess whether you are using an external library or not, the most important thing is to make the dataset readable by your program and carefully map the value so that the map scale makes sense!
Link to my Github repository.