devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

鸢尾花数据可视化（html+echarts+d3）_鸢尾花特征可视化

作者：IT小白 | 2024-04-11 01:54:04

赞

踩

鸢尾花特征可视化

鸢尾花数据集如下：
本文图形数据是花瓣长度

中文翻译：id，花瓣长度，花瓣宽度，花萼长度，花萼宽度，品种
Id,SepalLength,SepalWidth,PetalLength,PetalWidth,Species
1,5.1,3.5,1.4,0.2,setosa
2,4.9,3,1.4,0.2,setosa
3,4.7,3.2,1.3,0.2,setosa
4,4.6,3.1,1.5,0.2,setosa

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

思路简述：
网页定义一个盒子标签，存放echarts的图形，在javascrip中写逻辑。
d3读取数据，数据转换和分类，图形设置
echarts官网：

https://echarts.apache.org/zh/index.html

  • 1

总体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>鸢尾花数据可视化</title>
		<script src="js/d3.min.js"></script>
		<script src="js/echarts.min.js" ></script>
	</head>
	<body>
		<div id="main" style="width: 800px;height: 600px;"></div>
		
		<script type="text/javascript">
			var myCharts = echarts.init(document.getElementById('main'));
			
			d3.csv("iris.csv",function(error,data){
				// 3组数据提取及分类
				var setosa=[],versicolor=[],virginica=[],petal_length=[];
				for(var i=0;i<=149;i++){
					petal_length.push(parseFloat(data[i]["PetalLength"]));
					if(setosa.length<50){
						setosa.push([parseFloat(data[i]["PetalLength"]),parseFloat(data[i]["PetalWidth"])]);
					}else if(versicolor.length<50){
						versicolor.push([parseFloat(data[i]["PetalLength"]),parseFloat(data[i]["PetalWidth"])]);
					}else{
						virginica.push([parseFloat(data[i]["PetalLength"]),parseFloat(data[i]["PetalWidth"])]);
					}	
				}
				// 计算三种花的花瓣长度平均值
				var setosa_mean = d3.mean(petal_length.slice(0,50));
				var versicolor_mean = d3.mean(petal_length.slice(50,100));
				var virginica_mean = d3.mean(petal_length.slice(100,150));
				
				// 设置图形的配置项
				option = {
				    title: {
				        text: '鸢尾花数据可视化',
				        subtext: 'Data from: Heinz 2003'
				    },
				    grid: {
				        left: '3%',
				        right: '7%',
				        bottom: '7%',
				        containLabel: true
				    },
				    tooltip: {
				        // trigger: 'axis',
				        showDelay: 0,
				        formatter: function (params) {
				            if (params.value.length > 1) {
				                return params.seriesName + ' :<br/>'
				                + params.value[0] + 'cm '
				                + params.value[1] + 'cm ';
				            }
				            else {
				                return params.seriesName + ' :<br/>'
				                + params.name + ' : '
				                + params.value + 'cm ';
				            }
				        },
				        axisPointer: {
				            show: true,
				            type: 'cross',
				            lineStyle: {
				                type: 'dashed',
				                width: 1
				            }
				        }
				    },
				    toolbox: {
				        feature: {
				            dataZoom: {},
				            brush: {
				                type: ['rect', 'polygon', 'clear']
				            }
				        }
				    },
				    brush: {
				    },
				    legend: {
				        data: ['setosa', 'versicolor','virginica'],
				        left: 'center',
				        bottom: 10
				    },
				    xAxis: [
				        {
				            type: 'value',
				            scale: true,
				            axisLabel: {
				                formatter: '{value} cm'
				            },
				            splitLine: {
				                show: false
				            }
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value',
				            scale: true,
				            axisLabel: {
				                formatter: '{value} cm'
				            },
				            splitLine: {
				                show: false
				            }
				        }
				    ],
				    series: [
				        //  散点图配置项，由于在一张图，故大体内容一样
				        {
				            name: 'setosa',
				            type: 'scatter',
				            emphasis: {
				                focus: 'series'
				            },
				            data: setosa,
							
				            markArea: {
				                silent: true,
				                itemStyle: {
				                    color: 'transparent',
				                    borderWidth: 1,
				                    borderType: 'dashed'
				                },
				                data: [[{
				                    name: 'setosa分布区间',
				                    xAxis: 'min',
				                    yAxis: 'min'
				                }, {
				                    xAxis: 'max',
				                    yAxis: 'max'
				                }]]
				            },
				            markPoint: {
				                data: [
				                    {type: 'max', name: 'Max'},
				                    {type: 'min', name: 'Min'}
				                ]
				            },
				            markLine: {
				                lineStyle: {
				                    type: 'solid'
				                },
				                data: [
				                    {type: 'average', name: '平均值'},
				                    { xAxis: setosa_mean }
				                ]
				            }
				        },
				        {
				            name: 'versicolor',
				            type: 'scatter',
				            emphasis: {
				                focus: 'series'
				            },
				            data: versicolor,
				        	
				            markArea: {
				                silent: true,
				                itemStyle: {
				                    color: 'transparent',
				                    borderWidth: 1,
				                    borderType: 'dashed'
				                },
				                data: [[{
				                    name: 'versicolor分布区间',
				                    xAxis: 'min',
				                    yAxis: 'min'
				                }, {
				                    xAxis: 'max',
				                    yAxis: 'max'
				                }]]
				            },
				            markPoint: {
				                data: [
				                    {type: 'max', name: 'Max'},
				                    {type: 'min', name: 'Min'}
				                ]
				            },
				            markLine: {
				                lineStyle: {
				                    type: 'solid'
				                },
				                data: [
				                    {type: 'average', name: '平均值'},
				                    { xAxis: versicolor_mean }
				                ]
				            }
				        },
						{
						    name: 'virginica',
						    type: 'scatter',
						    emphasis: {
						        focus: 'series'
						    },
						    data: virginica,
							
						    markArea: {
						        silent: true,
						        itemStyle: {
						            color: 'transparent',
						            borderWidth: 1,
						            borderType: 'dashed'
						        },
						        data: [[{
						            name: 'virginica分布区间',
						            xAxis: 'min',
						            yAxis: 'min'
						        }, {
						            xAxis: 'max',
						            yAxis: 'max'
						        }]]
						    },
						    markPoint: {
						        data: [
						            {type: 'max', name: 'Max'},
						            {type: 'min', name: 'Min'}
						        ]
						    },
						    markLine: {
						        lineStyle: {
						            type: 'solid'
						        },
						        data: [
						            {type: 'average', name: '平均值'},
						            { xAxis: virginica_mean }
						        ]
						    }
						}
				    ]
				};
			myCharts.setOption(option);
				
			});
			
		</script>
	</body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239

效果图如下：
在这里插入图片描述
调试
输出d3读取的数据

data.length     // 获取数据的长度
console.log(data[i])       // 控制台输出
parseFloat（数据）     // 转换数据类型


  • 1
  • 2
  • 3
  • 4

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/402232
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号