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

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

第11章典型可视化工具的使用方法

教材第174页

<script src="http://d3js.org/d3.v5.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.v5.min.js"> </script>  
    </head>  
    <body>  
    <script type="text/javascript">  
           d3.select("body").append("p").text("New paragraph!");        
    </script>  
    </body>  
</html>

教材第175页

<!DOCTYPE html>
<html>
  <head>
    <title>testD3-1.html</title>
    <script type="text/javascript" src="http://d3js.org/d3.v5.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>

教材第176页

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.v5.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>

教材第177页

<rect x="0" y="0" width="500" height="50"/>

<circle cx="250" cy="25" r="25"/>

教材第178页

<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.v5.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>

教材第180页

<!DOCTYPE html>  
<html>  
  <head>  
        <meta charset="utf-8">  
        <title>testD3-9-drawScatterLot.html</title>  
        <script type="text/javascript" src="http://d3js.org/d3.v5.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>

教材第182页

<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.js"></script>
</header>
</html>

教材第183页

<!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>

教材第184页

toolbox: {
        show : true,
        feature : {
            dataZoom: {},
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
}

厦大数据库实验室博客

第11章 典型可视化工具的使用方法

教材第174页

教材第175页

教材第176页

教材第177页

教材第178页

教材第180页

教材第182页

教材第183页

教材第184页

第11章典型可视化工具的使用方法