鸢尾花数据集如下:
本文图形数据是花瓣长度
中文翻译: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
思路简述:
网页定义一个盒子标签,存放echarts的图形,在javascrip中写逻辑。
d3读取数据,数据转换和分类,图形设置
echarts官网:
https://echarts.apache.org/zh/index.html
总体代码如下:
<!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>
效果图如下:
调试
输出d3读取的数据
data.length // 获取数据的长度
console.log(data[i]) // 控制台输出
parseFloat(数据) // 转换数据类型