{"id":20438,"date":"2020-12-11T01:00:10","date_gmt":"2020-12-11T00:00:10","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=20438"},"modified":"2026-01-13T11:17:04","modified_gmt":"2026-01-13T11:17:04","slug":"visualize-data-distribution-with-density-and-jitter-plots","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/visualize-data-distribution-with-density-and-jitter-plots\/","title":{"rendered":"Visualize data distribution with density and jitter plots"},"content":{"rendered":"<p>In past articles, I showed you how to create a <a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/data-science-and-highcharts-kernel-density-estimation\/\" target=\"_blank\" rel=\"noopener noreferrer\">density chart<\/a> and a <a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/small-multiple-with-boxplot-jitter-scatter\/\" target=\"_blank\" rel=\"noopener noreferrer\">box plot with jitter<\/a> to visualize data distribution. Guess what? there are additional compelling methods to display data distribution. In this article, I will focus on how to combine the density chart together with the jitter chart to illustrate data distribution. I will highlight the benefits of combining these two chart types, and how to create this combination using highcharts.<\/p>\n<p>The chart below displays the <a href=\"https:\/\/codepen.io\/mushigh\/pen\/abmZRRQ\" target=\"_blank\" rel=\"noopener noreferrer\">distribution of the Olympic 2012 athletes\u2019 weights<\/a> by the athletic discipline:<\/p>\n<p class=\"demo-container\">\n<iframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\" title=\"Visualize data distribution with density and jitter plots \" src=\"https:\/\/codepen.io\/mushigh\/embed\/abmZRRQ?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\" title=\"A chart  displays the distribution of the Olympic 2012 athletes\u2019 weights by the athletic discipline using a area line and scatter charts\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/abmZRRQ'>Visualize data distribution with density and jitter plots <\/a> by mustapha mekhatria<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe>\n<\/p>\n<p>The chart above illustrates that the data points are significant for both female and male athletes. The female athletes\u2019 weight is mainly concentrated between 55kg and 60kg, whereas the main male athletes\u2019 weight spans from 65kg to 75kg, and lightly around 120kg.<br \/>\nRight, you start to see the benefit of those two charts combined, as each chart helps us to understand the data from a different perspective. Let\u2019s dig deeper, shall we?<\/p>\n<p>The jitter chart is an excellent choice to visualize relationships between continuous and categorical data. The data is rendered in a way that allows us to assess the data points\u2019 number, the spread, and the distribution of the points. However, if there is a high volume of data points overlapping, the ability to visually assess the distribution could be problematic for the human eye, and this is why a density distribution chart is effective. The density chart displays the density distribution with considerable clarity regardless of the data points\u2019 number or the overlapping situation.<\/p>\n<h2>How to create and combine a density chart with a jitter chart using Highcharts?<\/h2>\n<p>There are two main steps to create such a chart:<\/p>\n<h2>Step 1: Data fetching and processing<\/h2>\n<p>To fetch the <a href=\"https:\/\/raw.githubusercontent.com\/mekhatria\/demo_highcharts\/master\/olympic2012.json\" target=\"_blank\" rel=\"noopener noreferrer\">data JSON file<\/a> hosted on GitHub with ease, I am using the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API\" target=\"_blank\" rel=\"noopener noreferrer\">Fetch() API<\/a>:<\/p>\n<pre>const getData = async () => {\r\n    try {\r\n      const response = await fetch(\r\n        \"https:\/\/raw.githubusercontent.com\/mekhatria\/demo_highcharts\/master\/olympic2012.json?callback=?\"\r\n      );\r\n      if (response.status !== 200) throw response;\r\n      return response.json();\r\n    } catch (error) {\r\n      throw error;\r\n    }\r\n  };<\/pre>\n<p>To process the density data, I use the same <a href=\"https:\/\/marketing-demo.s3-eu-west-1.amazonaws.com\/densityFunction\/processDensity.js\" target=\"_blank\" rel=\"noopener noreferrer\">density function<\/a> as the previous article (<a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/data-science-and-highcharts-kernel-density-estimation\/\" target=\"_blank\" rel=\"noopener noreferrer\">density chart<\/a>):<\/p>\n<pre>let step = 1,\r\n      precision = 0.00000000001,\r\n      width = 15;\r\n    let dataWeight = processDensity(\r\n      step,\r\n      precision,\r\n      width,\r\n      maleWeight,\r\n      femaleWeight\r\n    );<\/pre>\n<p>One last task, before the next step, is to be sure to invert the jitter data structure to visualize it horizontally instead of vertically:<\/p>\n<pre>maleWeightJitter = maleWeightJitter.map((e) =&gt; [e[1], e[0]]);\r\nfemaleWeightJitter = femaleWeightJitter.map((e) =&gt; [e[1], e[0]]);<\/pre>\n<p>Now, it is time to create the chart.<\/p>\n<h2>Step 2: Chart creation<\/h2>\n<p>Once the data processing is done, it is simple and straightforward to create the chart.<br \/>\nI use <code>areaspline<\/code> to display the density plots and <code>scatter<\/code> type for the jitter plots<\/p>\n<pre>series: [\r\n        {\r\n          name: \"Density F\",\r\n          type: \"areaspline\",\r\n          data: dataWeight.results[1],\r\n          color: femaleColorJitter,\r\n          yAxis: 0\r\n        }\r\n        ...\r\n        {\r\n          name: \"Jitter M\",\r\n          type: \"scatter\",\r\n          data: maleWeightJitter,\r\n          jitter: {\r\n            y: jitterWidth\r\n          },\r\n          marker: {\r\n            radius: jitterMarkerRadius\r\n          },\r\n          color: maleColorJitter,\r\n          yAxis: 1\r\n        }\r\n      ]<\/pre>\n<p>And voila, the code is done ?.<\/p>\n<p>Now, you know how to create effective interactive charts to visualize density distribution and relationships.<br \/>\nFeel free to try it with your data, and share your experience and questions in the comment section below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn the benefits of combining a density and a jitter plot, and how to create an interactive density and jitter plot with Highcharts.<\/p>\n","protected":false},"author":32,"featured_media":20444,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1063,1094,1031],"coauthors":[699],"class_list":["post-20438","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-data-visualization","tag-highcharts-core","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=20438"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20438\/revisions"}],"predecessor-version":[{"id":29334,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20438\/revisions\/29334"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/20444"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=20438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=20438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=20438"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}