林子雨编著《大数据基础编程、实验和案例教程》教材第10章的代码

大数据技术原理与应用

林子雨编著《大数据基础编程、实验和案例教程》(教材官网)教材中的代码,在纸质教材中的印刷效果不是很好,可能会影响读者对代码的理解,为了方便读者正确理解代码或者直接拷贝代码用于上机实验,这里提供全书配套的所有代码。
查看教材所有章节的代码

第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])
            };
        })
    });