{"id":15535,"date":"2022-08-15T11:36:17","date_gmt":"2022-08-15T11:36:17","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=15535"},"modified":"2022-09-08T14:44:53","modified_gmt":"2022-09-08T14:44:53","slug":"mosaic-plot","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2022\/08\/15\/mosaic-plot\/","title":{"rendered":"How to Create Mosaic Plot with JavaScript"},"content":{"rendered":"

\"Mosaic<\/a>Have you heard of a mosaic plot?<\/strong> It is a very interesting chart type designed to facilitate exploring relationships between variables. Mosaic plots (also known as mosaic charts) visualize data in rectangular tiles whose width encodes one variable and height the other.<\/p>\n

If you\u2019d like to learn how to create such an elegant diagram with ease, follow me as I will show you the ropes right now! Along this tutorial, I will be building an interactive mosaic plot of social media adoption in the United States by age group and year, using JavaScript and explaining every step in detail.<\/p>\n

<\/p>\n

Mosaic Plot to Be Built<\/h2>\n

To get you in the mood for some creative work ahead, I invite you to take a sneak peek at the final mosaic plot that will be completed at the end of the article. And it\u2019s time to get the ball rolling!<\/p>\n

\"JavaScript-based<\/p>\n

Basic Mosaic Plot<\/h2>\n

If you have ever created any charts with JavaScript, you already possess an understanding of how it works. In that case, you simply choose a JS charting library<\/a> and follow its mosaic plot documentation<\/a>. But if it is going to be your first such experience (or your previous one was not too easy and exciting), this tutorial is exactly for you!<\/p>\n

Let\u2019s begin with defining the steps that should be taken. Generally speaking, literally any cool interactive JS-based data visualization, including a mosaic plot, is built in four fundamental moves:<\/p>\n

    \n
  1. Get a web page for your chart to be put on.<\/li>\n
  2. Reference JavaScript files to be used.<\/li>\n
  3. Set data to be visualized.<\/li>\n
  4. Write some JS code for producing the plot you need.<\/li>\n<\/ol>\n

    Now, join me as I delve into each!<\/p>\n

    1. Get a web page<\/h3>\n

    First things first. I create a basic HTML page. In the <body><\/code> section, I include a block-level element, <div><\/code>, which will be the location where the mosaic plot will be rendered, and provide it with a unique id<\/code> attribute, container<\/code> in this case. I also set its height and width settings as 100% as I want to see the mosaic plot stretched along the whole web page.<\/p>\n

    Here is how my HTML page looks:<\/p>\n

    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>Mosaic Plot in JS<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>\r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    2. Reference JavaScript files<\/h3>\n
    Now, it\u2019s time to load scripts that will be used to create the intended mosaic plot on the web page.<\/p>\n
    Here, I will be using the JS charting library<\/a> of AnyChart. It\u2019s feature-rich, with comprehensive documentation<\/a> and API reference<\/a>, and numerous readymade examples in the gallery<\/a>. Also, AnyChart is modular, which means one can connect only a couple of lightweight scripts to power the features that are actually needed instead of unnecessarily overloading a web page or app with the whole library.<\/p>\n
    A mosaic plot requires two modules: Core<\/a> and Mekko<\/a>. I add them to the page by including the following in the <head><\/code> section:<\/p>\n
    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-mekko.min.js\"><\/script>\r\n<\/code><\/pre>\n
    I also put a <script><\/code>\u00a0tag in the <body><\/code> section. (Or it can go to the <head><\/code> section. Doesn\u2019t really matter.) That\u2019s where the full JavaScript code of my upcoming mosaic plot will be placed.<\/p>\n
    Here\u2019s what I\u2019ve got at this point:<\/p>\n
    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>Mosaic Plot in JS<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-mekko.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>  \r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ The JS mosaic plotting code will come here.\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
    3. Set data<\/h3>\n
    Then comes data. As I pointed out in the introduction, I want to look at social media adoption in the U.S. Nowadays, about three-quarters of all American adults are reported to use at least\u00a0one social media site. Let\u2019s take a deeper dive and explore the situation across different age groups and years \u2014 it\u2019s going to be a cool example of a mosaic plot in action!<\/p>\n
    The data I will be visualizing is from Pew Research Center<\/a>. It does not look complicated, so I will add it directly to the code. Pay attention to the format of the data because that\u2019s how the mosaic plot \u201cunderstands\u201d what to represent on which axis.<\/p>\n
    let data = {\r\n  header: ['#', '2006', '2009', '2012', '2015', '2018', '2021'],\r\n  rows: [\r\n    ['18\u201329', 41, 70, 81, 90, 88, 84],\r\n    ['30\u201349', 6, 42, 64, 77, 78, 81],\r\n    ['50\u201364', 3, 20, 39, 51, 64, 73],\r\n    ['65+', 0, 5, 16, 35, 37, 45]\r\n  ]\r\n};<\/code><\/pre>\n
    4. Write some JS code<\/h3>\n
    I\u2019ve got a place for my mosaic plot, scripts to draw it, and data that needs to be visualized. Now that those things are all set, I will do some quick JavaScript coding within the <script><\/code> tag.<\/p>\n
    The very first thing I do here is add the anychart.onDocumentReady()<\/code> function. Everything else will go inside of it and will be executed after the web page is fully loaded.<\/p>\n
    <script>\r\n\u00a0\u00a0anychart.onDocumentReady(function () {\r\n\u00a0\u00a0\u00a0\u00a0\/\/ The JS mosaic plotting code will come here.\r\n\u00a0\u00a0});\r\n<\/script><\/code><\/pre>\n
    Then I add the data from the previous step:<\/p>\n
    anychart.onDocumentReady(function () {\r\n\r\n  let data = {\r\n    header: ['#', '2006', '2009', '2012', '2015', '2018', '2021'],\r\n    rows: [\r\n      ['18\u201329', 41, 70, 81, 90, 88, 84],\r\n      ['30\u201349', 6, 42, 64, 77, 78, 81],\r\n      ['50\u201364', 3, 20, 39, 51, 64, 73],\r\n      ['65+', 0, 5, 16, 35, 37, 45]\r\n    ]\r\n  };\r\n\r\n});<\/code><\/pre>\n
    Then, inside the same function, I create an instance of a mosaic plot:<\/p>\n
    let chart = anychart.mosaic();<\/code><\/pre>\n
    And load the data to it:<\/p>\n
    chart.data(data);<\/code><\/pre>\n
    I also add a title for the entire mosaic plot:<\/p>\n
    chart.title(\"Social Media Use in U.S. by Age\");<\/code><\/pre>\n
    Finally, I define where to put the visualization by specifying the ID of the <div><\/code> element (see step 1) and draw the resulting mosaic plot.<\/p>\n
    chart.container('container');\r\nchart.draw();<\/code><\/pre>\n
    Here is how the entire JavaScript code of my mosaic plot looks:<\/p>\n
    anychart.onDocumentReady(function () {\r\n  \r\n  \/\/ set the data to visualize\r\n  let data = {\r\n    header: ['#', '2006', '2009', '2012', '2015', '2018', '2021'],\r\n    rows: [\r\n      ['18\u201329', 41, 70, 81, 90, 88, 84],\r\n      ['30\u201349', 6, 42, 64, 77, 78, 81],\r\n      ['50\u201364', 3, 20, 39, 51, 64, 73],\r\n      ['65+', 0, 5, 16, 35, 37, 45]\r\n    ]\r\n  };\r\n\r\n  \/\/ create a mosaic plot\r\n  let chart = anychart.mosaic();\r\n  \r\n  \/\/ load the data to the plot\r\n  chart.data(data);\r\n\r\n  \/\/ set the plot title\r\n  chart.title(\"Social Media Use in U.S. by Age\");\r\n  \r\n  \/\/ set the mosaic chart container element id\r\n  chart.container('container');\r\n  \r\n  \/\/ draw the resulting chart\r\n  chart.draw();\r\n  \r\n});<\/code><\/pre>\n
    Bingo! A basic mosaic plot is ready in that few lines of code!<\/p>\n