基于Spark的機器學習實踐 (四) - 資料可視化0

相關源碼

1 資料可視化的作用及常用方法

1.1 為什麼要資料可視化

1.1.1 何為資料可視化?

◆ 将資料以圖形圖像的形式展現出來

◆ 人類可以對三維及以下的資料産生直覺的感受

1.1.2 資料可視化的好處

◆ 便于人們發現與了解資料蘊含的資訊

◆ 便于人們進行讨論

1.2 資料可視化的常用方法

◆ 對于web應用,一般使用echarts,hightcharts,d3.js等

◆ 對于資料分析利器python , 使用matplotlib等可視化庫

◆ 對于非碼農的資料分析員, 一般使用excel等

2 初識Echarts

◆ echarts是由百度開源的JS資料可視化庫,底層依賴ZRender渲染

◆ 雖然該項目并不能稱為最優秀的可視化庫,但是在國内市場占有率很高,故本教程選擇echarts.

◆ echarts 提供的圖表很豐富 ,我們隻需使用其中幾個即可

2.1 學習使用echarts繪圖

◆ 我們将通過官網的文檔,共同學習echarts使用的基本方法

◆ 使用流程:

• 定義網頁結構
• 聲明DOM
• 填充并解析資料
• 渲染資料

◆ 我們主要學習的圖表有折線圖、條形圖、散點圖等

官網

檢視基本線形圖

大體是JSON形式資料展示

3 通過Echarts實作圖表化資料展示

3.1 實作一個echarts圖表的例子

簡單線形圖

替換為年份資料

替換為降雨量資料

柱狀圖動畫延遲

var xAxisData = [2009,2007,2006,2005,2004,2003,2002,2001,2000,1999,1998,1997,1996,1995,1994,1993,1992,1991,1990,1989,1988,1987,1986,1985,1984,1983,1982,1981,1980,1979,1978,1977,1976,1975,1974,1973,1972,1971,1970,1969,1968,1967,1966,1965,1964,1963,1962,1961,1960,1959,1958,1957,1956,1955,1954,1953,1952,1951,1950,1949];
var data = [0.4806,0.4839,0.318,0.4107,0.4835,0.4445,0.3704,0.3389,0.3711,0.2669,0.7317,0.4309,0.7009,0.5725,0.8132,0.5067,0.5415,0.7479,0.6973,0.4422,0.6733,0.6839,0.6653,0.721,0.4888,0.4899,0.5444,0.3932,0.3807,0.7184,0.6648,0.779,0.684,0.3928,0.4747,0.6982,0.3742,0.5112,0.597,0.9132,0.3867,0.5934,0.5279,0.2618,0.8177,0.7756,0.3669,0.5998,0.5271,1.406,0.6919,0.4868,1.1157,0.9332,0.9614,0.6577,0.5573,0.4816,0.9109,0.921];

option = {
    title: {
        text: '柱狀圖動畫延遲'
    },
    legend: {
        data: ['beijing'],
        align: 'left'
    },
    toolbox: {
        // y: 'bottom',
        feature: {
            magicType: {
                type: ['stack', 'tiled']
            },
            dataView: {},
            saveAsImage: {
                pixelRatio: 2
            }
        }
    },
    tooltip: {},
    xAxis: {
        data: xAxisData,
        silent: false,
        splitLine: {
            show: false
        }
    },
    yAxis: {
    },
    series: [{
        name: 'beijing',
        type: 'bar',
        data: data,
        animationDelay: function (idx) {
            return idx * 10;
        }
    }
],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
        return idx * 5;
    }
};
      

var xAxisData = [2009,2007,2006,2005,2004,2003,2002,2001,2000,1999,1998,1997,1996,1995,1994,1993,1992,1991,1990,1989,1988,1987,1986,1985,1984,1983,1982,1981,1980,1979,1978,1977,1976,1975,1974,1973,1972,1971,1970,1969,1968,1967,1966,1965,1964,1963,1962,1961,1960,1959,1958,1957,1956,1955,1954,1953,1952,1951,1950,1949];
var data = [0.4806,0.4839,0.318,0.4107,0.4835,0.4445,0.3704,0.3389,0.3711,0.2669,0.7317,0.4309,0.7009,0.5725,0.8132,0.5067,0.5415,0.7479,0.6973,0.4422,0.6733,0.6839,0.6653,0.721,0.4888,0.4899,0.5444,0.3932,0.3807,0.7184,0.6648,0.779,0.684,0.3928,0.4747,0.6982,0.3742,0.5112,0.597,0.9132,0.3867,0.5934,0.5279,0.2618,0.8177,0.7756,0.3669,0.5998,0.5271,1.406,0.6919,0.4868,1.1157,0.9332,0.9614,0.6577,0.5573,0.4816,0.9109,0.921];

option = {
    title: {
        text: '柱狀圖動畫延遲'
    },
    legend: {
        data: ['beijing','shanghai'],
        align: 'left'
    },
    toolbox: {
        // y: 'bottom',
        feature: {
            magicType: {
                type: ['stack', 'tiled']
            },
            dataView: {},
            saveAsImage: {
                pixelRatio: 2
            }
        }
    },
    tooltip: {},
    xAxis: {
        data: xAxisData,
        silent: false,
        splitLine: {
            show: false
        }
    },
    yAxis: {
    },
    series: [
    {
        name: 'beijing', 
        type: 'bar',
        data: data,
        animationDelay: function (idx) {
            return idx * 10;
        }
    },
    {
        name: 'shanghai', 
        type: 'bar',
        data: data,
        animationDelay: function (idx) {
            return idx * 10;
        }
    }
],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
        return idx * 5;
    }
};