這幾天在學(xué)數(shù)據(jù)視覺化，學(xué)到了d3.js和基于d3的dimple.js剪决。
Dimple.js雖然和d3比缺少了靈活性驯绎，但是上手比較簡單市埋，只要幾行代碼就可以做出一個比較美觀的圖。
第一步
我這次想要給英超聯(lián)賽2000到2016的射手榜第一名做一個統(tǒng)計表單互墓。我先從網(wǎng)上找來了他們的數(shù)據(jù)必尼，整合進(jìn)一個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); /*設(shè)定邊界*/
var x = myChart.addCategoryAxis("x", ["Season","Name"]); /*畫x軸*/
x.title = "Season" /*修改x軸的標(biāo)題*/
x.addOrderRule("Season", false); /*修改x軸排列順序*/
var y = myChart.addMeasureAxis("y", "Goal"); /*畫y軸，按照進(jìn)球數(shù)*/
y.title = "Goals" /*修改y軸的標(biāo)題*/
myChart.addSeries("Club", dimple.plot.bubble); /*添加bubble酸休，按照俱樂部分類*/
myChart.addLegend(1100, 200, 90, 300, "left"); /*在畫面左側(cè)添加圖示*/
myChart.draw(); /*畫圖*/
});
這樣簡單的四步就完成了一幅簡單散點圖的制作骂租，最后成果如圖所示：
Premier League Top Scorers 2000-2016
