{"id":11303,"date":"2020-09-22T11:59:16","date_gmt":"2020-09-22T11:59:16","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=11303"},"modified":"2022-08-13T11:01:48","modified_gmt":"2022-08-13T11:01:48","slug":"box-plot-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2020\/09\/22\/box-plot-javascript\/","title":{"rendered":"How to Build Box Plot Using JavaScript: Visualizing World Happiness"},"content":{"rendered":"

\"AData visualization<\/a> is an important and sometimes undervalued tool in a data scientist\u2019s toolkit. It allows us to gain an understanding and intuition about the data, through exploratory data analysis, which influences preprocessing, feature engineering, and the correct machine learning algorithm choice. It also helps to better evaluate models and even allows you to spot areas in the data where models could have poor performance.<\/p>\n

Taking data visualization one step further by adding interactivity is even more advantageous. By adding interactive elements to your visualizations you create a more engaging experience. This in turn makes a user \u2018explore\u2019 visualizations instead of just reading them!<\/p>\n

In this tutorial, I will be covering how to build an interactive data visualization, specifically a box plot<\/a> as an example, using JavaScript and a charting library. I will begin by first briefly covering the basics of box plots before going through the steps of building one and then finally using the technique in a fun example to investigate the distribution of happiness<\/strong> between the different regions of the planet in an attempt to answer the question: \u2018Where should you live to be happier?<\/strong>\u2019.<\/p>\n

<\/p>\n

What is a box plot?<\/h2>\n

A box plot, also widely called a box-and-whisker plot, is a data visualization technique used to visualize descriptive statistics of datasets. While this chart type is not as useful as a histogram at understanding a single datasets distribution, these visualizations do well at allowing a user to compare different datasets.<\/p>\n

Box plots visualize the following summary statistics: The median<\/strong>, the first and third quartile (Q1<\/strong> and Q3<\/strong>), the low<\/strong> and the high<\/strong> as well as the outliers<\/strong>. These are displayed as follows:<\/p>\n

\"Diagram<\/p>\n

Creating a JavaScript box plot<\/h2>\n

To build an interactive data visualization there are a quite a few options. If you want to learn about JavaScript alternatives, you can have a look here<\/a>. In this example I will be using a JS charting library and specifically AnyChart<\/a>. I\u2019m going with AnyChart as it supports box-and-whisker plots (among multiple other chart types), and I think both its documentation<\/a> and API<\/a> are really great for beginners and advanced users alike but alternatives which better suit your needs can work too and will follow similar steps.<\/p>\n

Step 1: Set up the page<\/h3>\n

The first step is to set up a page for the box plot visualization. This includes adding the HTML elements, loading the required scripts and setting up the CSS for our chart. Which looks like:<\/p>\n

<html>\r\n  <head>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.8.0\/js\/anychart-base.min.js\"><\/script>\r\n    <style type=\"text\/css\">\r\n      html, body, #container {\r\n        width: 100%;\r\n        height: 100%;\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n     <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\"><\/div>\r\n  <\/body>\r\n  <script>\r\n    anychart.onDocumentReady(function () {\r\n      \/\/ code goes here.\r\n    });\r\n  <\/script>\r\n<\/html><\/code><\/pre>\n
When using a charting library you will need to import the correct script in order to use that library and in some cases different modules for different chart types. For access to AnyChart\u2019s box-and-whisker chart, for example, I will need to use the base module.<\/p>\n
Once that is sorted I will then need to set the CSS properties for my chart element. Here I have set the box chart to have a width and height of 100%. You can change this depending on your own use case. CSS width and height properties accept percentages (of the parent element), and various length units (most commonly pixels).<\/p>\n
Finally, I have a script tag with the JavaScript function anychart.onDocumentReady()<\/code> which is simply a function triggered when the document is loaded. Placing the JavaScript charting code within this function ensures that the code does not trigger before the page is ready which can lead to bad results (read up on asynchronous JavaScript<\/a> to learn more about this).<\/p>\n
Step 2: Load the data<\/h3>\n
I will be using data sourced from the World Happiness Report<\/a> which is the results compiled from a global survey that attempts to quantify happiness of each country\u2019s citizens to a value between 0 and 10. I obtained this data from Kaggle<\/a>, a great place to find fun and interesting datasets. Admittedly most of them are geared towards machine learning applications but a few work well for data visualization purposes.<\/p>\n
In preparation for drawing box plots, I need to provide the data in a format and form that is accepted by our chosen charting library. For example, AnyChart JS accepts box plot data in the following form:<\/p>\n
{x:\"Name\", low: value, q1: value, median: value, q3: value, high: value, outliers: array}<\/code><\/pre>\n
Where x is the label, q1 and q3 are the first and third quartile values, low and high are the 1.5 x the interquartile range below q1 and 1.5 x the interquartile range above q3 respectively, and the outliers is an array containing all the outlier values.<\/p>\n
I have conveniently preprocessed the data from the world happiness report to produce the following array:<\/p>\n
var data = [\r\n  {x:\"Western Europe\", low: 5.03, q1: 6.36, median: 6.91, q3: 7.34, high: 7.53},\r\n  {x:\"North America\", low: 7.10, q1: 7.18, median: 7.25, q3: 7.33, high: 7.40},\r\n  {x:\"Australia and New Zealand\", low: 7.31, q1: 7.32, median: 7.32, q3: 7.33, high: 7.33},\r\n  {x:\"Middle East and Northern Africa\", low: 3.07, q1: 4.78, median: 5.30, q3: 6.30, high: 7.27},\r\n  {x:\"Latin America and Caribbean\", low: 4.87, q1: 5.80, median: 6.13, q3: 6.66, high: 7.09, outliers: [4.03]},\r\n  {x:\"Southeastern Asia\", low: 3.91, q1: 4.88, median: 5.28, q3: 6.01, high: 6.74},\r\n  {x:\"Central and Eastern Europe\", low: 4.22, q1: 5.15, median: 5.49, q3: 5.81, high: 6.60},\r\n  {x:\"Eastern Asia\", low: 4.91, q1: 5.30, median: 5.65, q3: 5.90, high: 6.38},\r\n  {x:\"Sub-Saharan Africa\", low: 2.91, q1: 3.74, median: 4.13, q3: 4.43, high: 5.44, outliers: [5.648]},\r\n  {x:\"Southern Asia\", low: 4.40, q1: 4.41, median: 4.64, q3: 4.96, high: 5.20, outliers: [3.36]}\r\n]<\/code><\/pre>\n
Step 3: Draw the box chart<\/h3>\n
With only these few lines of code I can draw my box plots:<\/p>\n
\/\/ create a chart\r\nchart = anychart.box();\r\n\r\n\/\/ create a box series and set the data\r\nseries = chart.box(data);\r\n\r\n\/\/ set the container id\r\nchart.container(\"container\");\r\n\r\n\/\/ initiate drawing the chart\r\nchart.draw();<\/code><\/pre>\n
And putting this all together, you will get the following:<\/p>\n
<html>\r\n  <head>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.8.0\/js\/anychart-base.min.js\"><\/script>\r\n    <style type=\"text\/css\">\r\n      html, body, #container {\r\n        width: 100%;\r\n        height: 100%;\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\"><\/div>\r\n  <\/body>\r\n  <script>\r\n    anychart.onDocumentReady(function () {\r\n      var data = [\r\n        {x:\"Western Europe\", low: 5.03, q1: 6.36, median: 6.91, q3: 7.34, high: 7.53},\r\n        {x:\"North America\", low: 7.10, q1: 7.18, median: 7.25, q3: 7.33, high: 7.40},\r\n        {x:\"Australia and New Zealand\", low: 7.31, q1: 7.32, median: 7.32, q3: 7.33, high: 7.33},\r\n        {x:\"Middle East and Northern Africa\", low: 3.07, q1: 4.78, median: 5.30, q3: 6.30, high: 7.27},\r\n        {x:\"Latin America and Caribbean\", low: 4.87, q1: 5.80, median: 6.13, q3: 6.66, high: 7.09, outliers: [4.03]},\r\n        {x:\"Southeastern Asia\", low: 3.91, q1: 4.88, median: 5.28, q3: 6.01, high: 6.74},\r\n        {x:\"Central and Eastern Europe\", low: 4.22, q1: 5.15, median: 5.49, q3: 5.81, high: 6.60},\r\n        {x:\"Eastern Asia\", low: 4.91, q1: 5.30, median: 5.65, q3: 5.90, high: 6.38},\r\n        {x:\"Sub-Saharan Africa\", low: 2.91, q1: 3.74, median: 4.13, q3: 4.43, high: 5.44, outliers: [5.648]},\r\n        {x:\"Southern Asia\", low: 4.40, q1: 4.41, median: 4.64, q3: 4.96, high: 5.20, outliers: [3.36]}\r\n      ]\r\n\r\n      \/\/ create a chart\r\n      chart = anychart.box();\r\n\r\n      \/\/ create a box series and set the data\r\n      series = chart.box(data);\r\n\r\n      \/\/ set the container id\r\n      chart.container(\"container\");\r\n\r\n      \/\/ initiate drawing the chart\r\n      chart.draw();\r\n\r\n    });\r\n\r\n  <\/script>\r\n<\/html><\/code><\/pre>\n
Which results in:<\/p>\n