{"id":10399,"date":"2020-05-27T10:48:12","date_gmt":"2020-05-27T10:48:12","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=10399"},"modified":"2022-08-13T10:59:30","modified_gmt":"2022-08-13T10:59:30","slug":"scatter-plot-js-tutorial","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2020\/05\/27\/scatter-plot-js-tutorial\/","title":{"rendered":"Building JavaScript Scatter Plot Module"},"content":{"rendered":"

\"TutorialScatter plots are a great way to visualize data. Data is represented as points on a Cartesian plane where the x and y coordinate of each point represents a variable. These charts let you investigate the relationship between two variables, detect outliers in the data set as well as detect trends. They are one of the most commonly used data visualization techniques and are a must have for your data visualization arsenal!<\/p>\n

In this tutorial, I will teach you how to build your very own interactive scatter plot charts using JavaScript.<\/p>\n

Ever wondered whether the population of the United States of America were dog people? Well, you\u2019re about to find out! To help you learn more about building scatter plots I will be using the Cat vs Dog Popularity in US<\/em> dataset. This dataset contains the percentage of homes with dogs and cats for each US state.<\/p>\n

<\/p>\n

How to Create JavaScript Scatter Plot<\/h2>\n

Building data visualizations can often be an overcomplicated endeavour (just ask anyone who uses Matplotlib), but if you use the right tools it can be quick and painless! There are many JavaScript libraries out there which can help you do this, they each have their own advantages, disadvantages and choosing the right one really depends on your use case and coding ability.<\/p>\n

For this tutorial I have chosen to use AnyChart JavaScript library<\/a>. I think AnyChart is perfect for newcomers to data visualizations and is good for both newbies to more intermediate coders. It’s really easy to get something up quickly and with little coding knowledge, however there is also a lot of room for customization. Plus, their documentation really holds your hand through the entire process.<\/p>\n

1. Create an HTML page<\/h3>\n

The first thing I need to do is set up my html page.<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <title>JavaScript Scatter Chart<\/title>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\" style=\"width: 100%; height: 500px\"><\/div>\r\n    <script>\r\n      \/\/ code for chart goes here.\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
I create a blank page and then include a div element for the chart. I give this div the id ‘container’ so I can easily reference it later. I also include style properties to ensure the div fills the entire page. (You can easily change this to suit your own use case).<\/p>\n
2. Add the necessary scripts<\/h3>\n
Next up I add the necessary scripts. Because I am using a JavaScript library to help me build this chart I need to include the necessary scripts. These scripts will depend on which library I use and in this particular case I need to add AnyChart\u2019s \u2018base\u2019 and \u2018data-adapter\u2019 modules. The base module contains the charting library while the data-adapter module will allow me to load my data.<\/p>\n
<script src=\"https:\/\/cdn.anychart.com\/releases\/8.7.1\/js\/anychart-base.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.anychart.com\/releases\/8.7.1\/js\/anychart-data-adapter.min.js\"><\/script><\/code><\/pre>\n
3. Loading the data<\/h3>\n
As mentioned above, I will be demonstrating how to build a scatter plot by visualizing the Cat VS Dog Popularity in US<\/em> dataset. This dataset is available at Data.world<\/a> which is a website dedicated to datasets. Data.world refers to itself as a data ‘catalogue’ and allows you to explore other users’ uploaded data as well as host your own. I’d encourage you to check this site out as it is a rich resource for anyone looking to visualize data.<\/p>\n
Different charting libraries will have different requirements for how they need their data presented. In our case AnyChart allows a number of data formats (JSONs, CSVs, Google Sheets etc) but requires the data be presented in a particular format. They need the x-axis variable to be named \u2018x\u2019 and the y-axis variable to be named \u2018value\u2019.<\/p>\n
To make this tutorial easier to follow I\u2019ve done all the pre-processing required (renamed columns and dropped unused columns) and made the resulting CSV available for download: here<\/a>.<\/p>\n
4. Drawing the chart<\/h3>\n
Finally, with my page made and data ready, I can finally get to the fun part: drawing my chart.<\/p>\n
I will be placing the code for drawing my chart within the anychart.data.loadCsvFile<\/code> and that within the anychart.onDocumentReady()<\/code> function.<\/p>\n
These functions are asynchronous. Usually code is read and executed linearly but in some cases these functions take time. Uploading and parsing a CSV for example takes time.<\/p>\n
So by placing my code to draw my chart within anychart.data.loadCsvFile<\/code> I am ensuring that the code to draw my chart is only executed once my data is loaded. And placing THAT within the anychart.onDocumentReady()<\/code> function ensures that THAT code will only be executed once my page is loaded. This is probably the most complicated step so if you are confused at first, don\u2019t feel too bad.<\/p>\n
Anychart.scatter()<\/code> supports three different kinds of plots: bubbles, lines and markers. For now, I will be using markers as these are our standard scatter plot points.<\/p>\n
anychart.onDocumentReady(function() {\r\n  anychart.data.loadCsvFile(\"data.csv\", function (data) {\r\n    \/\/ create the chart\r\n    chart = anychart.scatter();\r\n    \/\/ assign the data to a series\r\n    var series1 = chart.marker(data);\r\n    \/\/ set title\r\n    chart.title(\"% of Cats v Dogs per state\");\r\n    \/\/ set axes titles \r\n    chart.xAxis().title(\"% Cats\");\r\n    chart.yAxis().title(\"% Dogs\");\r\n    \/\/ draw chart\r\n    chart.container(\"container\").draw();\r\n  });\r\n})<\/code><\/pre>\n
which results in:
\n\"Basic<\/p>\n
And that’s it! By following the above four steps I\u2019ve managed to build a fully functioning interactive JavaScript scatter plot. With everything included my code looks like this:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <title>JavaScript Scatter Chart<\/title>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.7.1\/js\/anychart-base.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.7.1\/js\/anychart-data-adapter.min.js\"><\/script>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\" style=\"width: 100%; height: 500px\"><\/div>\r\n    <script>\r\n      anychart.onDocumentReady(function() {\r\n        anychart.data.loadCsvFile(\"catsvdogs_new.csv\", function (data) {\r\n          \/\/ create the chart\r\n          chart = anychart.scatter();\r\n          \/\/ assign the data to a series\r\n          var series1 = chart.marker(data);\r\n          \/\/ set title\r\n          chart.title(\"% of Cats v Dogs per state\");\r\n          \/\/ set axes titles \r\n          chart.xAxis().title(\"% Cats\");\r\n          chart.yAxis().title(\"% Dogs\");\r\n          \/\/ draw chart\r\n          chart.container(\"container\").draw();\r\n        });\r\n      })\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
Playground link<\/a>
\nCodePen link<\/a><\/p>\n
How to Customize Scatter Chart Appearance<\/h2>\n
Data Visualizations are all about telling stories and it is the job of the data visualization developer to customize their visualizations to better tell these stories. You may want to make changes to make your chart more engaging, to highlight a particularly interesting aspect of the visualization or to add some functionality to help understand the data better.<\/p>\n
All decent charting libraries will come with good customization options to allow you to do this and AnyChart is no different. Using their API allows for a number of different and useful customizations. I\u2019ll try adding a few to get a bit more out of my Cats vs Dogs viz.<\/p>\n
Adding grids<\/h3>\n
Grids are a very useful way of helping users understand your data. You can use xGgrid()<\/code> and yGgrid()<\/code> as well as xMinorGrid()<\/code> and yMinorGrid()<\/code> to create major and minor grids respectively. You can also customize their styling using the stroke()<\/code> and palette()<\/code> methods.<\/p>\n
The following code enables both major and minor grid and sets the parameters for their styling.<\/p>\n
\/\/ enable major grids\r\nchart.xGrid(true);\r\nchart.yGrid(true);\r\n\/\/ configure the visual settings of major grids\r\nchart.xGrid().stroke({color: \"#212D40\", thickness: 0.3});\r\nchart.yGrid().stroke({color: \"#212D40\", thickness: 0.3});\r\n\/\/ enable minor grids\r\nchart.xMinorGrid(true);\r\nchart.yMinorGrid(true);\r\n\/\/ configure the visual settings of minor grids\r\nchart.xMinorGrid().stroke({color: \"#212D40\", thickness: 0.15, dash: 5});\r\nchart.yMinorGrid().stroke({color: \"#212D40\", thickness: 0.15, dash: 5});<\/code><\/pre>\n
Adding a trend line<\/h3>\n
Trend lines, lines of best fit, and other lines can be used to aid user analysis of the data. By taking advantage of the supported series of anychart.scatter()<\/code>, I can easily add a line to my chart.<\/p>\n
In my chart I think adding a 45-degree line could be a good idea. It would dissect the chart and would allow someone looking to easily spot whether a state was more of a dog state or a cat state.<\/p>\n
In order to add this line I first need to create the data, with one point at the origin and another further along, before assigning this data to a line series.<\/p>\n
\/\/ add data for line\r\nvar data2 = [\r\n  {x: 0, value: 0},\r\n  {x: 60, value: 60}\r\n];\r\n\/\/ assign the line data to a line series\r\nvar series2 = chart.line(data2);<\/code><\/pre>\n
Which results in my chart looking like this:<\/p>\n
\"JS<\/p>\n
Playground link<\/a>
\nCodePen link<\/a><\/p>\n
As you can see, there is clearly a bias in the US towards dogs! Can you call the US a dog country? Well I don\u2019t make the rules!<\/p>\n
Bubble chart<\/h3>\n
Scatter plots at default can only support two variables but sometimes it will be necessary to support more. There are a number of ways of extending these charts to do this including having the color of each point be dependent on an additional variable, either a range for numerical variables or distinct for categorical variables or by changing the size of the points depending on this third variable.<\/p>\n
By extending scatter plots using the size of the points you are changing a scatter plot into a bubble chart. With the right data these can look really impressive. They\u2019re also easy to implement with the same code I\u2019ve used to make my scatter plot.<\/p>\n
I simply change the series from a marker to a bubble. It really is that easy. (I also change the minimum and maximum size of our bubbles to make things a bit less messy).<\/p>\n
\/\/ assign the data to a series\r\nvar series1 = chart.bubble(data);\r\n\/\/ adjust bubble min\/max size\r\nchart.minBubbleSize(\"2%\");\r\nchart.maxBubbleSize(\"10%\");<\/code><\/pre>\n
which results in this bubble chart:<\/p>\n
\"Customized<\/p>\n
Playground link<\/a>
\nCodePen link<\/a><\/p>\n
How easy was that?…<\/p>\n
Conclusion<\/h2>\n
As you now know, making a JavaScript scatter plot is quick and easy! They’re one of the most popular data visualizations and are very useful at exploring the relationships between two variables. In addition, with a bit of work they can easily be extended to show more variables.<\/p>\n
The chart I built here is really just scraping the surface of what scatter plots can be. Drop a comment below or hit me up on twitter and I\u2019d be more than happy to send you some examples of my personal favourites!<\/p>\n
\n
See next:<\/strong><\/p>\n