林子雨编著《大数据基础编程、实验和案例教程》(教材官网)教材中的代码，在纸质教材中的印刷效果不是很好，可能会影响读者对代码的理解，为了方便读者正确理解代码或者直接拷贝代码用于上机实验，这里提供全书配套的所有代码。
查看教材所有章节的代码
第10章 典型的可视化工具的使用方法
教材第187页
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
d3.select("body").append("p").text("New paragraph!");
<html>
<head>
<meta charset="utf-8">
<title>D3测试</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"> </script>
</head>
<body>
<script type="text/javascript">
d3.select("body").append("p").text("New paragraph!");
</script>
</body>
</html>
教材第188页
<!DOCTYPE html>
<html>
<head>
<title>testD3-1.html</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("New paragraph!");
</script>
</html>
教材第189页
div.bar {
display: inline-block;
width: 20px;
height: 75px; /* We'll override this later */
background-color: teal;
}
.attr("class", "bar")
.style("height", function(d) {
var barHeight = d * 5; //Scale up by factor of 5
return barHeight + "px";
});
margin-right: 2px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testD3-3-drawingDivBar</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"> </script>
<style type="text/css">
div.bar {
display: inline-block;
width: 20px;
height: 75px; /* Gets overriden by D3-assigned height below */
margin-right: 2px;
background-color: teal;
}
</style>
</head>
<body>
<script type="text/javascript">
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
.style("height", function(d) {
var barHeight = d * 5;
return barHeight + "px";
});
</script>
</body>
</html>
教材第190页
<rect x="0" y="0" width="500" height="50"/>
<circle cx="250" cy="25" r="25"/>
教材第191页
<ellipse cx="250" cy="25" rx="100" ry="25"/>
<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>
<text x="250" y="25">Easy-peasy</text>
<text x="250" y="155" font-family="sans-serif" font-size="25" fill="gray">Easy-peasy</text>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testD3-6-SVG.html</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
.pumpkin {
fill: yellow;
stroke: orange;
stroke-width: 5;
}
</style>
</head>
<body>
<script type="text/javascript"></script>
<svg width=500 height=960>
<rect x="0" y="0" width="500" height="50"/>
<ellipse cx="250" cy="225" rx="100" ry="25"/>
<line x1="0" y1="120" x2="500" y2="50" stroke="black"/>
<text x="250" y="155" font-family="sans-serif"
font-size="25" fill="gray">Easy-peasy</text>
<circle cx="25" cy="80" r="20"
fill="rgba(128, 0, 128, 0.75)"
stroke="rgba(0, 255, 0, 0.25)"
stroke-width="100"/>
<circle cx="75" cy="80" r="20"
fill="rgba(0, 255, 0, 0.75)"
stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/>
<circle cx="125" cy="80" r="20"
fill="rgba(255, 255, 0, 0.75)"
stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/>
<rect x="0" y="300" width="30" height="30" fill="purple"/>
<rect x="20" y="305" width="30" height="30" fill="blue"/>
<rect x="40" y="310" width="30" height="30" fill="green"/>
<rect x="60" y="315" width="30" height="30" fill="yellow"/>
<rect x="80" y="320" width="30" height="30" fill="red"/>
<circle cx="25" cy="425" r="22" class="pumpkin"/>
<circle cx="25" cy="525" r="20" fill="rgba(128, 0, 128, 1.0)"/>
<circle cx="50" cy="525" r="20" fill="rgba(0, 0, 255, 0.75)"/>
<circle cx="75" cy="525" r="20" fill="rgba(0, 255, 0, 0.5)"/>
<circle cx="100" cy="525" r="20" fill="rgba(255, 255, 0, 0.25)"/>
<circle cx="125" cy="525" r="20" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="25" cy="625" r="20" fill="purple"
stroke="green" stroke-width="10"
opacity="0.9"/>
<circle cx="65" cy="625" r="20" fill="green"
stroke="blue" stroke-width="10"
opacity="0.5"/>
<circle cx="105" cy="625" r="20" fill="yellow"
stroke="red" stroke-width="10"
opacity="0.1"/>
</svg>
</body>
</html>
教材第193页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testD3-9-drawScatterLot.html</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 600;
var h = 100;
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
];
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0];
})
.attr("cy", function(d) {
return d[1];
})
.attr("r", function(d) {
return Math.sqrt(h - d[1]);
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d[0] + "," + d[1];
})
.attr("x", function(d) {
return d[0];
})
.attr("y", function(d) {
return d[1];
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");
</script>
</body>
</html>
教材第207页
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>
</header>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
教材第209页
toolbox: {
show : true,
feature : {
dataZoom: {},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
}
教材第211页
title: {
text: '全国主要城市空气质量',//主标题的文字
subtext: 'data from PM25.in',//子标题的文字
sublink: 'http://www.pm25.in',//子标题的链接
left: 'center',//标题置于中间
textStyle: {//设置主标题文字的风格
color: '#fff'//设置主标题的颜色
}
},
toolbox: {
show : true,//是否显示工具栏，默认显示
feature : {
mark : {show: true},//这个在ECharts2.0版本中是用于画辅助线，3.0版取消了
dataZoom : {show: true},//数据区域缩放
dataView : {show: true, readOnly: false},//数据视图工具
restore : {show: true},//配置项还原
saveAsImage : {show: true}//保存为图片
}
},
tooltip: {
trigger: 'item'//这个为触发类型，ECharts支持两种触发类型，’item’为数据项图形触发，’axis’为坐标轴触发
},
legend: {
orient: 'vertical',//图例布局方向，有水平和垂直两种
top: 'bottom',//置于底端
left: 'right',//同时置于右边
data:['pm2.5'],//这个主要用于显示图例的文本和图标，图标默认为圆形
textStyle: {
color: '#fff'//图例字体的颜色，默认白色
}
},
//data代码写的较为简略，还可以如下详细的设置：
data:[{
name:'pm2.5',//图例的文本
icon:'circle',//图例的图标，还可以有’diamond’,’triangle’等等
textStyle:{
color:'white'//文本的颜色
}
}],
教材第212页
visualMap: {
min: 0,//视觉组件最小值，
max: 200,//视觉组件最大值，
calculable: true,//是否启用值域漫游，即视觉组件中的最大和最小值是可以拖动的
color: ['#d94e5d','#eac736','#50a3ba'],//数据组件的三种颜色，有柔和的过渡
textStyle: {
color: '#fff'//文本的颜色，即数字0和200的颜色
}
},
geo: {
map: 'china',//地图类型，这里用的是中国地图，ECharts还支持其他地图
//图形上的文本标签，课用于说明图形的一些数据信息，比如值，名称等。在这个地图中，即为省的名称
label: {
emphasis: {
show: false//如果改为true，鼠标浮在省份上，会显示省份的名称
}
},
//地图区域的多边形 图形样式，有 normal 和 emphasis 两个状态，normal 是图形正常的样式，emphasis 是图形高亮的样式，比如鼠标悬浮或者图例联动高亮的时候会使用 emphasis 作为图形的样式。
itemStyle: {
normal: {
areaColor: '#323c48',//正常情况显示的省份颜色
borderColor: '#111'//正常情况下省份的边界颜色
},
emphasis: {
areaColor: '#2a333d'//鼠标浮在省份上时，即高亮时省份的颜色
}
}
},
教材第213页
series: [
{
name: 'pm2.5',//这个系列图表的名称
type: 'scatter’//图表的类型，这里使用的是散点（气泡）图
coordinateSystem: 'geo',//使用地理坐标系，还有二维坐标系和极坐标系
data: convertData([//这是个函数，将数据拼接成指定格式。
]),
symbolSize: 12,//图标的大小
label: {//图形上的文本标签，可用于说明图形的一些数据信息。
normal: {
show: false//图标上是否显示数值，如果改为true，则每个图标上有相应的数值
},
emphasis: {
show: false
}
},
itemStyle: {//图标的样式
emphasis: {//图的高亮样式
borderColor: '#fff',//高亮时的边界颜色
borderWidth: 1//高亮时边界宽度
}
}
}
]
教材第214页
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];//取出城市的坐标
if (geoCoord) {
res.push(geoCoord.concat(data[i].value));//将空气质量值拼接在坐标后面
}
}
return res;
};
教材第215页
//这是图中飞机图形的路径，用于设置标记（symbol）
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
//这个函数用于取出data中所有数据的起点和终点的坐标
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord
}, {
coord: toCoord
}]);
}
}
return res;
};
var color = ['#a6c84c', '#ffa022', '#46bee9'];//对应图中三个城市迁徙图的颜色
var series = [];//三个系列图变量，可以push方法将属性添加进series中。
[['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {
//分别将上述三个item传入function函数
//并调用function函数，目的是绘制三个城市的迁徙图
series.push({
name: item[0] + ' Top10',//系列名称
type: 'lines',//系列使用的图类型
zlevel: 1,//第一层，图表是有分层的，用于更好展示图表
effect: {
show: true,//开启特效，即为图中白色飞点
period: 6,//特效点飞行的时间
trailLength: 0.7,//特效点尾部长度
color: '#fff',//特效颜色，图中为白色
symbolSize: 3//特效点的大小
},
lineStyle: {
normal: {
color: color[i],//特效路径的颜色，如果width为0,则不显示
width: 0,//路径宽度，0则没有显示画出路径
curveness: 0.2//特效点路径的曲率，值越大，越弯曲
}
},
data: convertData(item[1])//利用函数求出航线起点和终点的坐标，当绘制北京迁徙图时，item[1]即为BJData，
},
教材第216页
{
name: item[0] + ' Top10',//系列名称
type: 'lines',//特效线图
zlevel: 2,//第二层
effect: {//图中飞机特效的配置
show: true,//显示特效
period: 6,//特效动画的时间
trailLength: 0,// 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
symbol: planePath,//飞机图形的路径
symbolSize: 15//飞机大小
},
lineStyle: {//飞机航线风格
normal: {
color: color[i],//飞机航线的颜色
width: 1,//飞机航线的宽度
opacity: 0.4,//飞机航线透明度，为0时，则不绘制航线
curveness: 0.2//飞机航线的弯曲程度
}
},
data: convertData(item[1])//数据，即航线的起点和终点的坐标
},
{
name: item[0] + ' Top10',//系列名称
type: 'effectScatter',//系列使用图表类型
coordinateSystem: 'geo',//系列使用坐标类型，这里没地图坐标
zlevel: 2,//第二层
rippleEffect: {
brushType: 'stroke'//波纹的填充方式，可以设置为’stroke’和‘fill’，’stroke’只是在点外围设置涟漪，’fill’涟漪填充更圆满
},
label: {//设置图标说明文字
normal: {
show: true,
position: 'right',//文字在图标右边
formatter: '{b}'//设置显示的文字，可以设置{a}, {b}，{c}，分别表示系列名，数据名，数据值
}
},
symbolSize: function (val) {
return val[2] / 8;//根据每个节点的值，设置涟漪节点的大小
},
itemStyle: {
normal: {
color: color[i]//设置涟漪节点的颜色
}
},
data: item[1].map(function (dataItem) {//设置数据，即为每个省份的名称+省份坐标+省份的值
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
});