1.Parallel Coordination 平行坐标图

神迹小卒

于 2024-07-23 15:33:37 发布

阅读量116

点赞数 3

文章标签： javascript 信息可视化开发语言

本文链接：https://blog.csdn.net/aiqq136/article/details/140631899

版权

1.平行坐标图（Parallel Coordinate）

我们最多可以可视化 3 维数据。但是我们有时需要可视化超过 3 维的数据才能获得更多的信息。我们经常使用 PCA 或 t-SNE 来降维并绘制它。在降维的情况下，可能会丢失大量信息。在某些情况下，我们需要考虑所有特征，平行坐标图有助于做到这一点。

1.1 EXAMPLE

上面的图片。

横线(平行轴)表示鸢尾花的特征(花瓣长、萼片长、萼片宽、花瓣宽)。

分类是Setosa, Versicolor和Virginica。

上图将该物种编码为Setosa→1,Versicolor→2,Virginica→3。

每个平行轴包含最小值到最大值(例如，花瓣长度从1到6.9，萼片长度从4.3到7.9，等等)。

例如，考虑花瓣长度轴。

这表明与其他两种植物相比，濑蝶属植物的花瓣长度较小，其中维珍属植物的花瓣长度最高。

有了这个图，我们可以很容易地获得数据集的总体信息。

数据集是什么样子的?让我们来看看。

让我们用Plotly Express库可视化数据。Plotly库提供了一个交互式绘图工具。

 import plotly.express as px
 df = px.data.iris()
 fig = px.parallel_coordinates(df, color="species_id", labels={"species_id": "Species",
                "sepal_width": "Sepal Width", "sepal_length": "Sepal Length",
                "petal_width": "Petal Width", "petal_length": "Petal Length", },
                              color_continuous_scale=px.colors.diverging.Tealrose,
                              color_continuous_midpoint=2)
 fig.show()

除了上图以外我们还可以使用其他库，如pandas、scikit-learn和matplotlib来绘制并行坐标。

Web link:10个实用的数据可视化的图表总结_交互热图柱状图-CSDN博客

28个数据可视化图表的总结和介绍-腾讯云开发者社区-腾讯云

2.Echarts - 平行坐标系（Parallel Aqi）

<!DOCTYPE html>

<html>


  <head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!-- 引入 echarts.js -->

    <script src="js/echarts.min.js"></script>

    <script src="js/jquery-1.11.0.min.js"></script>

    <script src="dist/extension/dataTool.js"></script>

  </head>


  <body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 1024px;height:768px;"></div>

    <script type="text/javascript">

      // 基于准备好的dom，初始化echarts实例

      var myChart = echarts.init(document.getElementById('main'));

      var option;


// Schema:

// date,AQIindex,PM2.5,PM10,CO,NO2,SO2

var dataBJ = [

    [1,55,9,56,0.46,18,6,"良"],

    [2,25,11,21,0.65,34,9,"优"],

    [3,56,7,63,0.3,14,5,"良"],

    [4,33,7,29,0.33,16,6,"优"],

    [5,42,24,44,0.76,40,16,"优"],

    [6,82,58,90,1.77,68,33,"良"],

    [7,74,49,77,1.46,48,27,"良"],

    [8,78,55,80,1.29,59,29,"良"],

    [9,267,216,280,4.8,108,64,"重度污染"],

    [10,185,127,216,2.52,61,27,"中度污染"],

    [11,39,19,38,0.57,31,15,"优"],

    [12,41,11,40,0.43,21,7,"优"],

    [13,64,38,74,1.04,46,22,"良"],

    [14,108,79,120,1.7,75,41,"轻度污染"],

    [15,108,63,116,1.48,44,26,"轻度污染"],

    [16,33,6,29,0.34,13,5,"优"],

    [17,94,66,110,1.54,62,31,"良"],

    [18,186,142,192,3.88,93,79,"中度污染"],

    [19,57,31,54,0.96,32,14,"良"],

    [20,22,8,17,0.48,23,10,"优"],

    [21,39,15,36,0.61,29,13,"优"],

    [22,94,69,114,2.08,73,39,"良"],

    [23,99,73,110,2.43,76,48,"良"],

    [24,31,12,30,0.5,32,16,"优"],

    [25,42,27,43,1,53,22,"优"],

    [26,154,117,157,3.05,92,58,"中度污染"],

    [27,234,185,230,4.09,123,69,"重度污染"],

    [28,160,120,186,2.77,91,50,"中度污染"],

    [29,134,96,165,2.76,83,41,"轻度污染"],

    [30,52,24,60,1.03,50,21,"良"],

    [31,46,5,49,0.28,10,6,"优"]

];


var dataGZ = [

    [1,26,37,27,1.163,27,13,"优"],

    [2,85,62,71,1.195,60,8,"良"],

    [3,78,38,74,1.363,37,7,"良"],

    [4,21,21,36,0.634,40,9,"优"],

    [5,41,42,46,0.915,81,13,"优"],

    [6,56,52,69,1.067,92,16,"良"],

    [7,64,30,28,0.924,51,2,"良"],

    [8,55,48,74,1.236,75,26,"良"],

    [9,76,85,113,1.237,114,27,"良"],

    [10,91,81,104,1.041,56,40,"良"],

    [11,84,39,60,0.964,25,11,"良"],

    [12,64,51,101,0.862,58,23,"良"],

    [13,70,69,120,1.198,65,36,"良"],

    [14,77,105,178,2.549,64,16,"良"],

    [15,109,68,87,0.996,74,29,"轻度污染"],

    [16,73,68,97,0.905,51,34,"良"],

    [17,54,27,47,0.592,53,12,"良"],

    [18,51,61,97,0.811,65,19,"良"],

    [19,91,71,121,1.374,43,18,"良"],

    [20,73,102,182,2.787,44,19,"良"],

    [21,73,50,76,0.717,31,20,"良"],

    [22,84,94,140,2.238,68,18,"良"],

    [23,93,77,104,1.165,53,7,"良"],

    [24,99,130,227,3.97,55,15,"良"],

    [25,146,84,139,1.094,40,17,"轻度污染"],

    [26,113,108,137,1.481,48,15,"轻度污染"],

    [27,81,48,62,1.619,26,3,"良"],

    [28,56,48,68,1.336,37,9,"良"],

    [29,82,92,174,3.29,0,13,"良"],

    [30,106,116,188,3.628,101,16,"轻度污染"],

    [31,118,50,0,1.383,76,11,"轻度污染"]

];


var dataSH = [

    [1,91,45,125,0.82,34,23,"良"],

    [2,65,27,78,0.86,45,29,"良"],

    [3,83,60,84,1.09,73,27,"良"],

    [4,109,81,121,1.28,68,51,"轻度污染"],

    [5,106,77,114,1.07,55,51,"轻度污染"],

    [6,109,81,121,1.28,68,51,"轻度污染"],

    [7,106,77,114,1.07,55,51,"轻度污染"],

    [8,89,65,78,0.86,51,26,"良"],

    [9,53,33,47,0.64,50,17,"良"],

    [10,80,55,80,1.01,75,24,"良"],

    [11,117,81,124,1.03,45,24,"轻度污染"],

    [12,99,71,142,1.1,62,42,"良"],

    [13,95,69,130,1.28,74,50,"良"],

    [14,116,87,131,1.47,84,40,"轻度污染"],

    [15,108,80,121,1.3,85,37,"轻度污染"],

    [16,134,83,167,1.16,57,43,"轻度污染"],

    [17,79,43,107,1.05,59,37,"良"],

    [18,71,46,89,0.86,64,25,"良"],

    [19,97,71,113,1.17,88,31,"良"],

    [20,84,57,91,0.85,55,31,"良"],

    [21,87,63,101,0.9,56,41,"良"],

    [22,104,77,119,1.09,73,48,"轻度污染"],

    [23,87,62,100,1,72,28,"良"],

    [24,168,128,172,1.49,97,56,"中度污染"],

    [25,65,45,51,0.74,39,17,"良"],

    [26,39,24,38,0.61,47,17,"优"],

    [27,39,24,39,0.59,50,19,"优"],

    [28,93,68,96,1.05,79,29,"良"],

    [29,188,143,197,1.66,99,51,"中度污染"],

    [30,174,131,174,1.55,108,50,"中度污染"],

    [31,187,143,201,1.39,89,53,"中度污染"]

];


var schema = [

    {name: 'date', index: 0, text: '日期'},

    {name: 'AQIindex', index: 1, text: 'AQI'},

    {name: 'PM25', index: 2, text: 'PM2.5'},

    {name: 'PM10', index: 3, text: 'PM10'},

    {name: 'CO', index: 4, text: ' CO'},

    {name: 'NO2', index: 5, text: 'NO2'},

    {name: 'SO2', index: 6, text: 'SO2'},

    {name: '等级', index: 7, text: '等级'}

];


var lineStyle = {

    normal: {

        width: 1,

        opacity: 0.5

    }

};


option = {

    backgroundColor: '#333',

    legend: {

        bottom: 30,

        data: ['北京', '上海', '广州'],

        itemGap: 20,

        textStyle: {

            color: '#fff',

            fontSize: 14

        }

    },

    tooltip: {

        padding: 10,

        backgroundColor: '#222',

        borderColor: '#777',

        borderWidth: 1,

        formatter: function (obj) {

            var value = obj[0].value;

            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'

                + obj[0].seriesName + ' ' + value[0] + '日期：'

                + value[7]

                + '</div>'

                + schema[1].text + '：' + value[1] + '<br>'

                + schema[2].text + '：' + value[2] + '<br>'

                + schema[3].text + '：' + value[3] + '<br>'

                + schema[4].text + '：' + value[4] + '<br>'

                + schema[5].text + '：' + value[5] + '<br>'

                + schema[6].text + '：' + value[6] + '<br>';

        }

    },

    // dataZoom: {

    //     show: true,

    //     orient: 'vertical',

    //     parallelAxisIndex: [0]

    // },

    parallelAxis: [

        {dim: 0, name: schema[0].text, inverse: true, max: 31, nameLocation: 'start'},

        {dim: 1, name: schema[1].text},

        {dim: 2, name: schema[2].text},

        {dim: 3, name: schema[3].text},

        {dim: 4, name: schema[4].text},

        {dim: 5, name: schema[5].text},

        {dim: 6, name: schema[6].text},

        {dim: 7, name: schema[7].text,

        type: 'category', data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']}

    ],

    visualMap: {

        show: true,

        min: 0,

        max: 150,

        dimension: 2,

        inRange: {

            color: ['#d94e5d','#eac736','#50a3ba'].reverse(),

            // colorAlpha: [0, 1]

        }

    },

    parallel: {

        left: '5%',

        right: '18%',

        bottom: 100,

        parallelAxisDefault: {

            type: 'value',

            name: 'AQI指数',

            nameLocation: 'end',

            nameGap: 20,

            nameTextStyle: {

                color: '#fff',

                fontSize: 12

            },

            axisLine: {

                lineStyle: {

                    color: '#aaa'

                }

            },

            axisTick: {

                lineStyle: {

                    color: '#777'

                }

            },

            splitLine: {

                show: false

            },

            axisLabel: {

                textStyle: {

                    color: '#fff'

                }

            }

        }

    },

    series: [

        {

            name: '北京',

            type: 'parallel',

            lineStyle: lineStyle,

            data: dataBJ

        },

        {

            name: '上海',

            type: 'parallel',

            lineStyle: lineStyle,

            data: dataSH

        },

        {

            name: '广州',

            type: 'parallel',

            lineStyle: lineStyle,

            data: dataGZ

        }

    ]

};




      myChart.setOption(option);

    </script>

  </body>


</html>

web link: 155Echarts - 平行坐标系（Parallel Aqi）-阿里云开发者社区

神迹小卒

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
1.Parallel Coordination 平行坐标图

我们最多可以可视化 3 维数据。但是我们有时需要可视化超过 3 维的数据才能获得更多的信息。我们经常使用 PCA 或 t-SNE 来降维并绘制它。在降维的情况下，可能会丢失大量信息。在某些情况下，我们需要考虑所有特征，平行坐标图有助于做到这一点。
复制链接

扫一扫