数据视觉化：初遇dimple.js

这几天在学数据视觉化，学到了d3.js和基于d3的dimple.js。
Dimple.js虽然和d3比缺少了灵活性，但是上手比较简单，只要几行代码就可以做出一个比较美观的图。

第一步

我这次想要给英超联赛2000到2016的射手榜第一名做一个统计表单。我先从网上找来了他们的数据，整合进一个topscorer.csv文件：

index,Season,Nationality,Name,Club,Goal
1,2000-01,Netherlands,Jimmy Floyd Hasselbaink,Chelsea FC,23
2,2001-02,France,Thierry Henry,Arsenal FC,24
3,2002-03,Netherlands,Ruud van Nistelrooy,Manchester United,25
4,2003-04,France,Thierry Henry,Arsenal FC,30
5,2004-05,France,Thierry Henry,Arsenal FC,25
6,2005-06,France,Thierry Henry,Arsenal FC,27
7,2006-07,Ivory Coast,Didier Drogba,Chelsea FC,20
8,2007-08,Portugal,Cristiano Ronaldo,Manchester United,31
9,2008-09,France,Nicolas Anelka,Chelsea FC,19
10,2009-10,Ivory Coast,Didier Drogba,Chelsea FC,29
11,2010-11,Argentina,Carlos Tevez,Manchester City,21
12,2010-11,Bulgaria,Dimitar Berbatov,Manchester United,21
13,2011-12,Netherlands,Robin van Persie,Arsenal FC,30
14,2012-13,Netherlands,Robin van Persie,Manchester United,26
15,2013-14,Uruguay,Luis Suarez,Liverpool FC,31
16,2014-15,Argentina,Kun Aguero,Manchester City,26
17,2015-16,England,Harry Kane,Tottenham Hotspur,25

第二步：

接着在html文件中添加d3,js和dimple.js

    <script src="http://d3js.org/d3.v4.min.js"></script>
    <script src="http://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>

第三步：

在html页面中添加svg，我的理解就是添加一个画布，以供我们往上画表格。

  var svg = dimple.newSvg("#chartContainer", 1280, 660); 

第四步：

写画图的function

  d3.csv("topscorer.csv", function (data) { /*读取csv*/
        var myChart = new dimple.chart(svg, data); /*定义一个新的chart*/
        myChart.setBounds(50, 40, 960, 560); /*设定边界*/
        var x = myChart.addCategoryAxis("x", ["Season","Name"]); /*画x轴*/
        x.title = "Season" /*修改x轴的标题*/
        x.addOrderRule("Season", false); /*修改x轴排列顺序*/
        var y = myChart.addMeasureAxis("y", "Goal");  /*画y轴，按照进球数*/
        y.title = "Goals" /*修改y轴的标题*/
        myChart.addSeries("Club", dimple.plot.bubble); /*添加bubble，按照俱乐部分类*/
        myChart.addLegend(1100, 200, 90, 300, "left"); /*在画面左侧添加图示*/
        myChart.draw(); /*画图*/
      });

这样简单的四步就完成了一幅简单散点图的制作，最后成果如图所示：
Premier League Top Scorers 2000-2016