A challenging problem in machine learning and data science is that of regression analysis. Regression analysis is about finding the right model to estimate the relationship between two or more variables. The final model can be used to predict a variable, also called the outcome variable from the value of one or more predictor variables. To aid regression analysis, FusionCharts provides an easy method for adding multi-series charts to your web and mobile apps.

For all regression problems, the first step is to visualize the relationship between the outcome variable and the predictors. Automated tools for creating plots, charts and maps are therefore of paramount importance to the machine learning and data science community. FusionCharts has provided an extensive library of 100+ 2000+ maps to create stunning and powerful interactive visualizations.

Read on to find out how you can create an app to generate the multi-series chart of the well known auto-mpg regression dataset provided by the UCI Machine Learning Repository.

About the Auto-mpg Dataset

The auto-mpg dataset is used by the machine learning community to test the accuracy of a regression model. It contains the information of city-cycle fuel consumption in miles per gallon of different cars along with different attributes like cylinders, displacement, horsepower, weight etc. We’ll use the horsepower as the predictor variable for different brands of automobiles and create a multi-series scatter plot with the fuel consumption as the dependent variable.

The Multi-Series Chart

The final multi-series scatter plot for the auto-mpg dataset looks as follows:

The plot has the following useful features:

  1. Individual data points for different brands of cars are shown in different colors.
  2. The corresponding regression line for each car is generated automatically and shown in the car’s corresponding color.
  3. Clicking on the legend below turns the plot of a specific car on or off.
  4. Hovering the mouse on a data point shows its information in detail.
  5. Everything in the plot, from the axis labels to the title and sub-title are configurable.

Let’s get started on building this app.

Step 1: Setup the Webpack Project

Create a new directory for the project and name it multiseriesChart. At the console, change the directory to the empty project directory and follow the given steps:

Step 1.1: Install Webpack and FusionCharts

Type the following at the console:

npm i -D webpack-dev-server html-webpack-plugin path webpack-cli fusioncharts

Step 1.2: Make src+dist Directories and Create index.js

Enter the three commands at the console:

mkdir src

touch src/index.js

mkdir dist

The entire code for the data conversion and chart rendering will go into index.js file.

Step 1.3: Create webpack.config.js and Enable CORS

Create an empty file called webpack.config.js in the main project directory and add the following code to it:

// webpack.config.js
const HtmlWebPackPlugin = require( 'html-webpack-plugin' );
const path = require( 'path' );
module.exports = {
   context: __dirname,
   entry: './src/index.js',
   output: {
      path: path.resolve( __dirname, 'dist' ),
      filename: 'main.js',
   },
   plugins: [
      new HtmlWebPackPlugin()
   ],
   devServer: {
       headers: {
           "Access-Control-Allow-Origin": "*",
           "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
           "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
         },
       proxy: {
         '/mlRepo': {
            target: 'http://archive.ics.uci.edu',
            pathRewrite: { '^/mlRepo': '/ml/machine-learning-databases/auto-mpg/auto-mpg.data' },
            changeOrigin: true,
         },
       },
     }
};

Step 2: Import FusionCharts Libraries

Open the file index.js. Import the FusionCharts themes and chart types by adding the following code to it:

// Include the core fusioncharts file from core 

import FusionCharts from 'fusioncharts/core';

// Include the chart from viz folder

// E.g. - import ChartType from fusioncharts/viz/[ChartType]

import Scatter from 'fusioncharts/viz/scatter';

// Include the fusion theme

import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion';

Also, add a div tag for the multi-series scatter plot container as follows:

//add the div tag for the chart container

const myDiv = document.createElement('div');

myDiv.id = 'chart-container';

document.body.appendChild( myDiv );

Step 3: Write the Top Level Functions

Add main() and renderPage() functions to index.js file.

async function main() {
    //Get the data
    let response = await fetch('/mlRepo');
    let data = await response.text();
    if (response.ok){        
        renderPage(data);
    }
    else {
        alert('Error reading data from ML repository');
    }
}
//renders the html page when passed data as text
function renderPage(text){
    var classes=["chevrolet","ford","toyota"];
    var matrix = textToMatrix(text);
    var dataset = convertMatrixToJson(matrix,classes);
    var dataSource = constructDataSource(dataset);
    renderChart(dataSource);
}

Step 4: Convert the Data to JSON

FusionCharts requires data to be in JSON format for plotting. To convert the data file read from the UCI machine learning repository, we need to do the following:

Step 4.1: Convert the Data to Matrix

Add the following function to index.js:

//convert text to matrix
function textToMatrix(text){
    var matrix = [];
    var rows = text.split("\n");
    for(var i=0;i<rows.length;i++){
        var cols = rows[i].split(/\s+/);
        if (cols.length > 1)
        matrix.push(cols);
    }
    return matrix;
}

Step 4.2: Create the JSON Object for Dataset Key

The matrix created in step 4.1 can be passed to the convertMatrixToJson() function to return a JSON object for the dataset key:

//define the position of X,Y variables in data file
const CLASS_IND = 8;
const X_IND = 3;
const Y_IND = 0;
//returns JSON text for 'dataset' key
function convertMatrixToJson(matrix,classes){
    //JSON for dataset
    var dataset = [];
    var colors = ["#0000ff","#00ff00","#ff0000","ffff00"];
    for (var k=0;k<classes.length;++k)
    {
        var className = classes[k];        
        var seriesObj = {seriesname: className,
                          color: colors[k],
                          anchorbgcolor: colors[k],
                          anchorbordercolor: colors[k]
                        };
        var data = [];
        var subset = matrix.filter(r=>r[CLASS_IND].match(className));
        for (var i=0;i<subset.length;++i)                         
            data.push({x:subset[i][X_IND],y:subset[i][Y_IND]});
        seriesObj.data = data;
        dataset.push(seriesObj);
    }
    return dataset;
}

Step 4.3: Create JSON for Datasource Key

The following function constructs the ‘datasource’ key for JSON. Note the “showRegressionLine” option has been set to the value 1, to automatically create regression lines for each car.

//constructs JSON text for 'dataSource' key
function constructDataSource(dataset){
    var dataSource = {"chart": {
        "caption": "Miles Per Gallon vs. Horsepower",
        "subcaption": "Data Source: UCI Machine Learning Repository",
        "xAxisName": "Horsepower",
        "YAxisName": "Miles Per Gallon",
        "ynumbersuffix": " mpg",
        "theme": "fusion",
        "showRegressionLine": "1",
        "plotToolText": "<b>$yDataValue</b> done by a <b>$seriesName</b> with horsepower <b>$xDataValue</b>"
    },
    dataset};    
    return dataSource;
}

Step 5: Render the Multi-series Chart

Add the following function to render the final multi-series scatter chart:

// Draw the chart
function renderChart(dataSrc){
    FusionCharts.addDep(Scatter);
    FusionCharts.addDep(FusionTheme);
    //Chart Configurations
    const chartConfig = {
        type: 'scatter',
        renderAt: 'chart-container',
        width: '80%',
        height: '600',
        dataFormat: 'json',
        dataSource: dataSrc
    }
    //Create an Instance with chart options and render the chart
    var chartInstance = new FusionCharts(chartConfig);
    chartInstance.render();
}

Step 6: Running the App

As a final step you need to call the main() function to render the chart.

Run the webpack server by typing the following at the command line:

npx webpack serve --mode=development

Load the app in your browser using localhost:8080.

Can More Data Visualizations be Created Using Javascript?

FusionCharts is a comprehensive library of awesome plots, maps and graphs. You can find all kinds of interactive and beautiful visualizations for your next machine learning and data science app. FusionCharts enables you to create the next level apps for your web and mobile platform.

Download the complete source code for this app over on GitHub.

Enjoy FusionCharts!

Take your data visualization to a whole new level

From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

Explore FusionCharts

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Your next great dashboard starts here

With our interactive and responsive charts, extensive documentation, consistent API, and cross-browser support - delight your customers with kick-ass dashboards

Explore FUSIONCHARTS