{"id":18091,"date":"2021-06-10T04:28:43","date_gmt":"2021-06-09T22:58:43","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=18091"},"modified":"2026-01-20T14:40:28","modified_gmt":"2026-01-20T09:10:28","slug":"stunning-heatmaps-to-visualize-machine-learning-data-summaries","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/","title":{"rendered":"Stunning HeatMaps That Visualize Machine Learning Data Summaries 2026"},"content":{"rendered":"<a class=\"editor-rtfLink\" href=\"https:\/\/www.fusioncharts.com\/charts\/heat-and-tree-map-charts\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">Heatmaps<\/span><\/a> are an excellent tool for visualizing numerical and categorical data. This is necessary because, if you have a large dataset, simply inspecting its data values may not be enough to make sense of it. Heatmaps assist in resolving this issue by using colors to represent data in a 2D table format. Values that are close together are assigned similar colors, and a significant change in color indicates a significant variation in data values. As a result, heatmaps assist data scientists in understanding which attributes or features, as well as high or low values, correspond to different categories.\r\n\r\nBefore running data through an automated learning system for machine learning and data science, it is critical to visualize and inspect the data. Plotting and visualization tools that are automated provide critical insights into data. <span data-preserver-spaces=\"true\">\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.fusioncharts.com\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">FusionCharts<\/span><\/a> is a comprehensive library of 100+ <span data-preserver-spaces=\"true\"><a href=\"https:\/\/www.fusioncharts.com\/features\/data-plots\">data charts<\/a><\/span> and 2000+ maps that can be easily integrated into your web and mobile applications for all modern devices.\r\n\r\nIn this post, we&#8217;ll take a look into making an app that generates a heatmap from the well-known <a class=\"editor-rtfLink\" href=\"https:\/\/archive.ics.uci.edu\/ml\/datasets\/iris\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">Iris machine learning dataset<\/span><\/a>, which is available at the \u00a0<a class=\"editor-rtfLink\" href=\"https:\/\/archive.ics.uci.edu\/ml\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">UCI Machine Learning Repository<\/span><\/a>. We&#8217;ll start by extracting a summary of this dataset and then display it with a heatmap and see how a <a href=\"https:\/\/www.fusioncharts.com\/dev\/chart-attributes\/heatmap\">Data Visualization Tool<\/a> provides useful information that allows us to distinguish between different types of data. Once you&#8217;re familiar with how these tools work and how to use them, you&#8217;ll be able to replicate this tutorial on your own!\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#The_Iris_Dataset\" title=\"The Iris Dataset\">The Iris Dataset<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#The_HeatMap_of_the_Iris_Dataset\" title=\"The HeatMap of the Iris Dataset\">The HeatMap of the Iris Dataset<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#Project_Setup_with_Webpack\" title=\"Project Setup with Webpack\">Project Setup with Webpack<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#Step_1_Install_Webpack_and_FusionCharts\" title=\"Step 1: Install Webpack and FusionCharts\">Step 1: Install Webpack and FusionCharts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#Step_2_Make_src_and_dist_Directories_and_Create_the_indexjs\" title=\"Step 2: Make src and dist Directories and Create the index.js\">Step 2: Make src and dist Directories and Create the index.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#Step_3_Create_the_webpackconfigjs\" title=\"Step 3: Create the webpack.config.js\u00a0\">Step 3: Create the webpack.config.js\u00a0<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#Import_FusionCharts_Library\" title=\"Import FusionCharts Library\">Import FusionCharts Library<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#The_main_Function\" title=\"The main() Function\">The main() Function<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#Convert_the_Data_to_JSON\" title=\"Convert the Data to JSON\">Convert the Data to JSON<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#Convert_the_CSV_to_Matrix_and_Compute_Averages\" title=\"Convert the CSV to Matrix and Compute Averages\">Convert the CSV to Matrix and Compute Averages<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#Construct_the_Dataset_JSON_Key\" title=\"Construct the Dataset JSON Key\">Construct the Dataset JSON Key<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#Construct_the_Datasource_JSON_Key\" title=\"Construct the Datasource JSON Key\">Construct the Datasource JSON Key<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#Render_the_Heatmap\" title=\"Render the Heatmap\">Render the Heatmap<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#Run_the_App\" title=\"Run the App\">Run the App<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#Are_There_More_Ways_to_Present_Machine_Learning_Data\" title=\"Are There More Ways to Present Machine Learning Data?\">Are There More Ways to Present Machine Learning Data?<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"The_Iris_Dataset\"><\/span><b>The Iris Dataset<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<span style=\"font-weight: 400\">Scientists frequently use the Iris dataset to demonstrate and evaluate a machine learning algorithm. It has four attributes, also represented as columns. These are the\u00a0<\/span><span style=\"font-weight: 400\"><strong>Sepal length<\/strong>, <\/span><span style=\"font-weight: 400\"><strong>Sepal width<\/strong>, <\/span><span style=\"font-weight: 400\"><strong>Petal length<\/strong>, and <\/span><strong>Petal width.<\/strong>\r\n\r\n<span style=\"font-weight: 400\">There are also three classes present in this dataset that represent the flower species: <\/span><span style=\"font-weight: 400\"><strong>Iris Setosa<\/strong>, <\/span><span style=\"font-weight: 400\"><strong>Iris Versicolour<\/strong>, and <\/span><strong>Iris Virginica.<\/strong>\r\n\r\nThe goal here is to identify the species of a flower based on its attributes. To do this, we extract the mean of each attribute for a class and plot it as a heatmap. The heatmap shows us how we can differentiate between different categories based on this simple statistic. Similarly, you can create a heatmap for the median, minimum, or maximum values. You can also create a bigger heatmap that displays the entire unprocessed or raw dataset.\r\n<h2><span class=\"ez-toc-section\" id=\"The_HeatMap_of_the_Iris_Dataset\"><\/span>The HeatMap of the Iris Dataset<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nHere is the heatmap for the mean statistic of the Iris dataset:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18094 size-full\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/06\/heatmap.png\" alt=\"\" width=\"1294\" height=\"914\" srcset=\"\/blog\/wp-content\/uploads\/2021\/06\/heatmap.png 1294w, \/blog\/wp-content\/uploads\/2021\/06\/heatmap-300x212.png 300w, \/blog\/wp-content\/uploads\/2021\/06\/heatmap-768x542.png 768w, \/blog\/wp-content\/uploads\/2021\/06\/heatmap-1024x723.png 1024w\" sizes=\"auto, (max-width: 1294px) 100vw, 1294px\" \/>\r\n\r\n<span data-preserver-spaces=\"true\">The heatmap has many features. For example:<\/span>\r\n<ul>\r\n \t<li><span data-preserver-spaces=\"true\">Varying colors in the heatmap depict the differences in various features corresponding to different classes, for example, the sepal length for multiple categories. It also shows that sepal lengths tend to be much bigger than petal lengths.<\/span><\/li>\r\n \t<li><span data-preserver-spaces=\"true\">Hovering the mouse over any cell shows the details of that cell. These details are configurable.<\/span><\/li>\r\n \t<li><span data-preserver-spaces=\"true\">A gradient legend at the bottom of the table shows how values vary with different colors.<\/span><\/li>\r\n \t<li><span data-preserver-spaces=\"true\">You can configure everything from the title and subtitle to the axis labels.<\/span><\/li>\r\n<\/ul>\r\n<span data-preserver-spaces=\"true\">Let&#8217;s get started on building an app that displays a heatmap.<\/span>\r\n<h2><span class=\"ez-toc-section\" id=\"Project_Setup_with_Webpack\"><\/span><b>Project Setup with Webpack<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<span style=\"font-weight: 400\">To set up the project using webpack, first create a <\/span><span style=\"font-weight: 400\">new directory for the project. I chose to call my directory heatMaps. Change to your project directory and follow these steps:<\/span>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Install_Webpack_and_FusionCharts\"><\/span><strong>Step 1: Install Webpack and FusionCharts<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<span style=\"font-weight: 400\">Type the following at the console:<\/span>\r\n<pre class=\"lang:javascript\">npm i -D webpack-dev-server html-webpack-plugin path webpack-cli fusioncharts<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Make_src_and_dist_Directories_and_Create_the_indexjs\"><\/span><strong>Step 2: Make src and dist Directories and Create the index.js<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<span style=\"font-weight: 400\">Enter the following commands at the console:<\/span>\r\n<pre class=\"lang:javascript\">mkdir src\r\nmkdir dist\r\ntouch src\/index.js<\/pre>\r\nThe entire code for the data conversion and chart rendering goes into the index.js file.\r\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Create_the_webpackconfigjs\"><\/span><strong>Step 3: Create the webpack.config.js\u00a0<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<span style=\"font-weight: 400\">In the main project directory create a file called webpack.config.js and enter the following code:<\/span>\r\n<pre class=\"lang:javascript\">\/\/ webpack.config.js\r\nconst HtmlWebPackPlugin = require( 'html-webpack-plugin' );\r\nconst path = require( 'path' );\r\nmodule.exports = {\r\n   context: __dirname,\r\n   entry: '.\/src\/index.js',\r\n   output: {\r\n      path: path.resolve( __dirname, 'dist' ),\r\n      filename: 'main.js',\r\n   },\r\n\r\n   plugins: [\r\n      new HtmlWebPackPlugin()\r\n   ],\r\n   devServer: {\r\n       headers: {\r\n           \"Access-Control-Allow-Origin\": \"*\",\r\n           \"Access-Control-Allow-Methods\": \"GET, POST, PUT, DELETE, PATCH, OPTIONS\",\r\n           \"Access-Control-Allow-Headers\": \"X-Requested-With, content-type, Authorization\"\r\n         },\r\n       proxy: {\r\n         '\/mlRepo': {\r\n            target: 'https:\/\/archive.ics.uci.edu',\r\n            pathRewrite: { '^\/mlRepo': '\/ml\/machine-learning-databases\/iris\/iris.data' },\r\n            changeOrigin: true,\r\n         },\r\n       },\r\n\r\n     }\r\n};<\/pre>\r\n<span style=\"font-weight: 400\">This configuration file enables CORS for the UCI machine learning repository website and allows us to download the Iris dataset from there.<\/span>\r\n<h2><span class=\"ez-toc-section\" id=\"Import_FusionCharts_Library\"><\/span><b>Import FusionCharts Library<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<span style=\"font-weight: 400\">In the index.js file add the following lines to import the FusionCharts libraries:<\/span>\r\n<pre class=\"lang:javascript\">\/\/ Include the core fusioncharts file from core\r\nimport FusionCharts from 'fusioncharts\/core';\r\n\r\n\/\/ Include the chart from viz folder\r\n\/\/ E.g. - import ChartType from fusioncharts\/viz\/[ChartType]\r\nimport heatmap from 'fusioncharts\/viz\/heatmap';\r\n\r\n\/\/ Include the fusion theme\r\nimport FusionTheme from 'fusioncharts\/themes\/es\/fusioncharts.theme.fusion';<\/pre>\r\n<span style=\"font-weight: 400\">We also need a div tag to create an area on the HTML page for the heatmap. You can add it using this code:<\/span>\r\n<pre class=\"lang:javascript\">\/\/Create a div tag for the container for heatmaps\r\nconst myDiv = document.createElement('div');\r\nmyDiv.id = 'chart-container';\r\ndocument.body.appendChild(myDiv)<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"The_main_Function\"><\/span>The main() Function<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nThis is the main function for rendering the HTML page. You can add it to the index.js file.\r\n<pre class=\"lang:javascript\">\/\/main function for rendering the html page\r\nasync function main() {\r\n    \/\/Get the data\r\n    let response = await fetch('\/mlRepo');\r\n    let data = await response.text();\r\n    if (response.ok){        \r\n        renderPage(data);\r\n    }\r\n    else {\r\n        alert('Error reading data from ML repository');\r\n    }\r\n}<\/pre>\r\nThe main() function reads the data file from the UCI Machine Learning Repository and calls the renderPage() function. The renderPage() function contains function calls to convert the CSV text to the required format for a heatmap and render it. Here is the renderPage() function:\r\n<pre class=\"lang:javascript\">\/\/renders the html page when passed data as csv-text\r\nfunction renderPage(csvText){\r\n    var irisCols = ['Sepal-length','Sepal-width','Petal-length','Petal-width','Class']; \r\n    var matrix = csvToMatrix(csvText,',');\r\n    var avg = getAverage(matrix);\r\n    var dataset = constructDatasetJson(avg.avgMatrix,irisCols,avg.classes);\r\n    var jsonArr = constructDataSourceJson(dataset,irisCols,avg.classes);\r\n    renderChart(jsonArr);\r\n}<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Convert_the_Data_to_JSON\"><\/span>Convert the Data to JSON<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nA heatmap requires you to input data as a JSON object. You should follow these steps to convert the CSV text to the required JSON format:\r\n<h3><span class=\"ez-toc-section\" id=\"Convert_the_CSV_to_Matrix_and_Compute_Averages\"><\/span><strong>Convert the CSV to Matrix and Compute Averages<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nHere are three functions that you need to add to the index.js file. The first function csvToMatrix() converts the CSV text to matrix form. The unique() function is a helper function for finding unique values of a category. The third function getAverage() computes the average of each attribute for each category.\r\n<pre class=\"lang:javascript\">\/\/convert csv text to matrix\r\nfunction csvToMatrix(csvText,sep=','){\r\n    var matrix = [];\r\n    var rows = csvText.split(\"\\n\");\r\n    for(var i=0;i&lt;rows.length;i++){\r\n        var cols = rows[i].split(sep);\r\n        if (cols.length &gt; 1)\r\n        matrix.push(cols);\r\n    }\r\n    return matrix;\r\n}\r\n\r\n\/\/helper function to get unique items in array\r\nfunction unique(value, index, self){\r\n    return self.indexOf(value) === index;\r\n}\r\n\r\n\/\/compute the average of each column\r\nfunction getAverage(matrix){\r\n    var avgMatrix = [];\r\n    var rows = matrix.length;\r\n    var cols = matrix[0].length;\r\n    \/\/find the unique classes (iris species)\r\n    var classes = matrix.map(function(value,index) {return value[cols-1];});\r\n    classes = classes.filter(unique);\r\n    \/\/JSON for dataset\r\n    var dataset = [];   \r\n    \/\/for each iris species\/class\r\n    for (var k=0;k&lt;classes.length;++k)\r\n    {\r\n        var className = classes[k];        \r\n        var rowData = [];\r\n        \/\/get the subset matrix for class k\r\n        var subset = matrix.filter(r=&gt;r[cols-1].match(className));\r\n        \/\/for each column\r\n        for (var j=0;j&lt;cols-1;++j)\r\n        {\r\n            \/\/collect the average by moving along each row\r\n            var avg = 0;\r\n            for (var i=0;i&lt;subset.length;++i)            \r\n                avg += parseFloat(subset[i][j]);\r\n            avg = avg\/subset.length;\r\n            rowData.push(avg);            \r\n        }\r\n        avgMatrix.push(rowData);\r\n    }\r\n    return {avgMatrix,classes};    \r\n}<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Construct_the_Dataset_JSON_Key\"><\/span>Construct the Dataset JSON Key<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nNow it&#8217;s time to construct the JSON object for the &#8216;dataset&#8217; key. Add the following function to the index.js file:\r\n<pre class=\"lang:javascript\">\/\/returns JSON text for 'dataset' key \r\nfunction constructDatasetJson(matrix,colheads,rowHeads){\r\n    \r\n    var rows = matrix.length;\r\n    var cols = matrix[0].length;\r\n    \r\n    \/\/JSON for data\r\n    var data = [];   \r\n    for (var i=0;i&lt;rows;++i)\r\n    {   \r\n        for (var j=0;j&lt;cols;++j)\r\n        {\r\n            var obj = {};\r\n            obj['rowid'] = rowHeads[i];\r\n            obj['columnid'] = colheads[j];\r\n            obj['value'] = matrix[i][j];            \r\n            data.push(obj);\r\n        }\r\n    }\r\n    \/\/JSON for dataset\r\n    var dataset = [];\r\n    dataset.push({data:data});\r\n    return dataset;\r\n}<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Construct_the_Datasource_JSON_Key\"><\/span>Construct the Datasource JSON Key<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nNow you can construct the &#8216;datasource&#8217; JSON key by adding the following function to the index.js file:\r\n<pre class=\"lang:javascript\">\/\/constructs JSON text for 'dataSource' key\r\nfunction constructDataSourceJson(dataset,colheads,rowHeads){\r\n    var colorRange =  {\r\n        gradient: \"1\",\r\n        minvalue: \"0\",\r\n        code: \"#862d2d\",\r\n        startlabel: \"Small\",\r\n        endlabel: \"Very large\",\r\n        color: [\r\n          {\r\n            code: \"#ff9933\",\r\n            maxvalue: \"2\"\r\n          },\r\n          {\r\n            code: \"#FFFFFF\",\r\n            maxvalue: \"4\"\r\n          },\r\n          {\r\n            code: \"#9ae5e5\",\r\n            maxvalue: \"5.5\"\r\n          },\r\n          {\r\n            code: \"#004d4d\",\r\n            maxvalue: \"7\"\r\n          }\r\n        ]\r\n  };\r\n  \r\n  var JsonArr = {chart: {\r\n        caption: \"Average Feature Values for Iris Dataset Grouped by Species\",\r\n        subcaption: \"Data Source: UCI Machine Learning Repository\",\r\n        xAxisName: \"Iris Features\",\r\n        yAxisName: \"Iris Class\",\r\n        showvalues: \"1\",\r\n        plottooltext:\r\n         \"&lt;div&gt;&lt;b&gt;$rowLabel&lt;\/b&gt;&lt;br\/&gt;$columnLabel Average Value: &lt;b&gt;$dataValue&lt;\/b&gt;&lt;\/div&gt;\",\r\n        theme: \"fusion\"\r\n    }, dataset,colorrange:colorRange};     \r\n    return JsonArr;\r\n}<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Render_the_Heatmap\"><\/span>Render the Heatmap<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nFinally, paste the following function in index.js to render the heatmap:\r\n<pre class=\"lang:javascript\">\/\/ Draw the chart\r\nfunction renderChart(dataSrc){\r\n    FusionCharts.addDep(heatmap);\r\n    FusionCharts.addDep(FusionTheme);\r\n    \/\/Chart Configurations\r\n    const chartConfig = {\r\n        type: 'heatmap',\r\n        renderAt: 'chart-container',\r\n        width: '50%',\r\n        height: '500',\r\n        dataFormat: 'json',\r\n        dataSource: dataSrc\r\n    }\r\n    \/\/Create an Instance with chart options and render the chart\r\n    var chartInstance = new FusionCharts(chartConfig);\r\n    chartInstance.render();\r\n}<\/pre>\r\n<h3 class=\"lang:javascript\"><span class=\"ez-toc-section\" id=\"Run_the_App\"><\/span>Run the App<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nDon&#8217;t forget to call the main() function at the end of the index.js file.\r\n\r\n<span style=\"font-weight: 400\">You can run the webpack server by typing at the command line:<\/span>\r\n<pre class=\"lang:javascript\">npx webpack serve --mode=development<\/pre>\r\n<span style=\"font-weight: 400\">Load the app in your browser using localhost:8080.<\/span>\r\n<h2><span class=\"ez-toc-section\" id=\"Are_There_More_Ways_to_Present_Machine_Learning_Data\"><\/span>Are There More Ways to Present Machine Learning Data?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<span data-preserver-spaces=\"true\">Heatmaps are not the only method of presenting values of a machine learning dataset. You can explore\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.fusioncharts.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">FusionCharts<\/span><\/a><span data-preserver-spaces=\"true\"> to create beautiful visualizations using many different charts, maps, and plots. Start your free trial today and impress your colleagues and clients with professional and effective data presentations.<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">You can download the entire source code for this app by\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/github.com\/fusionchartsexpress\/JavascriptHeatmapCharts\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">clicking this link<\/span><\/a><span data-preserver-spaces=\"true\">.<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">Happy coding!<\/span>","protected":false},"excerpt":{"rendered":"<p>Heatmaps are an excellent tool for visualizing numerical and categorical data. This is necessary because, if you have a large dataset, simply inspecting its data values may not be enough to make sense of it. Heatmaps assist in resolving this issue by using colors to represent data in a 2D table format. Values that are [&hellip;]<\/p>\n","protected":false},"author":59,"featured_media":18110,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[722,18],"tags":[774,740,780,781],"coauthors":[769],"class_list":["post-18091","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fusioncharts","category-tutorials","tag-exploratory-data-analysis","tag-heatmaps","tag-iris-dataset","tag-machine-learning-data-visualization"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Stunning HeatMaps That Visualize Machine Learning Data Summaries 2026<\/title>\n<meta name=\"description\" content=\"Generate heatmaps to visualize machine learning summaries. Follow our 2026 tutorial using the Iris dataset for demonstration. Master clustering visuals now.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Stunning HeatMaps That Visualize Machine Learning Data Summaries 2026\" \/>\n<meta property=\"og:description\" content=\"Generate heatmaps to visualize machine learning summaries. Follow our 2026 tutorial using the Iris dataset for demonstration. Master clustering visuals now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-09T22:58:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:10:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/06\/heatmapMain.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1278\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mehreen Saeed\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mehreen Saeed\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Mehreen Saeed\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/93c1ff85ace69b8175fdec9016c8aca7\"\n\t            },\n\t            \"headline\": \"Stunning HeatMaps That Visualize Machine Learning Data Summaries 2026\",\n\t            \"datePublished\": \"2021-06-09T22:58:43+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:10:28+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/\"\n\t            },\n\t            \"wordCount\": 1013,\n\t            \"commentCount\": 0,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2021\/06\/heatmapMain.jpg\",\n\t            \"keywords\": [\n\t                \"exploratory data analysis\",\n\t                \"heatmaps\",\n\t                \"Iris dataset\",\n\t                \"machine learning data visualization\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"FusionCharts\",\n\t                \"Tutorials\"\n\t            ],\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/\",\n\t            \"name\": \"Stunning HeatMaps That Visualize Machine Learning Data Summaries 2026\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2021\/06\/heatmapMain.jpg\",\n\t            \"datePublished\": \"2021-06-09T22:58:43+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:10:28+00:00\",\n\t            \"description\": \"Generate heatmaps to visualize machine learning summaries. Follow our 2026 tutorial using the Iris dataset for demonstration. Master clustering visuals now.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2021\/06\/heatmapMain.jpg\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2021\/06\/heatmapMain.jpg\",\n\t            \"width\": 1920,\n\t            \"height\": 1278\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Stunning HeatMaps That Visualize Machine Learning Data Summaries 2026\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t            \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t            \"name\": \"FusionCharts\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"width\": 1,\n\t                \"height\": 1,\n\t                \"caption\": \"FusionCharts\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/93c1ff85ace69b8175fdec9016c8aca7\",\n\t            \"name\": \"Mehreen Saeed\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/b00c4263cd8aa44b9c97ced2ed628629\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/c98\/c98777bf022eae7522cadf4e18cc8c38x96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/c98\/c98777bf022eae7522cadf4e18cc8c38x96.jpg\",\n\t                \"caption\": \"Mehreen Saeed\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/mehreensaeed\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Stunning HeatMaps That Visualize Machine Learning Data Summaries 2026","description":"Generate heatmaps to visualize machine learning summaries. Follow our 2026 tutorial using the Iris dataset for demonstration. Master clustering visuals now.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/","og_locale":"en_US","og_type":"article","og_title":"Stunning HeatMaps That Visualize Machine Learning Data Summaries 2026","og_description":"Generate heatmaps to visualize machine learning summaries. Follow our 2026 tutorial using the Iris dataset for demonstration. Master clustering visuals now.","og_url":"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2021-06-09T22:58:43+00:00","article_modified_time":"2026-01-20T09:10:28+00:00","og_image":[{"width":1920,"height":1278,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/06\/heatmapMain.jpg","type":"image\/jpeg"}],"author":"Mehreen Saeed","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mehreen Saeed","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/"},"author":{"name":"Mehreen Saeed","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/93c1ff85ace69b8175fdec9016c8aca7"},"headline":"Stunning HeatMaps That Visualize Machine Learning Data Summaries 2026","datePublished":"2021-06-09T22:58:43+00:00","dateModified":"2026-01-20T09:10:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/"},"wordCount":1013,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2021\/06\/heatmapMain.jpg","keywords":["exploratory data analysis","heatmaps","Iris dataset","machine learning data visualization"],"articleSection":["FusionCharts","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/","url":"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/","name":"Stunning HeatMaps That Visualize Machine Learning Data Summaries 2026","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2021\/06\/heatmapMain.jpg","datePublished":"2021-06-09T22:58:43+00:00","dateModified":"2026-01-20T09:10:28+00:00","description":"Generate heatmaps to visualize machine learning summaries. Follow our 2026 tutorial using the Iris dataset for demonstration. Master clustering visuals now.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2021\/06\/heatmapMain.jpg","contentUrl":"\/blog\/wp-content\/uploads\/2021\/06\/heatmapMain.jpg","width":1920,"height":1278},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/stunning-heatmaps-to-visualize-machine-learning-data-summaries\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Stunning HeatMaps That Visualize Machine Learning Data Summaries 2026"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/93c1ff85ace69b8175fdec9016c8aca7","name":"Mehreen Saeed","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/b00c4263cd8aa44b9c97ced2ed628629","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/c98\/c98777bf022eae7522cadf4e18cc8c38x96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/c98\/c98777bf022eae7522cadf4e18cc8c38x96.jpg","caption":"Mehreen Saeed"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/mehreensaeed\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/18091","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/59"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=18091"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/18091\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/18110"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=18091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=18091"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=18091"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=18091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}