test/scatterMatrix.html

<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->


<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/simpleRequire.js"></script>
        <script src="lib/config.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
        </style>
        <div id="main"></div>
        <script>

            var echarts;
            var chart;
            var myChart;

            require([
                'echarts'
            ], function (ec) {

                echarts = ec;

                var rawData = [
                    [5.1, 3.5, 1.4, 0.2, "setosa"],
                    [4.9, 3.0, 1.4, 0.2, "setosa"],
                    [4.7, 3.2, 1.3, 0.2, "setosa"],
                    [4.6, 3.1, 1.5, 0.2, "setosa"],
                    [5.0, 3.6, 1.4, 0.2, "setosa"],
                    [5.4, 3.9, 1.7, 0.4, "setosa"],
                    [4.6, 3.4, 1.4, 0.3, "setosa"],
                    [5.0, 3.4, 1.5, 0.2, "setosa"],
                    [4.4, 2.9, 1.4, 0.2, "setosa"],
                    [4.9, 3.1, 1.5, 0.1, "setosa"],
                    [5.4, 3.7, 1.5, 0.2, "setosa"],
                    [4.8, 3.4, 1.6, 0.2, "setosa"],
                    [4.8, 3.0, 1.4, 0.1, "setosa"],
                    [4.3, 3.0, 1.1, 0.1, "setosa"],
                    [5.8, 4.0, 1.2, 0.2, "setosa"],
                    [5.7, 4.4, 1.5, 0.4, "setosa"],
                    [5.4, 3.9, 1.3, 0.4, "setosa"],
                    [5.1, 3.5, 1.4, 0.3, "setosa"],
                    [5.7, 3.8, 1.7, 0.3, "setosa"],
                    [5.1, 3.8, 1.5, 0.3, "setosa"],
                    [5.4, 3.4, 1.7, 0.2, "setosa"],
                    [5.1, 3.7, 1.5, 0.4, "setosa"],
                    [4.6, 3.6, 1.0, 0.2, "setosa"],
                    [5.1, 3.3, 1.7, 0.5, "setosa"],
                    [4.8, 3.4, 1.9, 0.2, "setosa"],
                    [5.0, 3.0, 1.6, 0.2, "setosa"],
                    [5.0, 3.4, 1.6, 0.4, "setosa"],
                    [5.2, 3.5, 1.5, 0.2, "setosa"],
                    [5.2, 3.4, 1.4, 0.2, "setosa"],
                    [4.7, 3.2, 1.6, 0.2, "setosa"],
                    [4.8, 3.1, 1.6, 0.2, "setosa"],
                    [5.4, 3.4, 1.5, 0.4, "setosa"],
                    [5.2, 4.1, 1.5, 0.1, "setosa"],
                    [5.5, 4.2, 1.4, 0.2, "setosa"],
                    [4.9, 3.1, 1.5, 0.2, "setosa"],
                    [5.0, 3.2, 1.2, 0.2, "setosa"],
                    [5.5, 3.5, 1.3, 0.2, "setosa"],
                    [4.9, 3.6, 1.4, 0.1, "setosa"],
                    [4.4, 3.0, 1.3, 0.2, "setosa"],
                    [5.1, 3.4, 1.5, 0.2, "setosa"],
                    [5.0, 3.5, 1.3, 0.3, "setosa"],
                    [4.5, 2.3, 1.3, 0.3, "setosa"],
                    [4.4, 3.2, 1.3, 0.2, "setosa"],
                    [5.0, 3.5, 1.6, 0.6, "setosa"],
                    [5.1, 3.8, 1.9, 0.4, "setosa"],
                    [4.8, 3.0, 1.4, 0.3, "setosa"],
                    [5.1, 3.8, 1.6, 0.2, "setosa"],
                    [4.6, 3.2, 1.4, 0.2, "setosa"],
                    [5.3, 3.7, 1.5, 0.2, "setosa"],
                    [5.0, 3.3, 1.4, 0.2, "setosa"],
                    [7.0, 3.2, 4.7, 1.4, "versicolor"],
                    [6.4, 3.2, 4.5, 1.5, "versicolor"],
                    [6.9, 3.1, 4.9, 1.5, "versicolor"],
                    [5.5, 2.3, 4.0, 1.3, "versicolor"],
                    [6.5, 2.8, 4.6, 1.5, "versicolor"],
                    [5.7, 2.8, 4.5, 1.3, "versicolor"],
                    [6.3, 3.3, 4.7, 1.6, "versicolor"],
                    [4.9, 2.4, 3.3, 1.0, "versicolor"],
                    [6.6, 2.9, 4.6, 1.3, "versicolor"],
                    [5.2, 2.7, 3.9, 1.4, "versicolor"],
                    [5.0, 2.0, 3.5, 1.0, "versicolor"],
                    [5.9, 3.0, 4.2, 1.5, "versicolor"],
                    [6.0, 2.2, 4.0, 1.0, "versicolor"],
                    [6.1, 2.9, 4.7, 1.4, "versicolor"],
                    [5.6, 2.9, 3.6, 1.3, "versicolor"],
                    [6.7, 3.1, 4.4, 1.4, "versicolor"],
                    [5.6, 3.0, 4.5, 1.5, "versicolor"],
                    [5.8, 2.7, 4.1, 1.0, "versicolor"],
                    [6.2, 2.2, 4.5, 1.5, "versicolor"],
                    [5.6, 2.5, 3.9, 1.1, "versicolor"],
                    [5.9, 3.2, 4.8, 1.8, "versicolor"],
                    [6.1, 2.8, 4.0, 1.3, "versicolor"],
                    [6.3, 2.5, 4.9, 1.5, "versicolor"],
                    [6.1, 2.8, 4.7, 1.2, "versicolor"],
                    [6.4, 2.9, 4.3, 1.3, "versicolor"],
                    [6.6, 3.0, 4.4, 1.4, "versicolor"],
                    [6.8, 2.8, 4.8, 1.4, "versicolor"],
                    [6.7, 3.0, 5.0, 1.7, "versicolor"],
                    [6.0, 2.9, 4.5, 1.5, "versicolor"],
                    [5.7, 2.6, 3.5, 1.0, "versicolor"],
                    [5.5, 2.4, 3.8, 1.1, "versicolor"],
                    [5.5, 2.4, 3.7, 1.0, "versicolor"],
                    [5.8, 2.7, 3.9, 1.2, "versicolor"],
                    [6.0, 2.7, 5.1, 1.6, "versicolor"],
                    [5.4, 3.0, 4.5, 1.5, "versicolor"],
                    [6.0, 3.4, 4.5, 1.6, "versicolor"],
                    [6.7, 3.1, 4.7, 1.5, "versicolor"],
                    [6.3, 2.3, 4.4, 1.3, "versicolor"],
                    [5.6, 3.0, 4.1, 1.3, "versicolor"],
                    [5.5, 2.5, 4.0, 1.3, "versicolor"],
                    [5.5, 2.6, 4.4, 1.2, "versicolor"],
                    [6.1, 3.0, 4.6, 1.4, "versicolor"],
                    [5.8, 2.6, 4.0, 1.2, "versicolor"],
                    [5.0, 2.3, 3.3, 1.0, "versicolor"],
                    [5.6, 2.7, 4.2, 1.3, "versicolor"],
                    [5.7, 3.0, 4.2, 1.2, "versicolor"],
                    [5.7, 2.9, 4.2, 1.3, "versicolor"],
                    [6.2, 2.9, 4.3, 1.3, "versicolor"],
                    [5.1, 2.5, 3.0, 1.1, "versicolor"],
                    [5.7, 2.8, 4.1, 1.3, "versicolor"],
                    [6.3, 3.3, 6.0, 2.5, "virginica"],
                    [5.8, 2.7, 5.1, 1.9, "virginica"],
                    [7.1, 3.0, 5.9, 2.1, "virginica"],
                    [6.3, 2.9, 5.6, 1.8, "virginica"],
                    [6.5, 3.0, 5.8, 2.2, "virginica"],
                    [7.6, 3.0, 6.6, 2.1, "virginica"],
                    [4.9, 2.5, 4.5, 1.7, "virginica"],
                    [7.3, 2.9, 6.3, 1.8, "virginica"],
                    [6.7, 2.5, 5.8, 1.8, "virginica"],
                    [7.2, 3.6, 6.1, 2.5, "virginica"],
                    [6.5, 3.2, 5.1, 2.0, "virginica"],
                    [6.4, 2.7, 5.3, 1.9, "virginica"],
                    [6.8, 3.0, 5.5, 2.1, "virginica"],
                    [5.7, 2.5, 5.0, 2.0, "virginica"],
                    [5.8, 2.8, 5.1, 2.4, "virginica"],
                    [6.4, 3.2, 5.3, 2.3, "virginica"],
                    [6.5, 3.0, 5.5, 1.8, "virginica"],
                    [7.7, 3.8, 6.7, 2.2, "virginica"],
                    [7.7, 2.6, 6.9, 2.3, "virginica"],
                    [6.0, 2.2, 5.0, 1.5, "virginica"],
                    [6.9, 3.2, 5.7, 2.3, "virginica"],
                    [5.6, 2.8, 4.9, 2.0, "virginica"],
                    [7.7, 2.8, 6.7, 2.0, "virginica"],
                    [6.3, 2.7, 4.9, 1.8, "virginica"],
                    [6.7, 3.3, 5.7, 2.1, "virginica"],
                    [7.2, 3.2, 6.0, 1.8, "virginica"],
                    [6.2, 2.8, 4.8, 1.8, "virginica"],
                    [6.1, 3.0, 4.9, 1.8, "virginica"],
                    [6.4, 2.8, 5.6, 2.1, "virginica"],
                    [7.2, 3.0, 5.8, 1.6, "virginica"],
                    [7.4, 2.8, 6.1, 1.9, "virginica"],
                    [7.9, 3.8, 6.4, 2.0, "virginica"],
                    [6.4, 2.8, 5.6, 2.2, "virginica"],
                    [6.3, 2.8, 5.1, 1.5, "virginica"],
                    [6.1, 2.6, 5.6, 1.4, "virginica"],
                    [7.7, 3.0, 6.1, 2.3, "virginica"],
                    [6.3, 3.4, 5.6, 2.4, "virginica"],
                    [6.4, 3.1, 5.5, 1.8, "virginica"],
                    [6.0, 3.0, 4.8, 1.8, "virginica"],
                    [6.9, 3.1, 5.4, 2.1, "virginica"],
                    [6.7, 3.1, 5.6, 2.4, "virginica"],
                    [6.9, 3.1, 5.1, 2.3, "virginica"],
                    [5.8, 2.7, 5.1, 1.9, "virginica"],
                    [6.8, 3.2, 5.9, 2.3, "virginica"],
                    [6.7, 3.3, 5.7, 2.5, "virginica"],
                    [6.7, 3.0, 5.2, 2.3, "virginica"],
                    [6.3, 2.5, 5.0, 1.9, "virginica"],
                    [6.5, 3.0, 5.2, 2.0, "virginica"],
                    [6.2, 3.4, 5.4, 2.3, "virginica"],
                    [5.9, 3.0, 5.1, 1.8, "virginica"]
                ];

                var GRID_WIDTH = 220;
                var GRID_HEIGHT = 220;
                var GAP = 20;
                var CATEGORY_DIM = 4;
                var CROSS_DIM_NUMBER = 4;
                var BASE_LEFT = 30;
                var BASE_TOP = 20;
                var SYMBOL_SIZE = 8;

                function genData(data, dimX, dimY) {
                    var result = [];
                    for (var i = 0; i < data.length; i++) {
                        result.push([data[i][dimX], data[i][dimY], data[i][CATEGORY_DIM]]);
                    }
                    return result;
                }

                function getCategories(data) {
                    var map = {};
                    var result = [];
                    for (var i = 0; i < data.length; i++) {
                        if (!map[data[i][CATEGORY_DIM]]) {
                            map[data[i][CATEGORY_DIM]] = 1;
                        }
                    }
                    for (var cate in map) {
                        if (map.hasOwnProperty(cate)) {
                            result.push(cate);
                        }
                    }
                    return result;
                }

                function genGrids(option) {
                    var gridList = option.grid = [];
                    var xAxisList = option.xAxis = [];
                    var yAxisList = option.yAxis = [];
                    var seriesList = option.series = [];
                    var visualMapSeriesIndices = option.visualMap.seriesIndex = [];
                    var axisPointerLinkList = option.axisPointer.link = [];
                    var axisPointerLinkMap = {};

                    for (var i = 0; i < CROSS_DIM_NUMBER; i++) {
                        for (var j = 0; j < CROSS_DIM_NUMBER; j++) {
                            var id = i + '-' + j;

                            var linkItem = axisPointerLinkMap['x' + i];
                            if (!linkItem) {
                                linkItem = axisPointerLinkMap['x' + i] = {xAxisId: []};
                                axisPointerLinkList.push(linkItem);
                            }
                            linkItem.xAxisId.push(id);

                            var linkItem = axisPointerLinkMap['y' + j];
                            if (!linkItem) {
                                linkItem = axisPointerLinkMap['y' + j] = {yAxisId: []};
                                axisPointerLinkList.push(linkItem);
                            }
                            linkItem.yAxisId.push(id);

                            gridList.push({
                                left: BASE_LEFT + i * (GRID_WIDTH + GAP),
                                top: BASE_TOP + (CROSS_DIM_NUMBER - 1 - j) * (GRID_HEIGHT + GAP),
                                width: GRID_WIDTH,
                                height: GRID_HEIGHT
                            });
                            xAxisList.push({
                                id: id,
                                axisLine: {
                                    onZero: false
                                },
                                axisTick: {
                                    show: j === 0
                                },
                                axisLabel: {
                                    show: j === 0
                                },
                                type: 'value',
                                gridIndex: i * CROSS_DIM_NUMBER + j,
                                scale: true
                            });
                            yAxisList.push({
                                id: id,
                                axisLine: {
                                    onZero: false
                                },
                                axisTick: {
                                    show: i === 0
                                },
                                axisLabel: {
                                    show: i === 0
                                },
                                type: 'value',
                                gridIndex: i * CROSS_DIM_NUMBER + j,
                                scale: true
                            });
                            seriesList.push({
                                type: 'scatter',
                                symbolSize: SYMBOL_SIZE,
                                xAxisIndex: i * CROSS_DIM_NUMBER + j,
                                yAxisIndex: i * CROSS_DIM_NUMBER + j,
                                data: genData(rawData, i, j)
                            });
                            visualMapSeriesIndices.push(i * CROSS_DIM_NUMBER + j);
                        }
                    }
                }

                var option = {
                    legend: {
                        data: ['scatter', 'scatter2', 'scatter3']
                    },
                    animation: false,
                    brush: {
                        brushLink: 'all'
                    },
                    axisPointer: {
                        show: true,
                        snap: true,
                        link: [],
                        lineStyle: {
                            type: 'dashed'
                        }
                    },
                    visualMap: {
                        type: 'piecewise',
                        categories: getCategories(rawData),
                        dimension: 2,
                        orient: 'horizontal',
                        top: 0,
                        left: 'center',
                        inRange: {
                            color: ['#c23531','#2f4554', '#61a0a8']
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        extraCssText: 'max-width:400px; white-space: normal;',
                        formatter: function (params) {
                            if (echarts.util.isArray(params)) {
                                var map = {
                                    x: {items: []},
                                    y: {items: []}
                                };
                                echarts.util.each(params, function (param) {
                                    var dim = param.axisDim;
                                    var mapItem = map[dim];
                                    mapItem.axisValueLabel = param.axisValueLabel;
                                    mapItem.items.push(
                                        param.value[dim === 'x' ? 1 : 0]
                                        + ' ' + param.value[2]
                                    );
                                });
                                return map.x.axisValueLabel + '<br>(' + map.x.items.join(') (') + ')'
                                    + '<br><br>'
                                    + map.y.axisValueLabel + '<br>(' + map.y.items.join(') (') + ')';
                            }
                            else {
                                return params.name + ' ' + params.value;
                            }
                        }
                    }
                };

                genGrids(option);

                var mainEl = document.getElementById('main');
                mainEl.style.height = BASE_TOP * 2 + CROSS_DIM_NUMBER * (GRID_HEIGHT + GAP) + 'px';
                chart = myChart = echarts.init(mainEl);
                chart.setOption(option);
            });

        </script>
    </body>
</html>