Scatter 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! In this tutorial, I will teach you how to build your very own interactive scatter plot charts using JavaScript. Ever wondered whether the population of the United States of America were dog people? Well, you’re about to find out! To help you learn more about building scatter plots I will be using the dataset. This dataset contains the percentage of homes with dogs and cats for each US state. Cat vs Dog Popularity in US Building a JavaScript scatter plot 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. For this tutorial I have chosen to use . 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. AnyChart JavaScript library 1. Create an HTML page The first thing I need to do is set up my html page. JavaScript Scatter Chart <!DOCTYPE html> < > html < > head < > title </ > title </ > head < > body < = = > div id "container" style "width: 100%; height: 500px" </ > div < > script // code for chart goes here. </ > script </ > body </ > html 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). 2. Add the necessary scripts 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’s ‘base’ and ‘data-adapter’ modules. The base module contains the charting library while the data-adapter module will allow me to load my data. < = > script src "https://cdn.anychart.com/releases/8.7.1/js/anychart-base.min.js" </ > script < = </ > script src "https://cdn.anychart.com/releases/8.7.1/js/anychart-data-adapter.min.js" script 3. Loading the data As mentioned above, I will be demonstrating how to build a scatter plot by visualizing the . This dataset is available at 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. Cat VS Dog Popularity in US dataset Data.world 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 ‘x’ and the y-axis variable to be named ‘value’. To make this tutorial easier to follow I’ve done all the pre-processing required (renamed columns and dropped unused columns) and made the resulting CSV available for download: . here 4. Drawing the chart Finally, with my page made and data ready, I can finally get to the fun part: drawing my chart. I will be placing the code for drawing my chart within the and that within the function. anychart.data.loadCsvFile anychart.onDocumentReady() 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. So by placing my code to draw my chart within I am ensuring that the code to draw my chart is only executed once my data is loaded. And placing THAT within the 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’t feel too bad. anychart.data.loadCsvFile anychart.onDocumentReady() 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. Anychart.scatter() anychart.onDocumentReady( { anychart.data.loadCsvFile( , { chart = anychart.scatter(); series1 = chart.marker(data); chart.title( ); chart.xAxis().title( ); chart.yAxis().title( ); chart.container( ).draw(); }); }) ( ) function "data.csv" ( ) function data // create the chart // assign the data to a series var // set title "% of Cats v Dogs per state" // set axes titles "% Cats" "% Dogs" // draw chart "container" which results in: And that's it! By following the above four steps I’ve managed to build a fully functioning interactive JavaScript scatter plot. With everything included my code looks like this: JavaScript Scatter Chart <!DOCTYPE html> < > html < > head < > title </ > title < = > script src "https://cdn.anychart.com/releases/8.7.1/js/anychart-base.min.js" </ > script < = > script src "https://cdn.anychart.com/releases/8.7.1/js/anychart-data-adapter.min.js" </ > script </ > head < > body < = = > div id "container" style "width: 100%; height: 500px" </ > div < > script anychart.onDocumentReady( { anychart.data.loadCsvFile( , { chart = anychart.scatter(); series1 = chart.marker(data); chart.title( ); chart.xAxis().title( ); chart.yAxis().title( ); chart.container( ).draw(); }); }) function () "catsvdogs_new.csv" function (data) // create the chart // assign the data to a series var // set title "% of Cats v Dogs per state" // set axes titles "% Cats" "% Dogs" // draw chart "container" </ > script </ > body </ > html CodePen link Customizing the scatter plot appearance 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. 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’ll try adding a few to get a bit more out of my Cats vs Dogs viz. Adding grids Grids are a very useful way of helping users understand your data. You can use and as well as and to create major and minor grids respectively. You can also customize their styling using the and methods. xGgrid() yGgrid() xMinorGrid() yMinorGrid() stroke() palette() The following code enables both major and minor grid and sets the parameters for their styling. chart.xGrid( ); chart.yGrid( ); chart.xGrid().stroke({ : , : }); chart.yGrid().stroke({ : , : }); chart.xMinorGrid( ); chart.yMinorGrid( ); chart.xMinorGrid().stroke({ : , : , : }); chart.yMinorGrid().stroke({ : , : , : }); // enable major grids true true // configure the visual settings of major grids color "#212D40" thickness 0.3 color "#212D40" thickness 0.3 // enable minor grids true true // configure the visual settings of minor grids color "#212D40" thickness 0.15 dash 5 color "#212D40" thickness 0.15 dash 5 Adding a trend line Trend lines, lines of best fit, and other lines can be used to aid user analysis of the data. By taking advantage of the suppored series of , I can easily add a line to my chart. anychart.scatter() 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. 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. data2 = [ { : , : }, { : , : } ]; series2 = chart.line(data2); // add data for line var x 0 value 0 x 60 value 60 // assign the line data to a line series var Which results in my chart looking like this: CodePen link 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’t make the rules! Bubble chart 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 dependant 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. 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’re also easy to implement with the same code I’ve used to make my scatter plot. 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). series1 = chart.bubble(data); chart.minBubbleSize( ); chart.maxBubbleSize( ); // assign the data to a series var // adjust bubble min/max size "2%" "10%" which results in this bubble chart: CodePen link How easy was that?... Conclusion 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. 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’d be more than happy to send you some examples of my personal favourites!
