Haste makes waste

Uda-DataAnalysis-51-机器学习-Dimple.js(web服务器)

Posted on Feb 18, 2018 By lijun

3. 世界杯草图

world cup data

setwd("C:/Users/utane/OneDrive/udacity/48-D3")
getwd()
library(ggplot2)

pf <- read.csv("worldcup.csv",sep=',')

ggplot(data=pf, aes(x=year, y=number)) + geom_bar(stat="identity")

"year","number"
2014,3429873
2010,3167984
2006,3367000
......

image

4. Dimple.js代码文件(web服务器)

  • 使用 Python 开始一个本地服务器。在终端中导航到包含所有代码文件的文件夹地址，然后输入python -m SimpleHTTPServer(python3使用python3 -m http.server)。
C:\Users\utane\OneDrive\udacity\51-dimple>python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...

  • 在浏览器地址栏中前往 localhost:8000，你会在网页中看到图形。

  • 为什么要使用web服务器？

“在某些情况下，你可以在你的 web 浏览器中直接查看本地 HTML 文件，但是有些浏览器出于安全原因设有一定的限制，阻止通过 JavaScript 加载本地文件。也就是说，如果你的 D3 代码尝试拉入任何外部数据文件（如 CSV 或 JSON），它将会失败，而且不会明确说明理由。这并不是 D3 的故障，而是一个浏览器功能，用于防止加载来自第三方不受信任网站的脚本和其他外部文件。”

6. Dimple 柱状图代码概述

参考basic_charts.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
    <script type="text/javascript">
      function draw(data) {
      
      /*
        D3.js setup code
      */

          "use strict";
          var margin = 75,
              width = 1400 - margin,
              height = 600 - margin;

          debugger;
          var svg = d3.select("body")
            .append("svg")
              .attr("width", width + margin)
              .attr("height", height + margin)
            .append('g')
                .attr('class','chart');

      /*
        Dimple.js Chart construction code
      */

          var myChart = new dimple.chart(svg, data);
          var x = myChart.addTimeAxis("x", "year"); 
          myChart.addMeasureAxis("y", "attendance");
          myChart.addSeries(null, dimple.plot.bar);
          myChart.draw();
        };
      </script>
  </head>
<body>
  <script type="text/javascript">
  /*
    Use D3 (not dimple.js) to load the TSV file
    and pass the contents of it to the draw function
    */
  d3.tsv("world_cup.tsv", draw);
  </script>
</body>
</html>

image

7. Javascript 调试器

9. 检查变量和数据

在上面的代码中加入调试用debugger;后，用ctrl+shift+J打开JavaScript调试器，重新加载页面，会停在断点处，在console中：

> data
< (836)...

> console.table(data)
 

最终打印出如下的data的表单：

image

13. 使用Dimple

image

18. 练习:添加 Y 轴

上面的代码中以及添加了debugger，启动调试后，在console中输入：

# 数据已经加载成功
> data
< (836)

# 但因开启了debugger，故后面的svg定义还没有被执行
> svg
< undefined

# 定义svg
> var svg = d3.select("body")
            .append("svg")
              .attr("width", width + margin)
              .attr("height", height + margin)
            .append('g')
                .attr('class','chart');
< undefined

# 定义chart
> var myChart = new dimple.chart(svg, data);
< undefined

# 在chart对象中添加y轴
> var y = myChart.addMeasureAxis("y", "attendance");
< undefined

> y
< dimple.axis {chart: d…e.chart, position: "y", categoryFields: null, measure: "attendance", timeField: undefined, …}

# 在chart对象中添加x轴
> var x = myChart.addTimeAxis("x", "year"); 
< undefined

> x
< dimple.axis {chart: d…e.chart, position: "x", categoryFields: Array(1), measure: null, timeField: "year", …}

> x.chart
< dimple.chart {svg: Array(1), x: "10%", y: "10%", width: "80%", height: "80%", …}

> y.chart
< dimple.chart {svg: Array(1), x: "10%", y: "10%", width: "80%", height: "80%", …}

> myChart
< dimple.chart {svg: Array(1), x: "10%", y: "10%", width: "80%", height: "80%", …}

19. 添加序列和绘制图表

参考basic_charts - attendence.html

# 前面的一个参数stage，表示根据stage进行facet或group
> myChart.addSeries("stage",dimple.plot.bar)
< dimple.series {chart: d…e.chart, x: d…e.axis, y: d…e.axis, z: null, c: null, …}

> myChart.draw()
< dimple.chart {svg: Array(1), x: "10%", y: "10%", width: "80%", height: "80%", …}

最终显示图形如下：

image

23. 更改日期格式

更多具体，参考日期和时间字符串格式

  • 改进后代码如下,这样悬浮后的日期格式与X轴上一样，具体效果可以参考#31中的结果:
          var myChart = new dimple.chart(svg, data);
          var x = myChart.addTimeAxis("x", "year"); 
          myChart.addMeasureAxis("y", "attendance");

          x.dateParseFormat = "%Y"
          x.tickFormat = "%Y"
          x.timeInterval = 4
          myChart.addSeries(null, dimple.plot.bar);
          myChart.draw();

31. 定制Dimple图表

basic_charts-scatter.html

  • 将柱状图修改为点阵+线形图的混合，更能反映变化趋势
  • 修改点的css样式，在鼠标停留后变成红色
  • 添加标题，并将标题居中
  <style>
    circle.dimple-series-1{
      fill:red;
    }
    h2{
      text-align: center;
    }
  </style>

  ...

  d3.select("body").append("h2").text("World Cup Attendance")

  ...
  
  var myChart = new dimple.chart(svg, data);
  var x = myChart.addTimeAxis("x", "year"); 
  myChart.addMeasureAxis("y", "attendance");

  x.dateParseFormat = "%Y"
  x.tickFormat = "%Y"
  x.timeInterval = 4
  myChart.addSeries(null, dimple.plot.scatter);
  myChart.addSeries(null, dimple.plot.line);
  myChart.draw();