The election in the United States is over, but you can still find a huge amount of statistics on this topic on the Internet. I also found it quite interesting, so it gave me the idea to show how you can integrate different JavaScript libraries to visualize such data. For this, we shall do a little research and draw up a concept for our future dashboard.
What data to choose?
Firstly, let's start by choosing what data we want to visualize. Of course, we could use the already well-known results of the presidential elections, but in my opinion, it is already a little bit overused topic. Also, that's not the only decision that has been made at this event. Therefore, I decided to take somewhat different but not less interesting data, namely the governors’ election. I decided to take information from Kaggle because it provides data in a convenient CSV format that I can easily convert to JSON and finally use. So simply put, we have a table with the number of votes for a particular candidate in all districts of states.
How to present the data?
Secondly, before choosing how to present our data, we need to specify what we want to find out in the end. So I was insanely curious which parties won and in which states to understand who has the most significant influence. For such information, pivot tables will be the best. I also want to know the percentage of the leading parties among the governors and which states voted for them the most. It will be much more convenient to visualize it using charts: pie charts are best for displaying percentage, and column charts are best for displaying quantitative data. Now that we have decided what we want, we need to understand where we can get such functionality. I suggest using Flexmonster and Highcharts as they integrate well with each other, and it's pretty easy to do.
Finally, we have all the puzzle pieces - it's time to assemble our dashboard.
Step 1. Include libraries
Sounds simple, but where to start our creation? Probably from the basics - connect the libraries, including all the elements we need like in an example:
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<!-- Highcharts Scripts -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.flexmonster.com/lib/flexmonster.highcharts.js"></script>
Step 2. Define a dashboard layout
After we connected the libraries, let's make a structure of our board in HTML. We will do it in the form of table 2x3, and in each cell will be a container with pivot grid or one of our charts, like this:
<table>
<tr>
<td style="width: 300px;">
<div id="fm-component" style="height:400px;"></div>
</td>
<td style="width: 700px;">
<div id="highchartsContainer" style="height:400px;"></div>
</td>
</tr>
<tr>
<td style="width: 700px;">
<div id="highchartsContainer1" style="height:400px;"></div>
</td>
<p class="p2"><span class="Apple-converted-space">
<td style="width: 700px;">
<div id="highchartsContainer2" style="height:400px;"></div>
</td>
</tr>
<tr>
<td style="width: 700px;">
<div id="highchartsContainer3" style="height:400px;"></div>
</td>
</tr>
</table>
<script src="election.js"></script>
Step 3. Select data for the elements
Now let's get directly to creating our elements. We will take the data from JSON and enter it directly into the code using function getData():
function getJSONData() {
return [{
"state": "Delaware",
"county": "Kent County",
"candidate": "John Carney",
"party": "DEM",
"votes": 44352,
"won": "true"
},
{
"state": "Delaware",
"county": "Kent County",
"candidate": "Julianne Murray",
"party": "REP",
"votes": 39332,
"won": "false"
},
//...
]
Since we need slightly differently aggregated data for pivot grid and charts, we will write down the principle of calculating the required values for each element separately. I will explain on a pivot table how to create a layout for our grid, and the rest you can do yourself by analogy. To make a pivot grid on which our diagrams will be based, we need to define rows, columns, measures, and the aggregation function and filter on the first three values. That means that after calculating the results, we will display the top three largest values. I also used sorting so the data would be arranged in series. All these I mentioned in “slice":
"slice": {
"rows": [{
"uniqueName": "party",
"filter": {
"type": "top",
"quantity": 3,
"measure": "votes"
}
}],
"columns": [{
"uniqueName": "state"
},
{
"uniqueName": "Measures"
}
],
"measures": [{
"uniqueName": "votes",
"aggregation": "sum"
}]
}
}
Step 4. Create charts
When writing a createChart() method, you need to mention the type of your chart and the report you use to create it, like this:
function createColumnChart1() {
pivot.highcharts.getData({
type: "column",
"slice": {
"rows": [{
"uniqueName": "party",
"filter": {
"members": [
"party.REP"
]
}
}],
"columns": [{
"uniqueName": "state",
"filter": {
"type": "top",
"quantity": 3,
"measure": "votes"
}
},
{
"uniqueName": "Measures"
}
],
"measures": [{
"uniqueName": "votes",
"aggregation": "sum"
}]
}
}, createAndUpdateChart1, createAndUpdateChart1);
}
For the pie chart, I set only the type because we want to show data that is currently displayed in the pivot grid report.
Then just put all your "blocks" into their containers using createAndUpdateChart(), and we are almost done!
The last thing - we need to create a handler that will create all our charts once the report is loaded into the pivot table.
reportcomplete: function() {
pivot.off("reportcomplete");
createPieChart();
createColumnChart1();
createColumnChart2();
createColumnChart3();
}
Result
Now we have a beautiful dashboard with all the primary information on a silver platter. All the main conclusions are highlighted and easy to notice, which makes the process of making a decision much simpler. We can say for sure that the main fight takes place between Democrats and Republicans and which states have more of them.
I hope you found this article useful and had no problem repeating the dashboard. But even if you had one - you can see the full demo on JSFiddle .