{"id":18258,"date":"2021-07-08T02:44:50","date_gmt":"2021-07-07T21:14:50","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=18258"},"modified":"2026-01-20T14:36:13","modified_gmt":"2026-01-20T09:06:13","slug":"spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/","title":{"rendered":"Visualize Machine Learning Data with Impressive Bubble Charts 2026"},"content":{"rendered":"Data visualization is one of the most important phases of any machine learning workflow. It helps a data scientist gain an understanding of the data and discover hidden trends that may not be obvious otherwise. Automated tools for plotting, charting, and creating maps of data are now of fundamental importance in exploratory data analysis. FusionCharts provides a comprehensive library for creating beautiful charts and stunning visualizations that can be easily integrated into your app.\r\n\r\nWhen it comes to multi-dimensional data, it is hard for even the most skilled and experienced data scientist to comprehend it. Bubble charts, being an extension of scatter plots, provide an effective and powerful means of visualizing 3D data. FusionChart&#8217;s library and <a href=\"https:\/\/www.fusioncharts.com\/\">data visualization tool<\/a> includes APIs for integrating bubble charts quickly and easily into your mobile or desktop app.\r\n\r\nRead on to find out how you can build an app to display spectacular bubble charts of the\u00a0well known\r\nChallenger USA Space Shuttle O-Ring Data Set hosted by the <a href=\"https:\/\/archive.ics.uci.edu\/ml\/index.php\">UCI Machine Learning Repository<\/a>.\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\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#Bubble_Chart_of_Challenger_USA_Space_Shuttle_O-Ring_Data_Set\" title=\"Bubble Chart of\u00a0Challenger USA Space Shuttle O-Ring Data Set\">Bubble Chart of\u00a0Challenger USA Space Shuttle O-Ring Data Set<\/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\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#What_Are_the_Steps_Required_to_Create_a_Bubble_Chart_of_the_Challenger_USA_Space_Shuttle_O-Ring_Data_Set\" title=\"What Are the Steps Required to Create a Bubble Chart of the Challenger USA Space Shuttle O-Ring Data Set?\">What Are the Steps Required to Create a Bubble Chart of the Challenger USA Space Shuttle O-Ring Data Set?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#Step_1_Set_Up_The_Project_With_Webpack_and_FusionCharts\" title=\"Step 1: Set Up The Project With Webpack and FusionCharts\">Step 1: Set Up The Project With Webpack and FusionCharts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#Step_2_Setup_the_Project_Configuration\" title=\"Step 2: Setup the Project Configuration\">Step 2: Setup the Project Configuration<\/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\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#Step_3_Add_the_Imports_Section_in_indexjs\" title=\"Step 3: Add the Imports Section in index.js\">Step 3: Add the Imports Section in 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\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#Step_4_Import_the_Data_and_Display_the_Chart\" title=\"Step 4: Import the Data and Display the Chart\">Step 4: Import the Data and Display the Chart<\/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\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#How_Do_I_Run_the_App\" title=\"How Do I Run the App?\">How Do I Run the App?<\/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\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#Are_There_Other_Ways_to_Create_Stunning_Machine_Learning_Data_Visualizations\" title=\"Are There Other Ways to Create Stunning Machine Learning Data Visualizations?\">Are There Other Ways to Create Stunning Machine Learning Data Visualizations?<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Bubble_Chart_of_Challenger_USA_Space_Shuttle_O-Ring_Data_Set\"><\/span>Bubble Chart of\u00a0Challenger USA Space Shuttle O-Ring Data Set<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nThe explosion of the US Space Shuttle Challenger in 1986, inspired the creation of the O-Ring dataset and made it public. The dataset is a collection of 23 data points with 5 columns or features representing data related to space flights. The ultimate machine learning task is to be able to predict whether there is a chance of flight failure based on the available data parameters.\r\n\r\nBelow is a FusionCharts bubble plot of three columns\/features of this dataset.\r\n<h2><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18261 size-full\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/07\/bubble2.png\" alt=\"\" width=\"2148\" height=\"1132\" srcset=\"\/blog\/wp-content\/uploads\/2021\/07\/bubble2.png 2148w, \/blog\/wp-content\/uploads\/2021\/07\/bubble2-300x158.png 300w, \/blog\/wp-content\/uploads\/2021\/07\/bubble2-768x405.png 768w, \/blog\/wp-content\/uploads\/2021\/07\/bubble2-1024x540.png 1024w\" sizes=\"auto, (max-width: 2148px) 100vw, 2148px\" \/><\/h2>\r\nThe FusionCharts bubble plot shows the following:\r\n<ol>\r\n \t<li>The temporal order of flights is shown along the X-axis and the launch temperature along the Y-axis.<\/li>\r\n \t<li>The size of each bubble indicates the leak check pressure, hence making it possible to visualize 3D data.<\/li>\r\n \t<li>Hovering over a point shows details of that data point.<\/li>\r\n \t<li>All chart features including the hover text, x and y-axis labels, color schemes, title, etc. are configurable.<\/li>\r\n<\/ol>\r\n<h2><span class=\"ez-toc-section\" id=\"What_Are_the_Steps_Required_to_Create_a_Bubble_Chart_of_the_Challenger_USA_Space_Shuttle_O-Ring_Data_Set\"><\/span>What Are the Steps Required to Create a Bubble Chart of the Challenger USA Space Shuttle O-Ring Data Set?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nHere are four easy steps to quickly create an app to display a FusionCharts bubble chart:\r\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Set_Up_The_Project_With_Webpack_and_FusionCharts\"><\/span>Step 1: Set Up The Project With Webpack and FusionCharts<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nCreate a project directory called <strong>bubbleChart<\/strong>. At the console, switch to this directory and type the following:\r\n<pre class=\"lang:markup\">npm i -D webpack-dev-server html-webpack-plugin path webpack-cli fusioncharts<\/pre>\r\nNext, make two directories named <strong>src<\/strong>\u00a0and <strong>dist<\/strong>\u00a0in the main project directory. In the <strong>src<\/strong> folder create the index.js file. You can do this by typing the following at the command line:\r\n<pre class=\"lang:markup\">mkdir src \r\ntouch src\/index.js\r\nmkdir dist<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Setup_the_Project_Configuration\"><\/span>Step 2: Setup the Project Configuration<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nCreate a file called webpack.config.js in the main project directory and add the following code to it:\r\n<pre class=\"lang:markup\">\/\/ webpack.config.js\r\nconst HtmlWebPackPlugin = require( 'html-webpack-plugin' );\r\nconst path = require( 'path' );\r\nmodule.exports = {\r\n\u00a0 \u00a0context: __dirname,\r\n\u00a0 \u00a0entry: '.\/src\/index.js',\r\n\u00a0 \u00a0output: {\r\n\u00a0 \u00a0 \u00a0 path: path.resolve( __dirname, 'dist' ),\r\n\u00a0 \u00a0 \u00a0 filename: 'main.js',\r\n\u00a0 \u00a0},\r\n\u00a0 \u00a0plugins: [\r\n\u00a0 \u00a0 \u00a0 new HtmlWebPackPlugin()\r\n\u00a0 \u00a0],\r\n\u00a0 \u00a0devServer: {\r\n\u00a0 \u00a0 \u00a0 \u00a0headers: {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\"Access-Control-Allow-Origin\": \"*\",\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\"Access-Control-Allow-Methods\": \"GET, POST, PUT, DELETE, PATCH, OPTIONS\",\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\"Access-Control-Allow-Headers\": \"X-Requested-With, content-type, Authorization\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0},\r\n\u00a0 \u00a0 \u00a0 \u00a0proxy: {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0'\/mlRepo': {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 target: 'https:\/\/archive.ics.uci.edu',\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 pathRewrite: { '^\/mlRepo': 'https:\/\/archive.ics.uci.edu\/ml\/machine-learning-databases\/space-shuttle\/o-ring-erosion-only.data' },\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 changeOrigin: true,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0},\r\n\u00a0 \u00a0 \u00a0 \u00a0},\r\n\u00a0 \u00a0 \u00a0}\r\n};<\/pre>\r\nThis code allows downloading data from the UCI machine learning repository without getting the CORS error.\r\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Add_the_Imports_Section_in_indexjs\"><\/span>Step 3: Add the Imports Section in index.js<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nOpen the index.js file and add the following imports at the start of the file. Also, add the div tag for rendering a chart on the HTML page.\r\n<pre class=\"lang:markup\">\/\/ 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 Bubble from 'fusioncharts\/viz\/bubble';\r\n\r\n\/\/ Include the fusion theme\r\nimport FusionTheme from 'fusioncharts\/themes\/es\/fusioncharts.theme.fusion';\r\n\r\n\/\/add the div tag for the chart container\r\nconst myDiv = document.createElement('div');\r\nmyDiv.id = 'chart-container';\r\ndocument.body.appendChild(myDiv);<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_4_Import_the_Data_and_Display_the_Chart\"><\/span>Step 4: Import the Data and Display the Chart<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nAs a last step add the following code at the end of the index.js file. The following code reads the data from the UCI machine learning repository, converts it to JSON format, and creates the bubble chart. Note that the data key in JSON contains the x, y, and z keys. Their values specify the data along the X-axis, the value along the Y-axis, and the size of each bubble, respectively.\r\n<pre class=\"lang:markup\">\/\/define the position of X,Y variables in data file\r\nconst Z_IND = 3;\r\nconst X_IND = 4;\r\nconst Y_IND = 2;\r\n\r\nasync function main() {\r\n\u00a0 \u00a0 \/\/Get the data\r\n\u00a0 \u00a0 let response = await fetch('\/mlRepo');\r\n\u00a0 \u00a0 let data = await response.text();\r\n\u00a0 \u00a0 if (response.ok){ \u00a0 \u00a0 \u00a0 \u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 renderPage(data);\r\n\u00a0 \u00a0 }\r\n\u00a0 \u00a0 else {\r\n\u00a0 \u00a0 \u00a0 \u00a0 alert('Error reading data from ML repository');\r\n\u00a0 \u00a0 }\r\n}\r\n\r\n\/\/renders the html page when passed data as text\r\nfunction renderPage(text){\r\n\u00a0 \u00a0 var matrix = textToMatrix(text);\r\n\u00a0 \u00a0 var dataset = convertMatrixToJson(matrix);\r\n\u00a0 \u00a0 var dataSource = constructDataSource(dataset);\r\n\u00a0 \u00a0 renderChart(dataSource);\r\n}\r\n\r\n\/\/convert text to matrix\r\nfunction textToMatrix(text){\r\n\u00a0 \u00a0 var matrix = [];\r\n\u00a0 \u00a0 var rows = text.split(\"\\n\");\r\n\u00a0 \u00a0 for(var i=0;i&lt;rows.length;i++){\r\n\u00a0 \u00a0 \u00a0 \u00a0 var cols = rows[i].split(\/\\s+\/);\r\n\u00a0 \u00a0 \u00a0 \u00a0 if (cols.length &gt; 1)\r\n\u00a0 \u00a0 \u00a0 \u00a0 matrix.push(cols);\r\n\u00a0 \u00a0 }\r\n\u00a0 \u00a0 return matrix;\r\n}\r\n\r\n\/\/returns JSON text for 'dataset' key\u00a0\r\nfunction convertMatrixToJson(matrix){\r\n\u00a0 \u00a0 \/\/JSON for dataset\r\n\u00a0 \u00a0 var dataset = [];\r\n\u00a0 \u00a0 var data = [];\r\n\u00a0 \u00a0 for (var i=0;i&lt;matrix.length;++i)\r\n\u00a0 \u00a0 { \u00a0 \u00a0 \u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 data.push({x:matrix[i][X_IND],y:matrix[i][Y_IND],z:matrix[i][Z_IND]}); \u00a0 \u00a0 \u00a0\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0\u00a0\r\n\u00a0 \u00a0 }\r\n\u00a0 \u00a0 dataset.push({data: data});\r\n\u00a0 \u00a0 return dataset;\r\n}\r\n\r\n\/\/constructs JSON text for 'dataSource' key\r\nfunction constructDataSource(dataset){\r\n\u00a0 \u00a0 \u00a0 var dataSource = {\"chart\": {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"caption\": \"Challenger USA Space Shuttle O-Ring Data Set \",\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"subcaption\": \"Data Source: UCI Machine Learning Repository\",\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"xAxisName\": \"Temporal Order of Flights --&gt; (bubble size: leak-check pressure)\",\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"YAxisName\": \"Laumch Temperature\",\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"ynumbersuffix\": \" Degree F\",\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"theme\": \"fusion4\",\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"plotToolText\": \"&lt;b&gt;$yDataValue&lt;\/b&gt; launch temperature with leak-check pressure: &lt;b&gt;$zvalue&lt;\/b&gt;\"\r\n\u00a0 \u00a0 },\u00a0\r\n\u00a0 \u00a0 dataset}; \u00a0 \u00a0\r\n\u00a0 \u00a0 return dataSource;\r\n}\r\n\r\n\/\/ Draw the chart\r\nfunction renderChart(dataSrc){\r\n\u00a0 \u00a0 FusionCharts.addDep(Bubble);\r\n\u00a0 \u00a0 FusionCharts.addDep(FusionTheme);\r\n\u00a0 \u00a0 \/\/Chart Configurations\r\n\u00a0 \u00a0 const chartConfig = {\u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 type: 'bubble',\r\n\u00a0 \u00a0 \u00a0 \u00a0 renderAt: 'chart-container',\r\n\u00a0 \u00a0 \u00a0 \u00a0 width: '80%',\r\n\u00a0 \u00a0 \u00a0 \u00a0 height: '600',\r\n\u00a0 \u00a0 \u00a0 \u00a0 dataFormat: 'json',\r\n\u00a0 \u00a0 \u00a0 \u00a0 dataSource: dataSrc\r\n\u00a0 \u00a0 }\r\n\u00a0 \u00a0 \/\/Create an Instance with chart options and render the chart\r\n\u00a0 \u00a0 var chartInstance = new FusionCharts(chartConfig);\r\n\u00a0 \u00a0 chartInstance.render();\r\n}\r\n\r\n\/\/Call main method\r\nmain();<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"How_Do_I_Run_the_App\"><\/span>How Do I Run the App?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nTo run the app, at the console type the following:\r\n<pre class=\"lang:markup\">npx webpack serve --mode=development<\/pre>\r\nYou can view the app in your browser by typing <strong>localhost:8080<\/strong>.\r\n\r\nThat&#8217;s it! We just created an app that displays an awesome FusionCharts bubble chart in a matter of minutes.\r\n<h2><span class=\"ez-toc-section\" id=\"Are_There_Other_Ways_to_Create_Stunning_Machine_Learning_Data_Visualizations\"><\/span>Are There Other Ways to Create Stunning Machine Learning Data Visualizations?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nFor your next machine learning or AI app, <a href=\"https:\/\/www.fusioncharts.com\/\">FusionCharts<\/a> provides a complete library of beautiful plots, charts, maps, and graphs. You can explore more data visualization options including 100+ charts and 2000+ interactive maps to take your application to the next level. Download the trial <a href=\"https:\/\/www.fusioncharts.com\/fusioncharts\">FusionCharts Suite XT<\/a> today and start building state-of-the-art machine learning apps.\r\n\r\n<a href=\"https:\/\/github.com\/fusionchartsexpress\/JavaScriptBubbleChart\">You can download the entire source code for this app here. Happy coding!<\/a>","protected":false},"excerpt":{"rendered":"<p>Data visualization is one of the most important phases of any machine learning workflow. It helps a data scientist gain an understanding of the data and discover hidden trends that may not be obvious otherwise. Automated tools for plotting, charting, and creating maps of data are now of fundamental importance in exploratory data analysis. FusionCharts [&hellip;]<\/p>\n","protected":false},"author":59,"featured_media":18260,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[722,18],"tags":[802,105,774,152,803,804],"coauthors":[769],"class_list":["post-18258","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fusioncharts","category-tutorials","tag-bubble-charts","tag-data-visualization","tag-exploratory-data-analysis","tag-fusioncharts","tag-uci-machine-learning-repository","tag-webpack"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Visualize Machine Learning Data with Impressive Bubble Charts 2026<\/title>\n<meta name=\"description\" content=\"Add powerful bubble charts to your 2026 app in 4 easy steps. Follow our tutorial using the Challenger USA Space Shuttle dataset. Master spatial data viz.\" \/>\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\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visualize Machine Learning Data with Impressive Bubble Charts 2026\" \/>\n<meta property=\"og:description\" content=\"Add powerful bubble charts to your 2026 app in 4 easy steps. Follow our tutorial using the Challenger USA Space Shuttle dataset. Master spatial data viz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-07T21:14:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:06:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/07\/bubblemain.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\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=\"6 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\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/\"\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\": \"Visualize Machine Learning Data with Impressive Bubble Charts 2026\",\n\t            \"datePublished\": \"2021-07-07T21:14:50+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:06:13+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/\"\n\t            },\n\t            \"wordCount\": 709,\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\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2021\/07\/bubblemain.jpg\",\n\t            \"keywords\": [\n\t                \"bubble charts\",\n\t                \"data visualization\",\n\t                \"exploratory data analysis\",\n\t                \"FusionCharts\",\n\t                \"UCI machine learning repository\",\n\t                \"webpack\"\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\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/\",\n\t            \"name\": \"Visualize Machine Learning Data with Impressive Bubble Charts 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\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2021\/07\/bubblemain.jpg\",\n\t            \"datePublished\": \"2021-07-07T21:14:50+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:06:13+00:00\",\n\t            \"description\": \"Add powerful bubble charts to your 2026 app in 4 easy steps. Follow our tutorial using the Challenger USA Space Shuttle dataset. Master spatial data viz.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#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\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/\"\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\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2021\/07\/bubblemain.jpg\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2021\/07\/bubblemain.jpg\",\n\t            \"width\": 1920,\n\t            \"height\": 1280\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#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\": \"Visualize Machine Learning Data with Impressive Bubble Charts 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":"Visualize Machine Learning Data with Impressive Bubble Charts 2026","description":"Add powerful bubble charts to your 2026 app in 4 easy steps. Follow our tutorial using the Challenger USA Space Shuttle dataset. Master spatial data viz.","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\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/","og_locale":"en_US","og_type":"article","og_title":"Visualize Machine Learning Data with Impressive Bubble Charts 2026","og_description":"Add powerful bubble charts to your 2026 app in 4 easy steps. Follow our tutorial using the Challenger USA Space Shuttle dataset. Master spatial data viz.","og_url":"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2021-07-07T21:14:50+00:00","article_modified_time":"2026-01-20T09:06:13+00:00","og_image":[{"width":1920,"height":1280,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/07\/bubblemain.jpg","type":"image\/jpeg"}],"author":"Mehreen Saeed","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mehreen Saeed","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/"},"author":{"name":"Mehreen Saeed","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/93c1ff85ace69b8175fdec9016c8aca7"},"headline":"Visualize Machine Learning Data with Impressive Bubble Charts 2026","datePublished":"2021-07-07T21:14:50+00:00","dateModified":"2026-01-20T09:06:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/"},"wordCount":709,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2021\/07\/bubblemain.jpg","keywords":["bubble charts","data visualization","exploratory data analysis","FusionCharts","UCI machine learning repository","webpack"],"articleSection":["FusionCharts","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/","url":"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/","name":"Visualize Machine Learning Data with Impressive Bubble Charts 2026","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2021\/07\/bubblemain.jpg","datePublished":"2021-07-07T21:14:50+00:00","dateModified":"2026-01-20T09:06:13+00:00","description":"Add powerful bubble charts to your 2026 app in 4 easy steps. Follow our tutorial using the Challenger USA Space Shuttle dataset. Master spatial data viz.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2021\/07\/bubblemain.jpg","contentUrl":"\/blog\/wp-content\/uploads\/2021\/07\/bubblemain.jpg","width":1920,"height":1280},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/spectacular-bubble-charts-for-effective-visualization-of-machine-learning-data\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Visualize Machine Learning Data with Impressive Bubble Charts 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\/18258","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=18258"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/18258\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/18260"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=18258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=18258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=18258"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=18258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}