D3.js新手到專家：使用D3.js進行交互式可視化的完整學習路徑
導論
如果有兩大推動數字新聞的基本趨勢，這將會是：
- 增加產生的數據量和捕獲他們的客戶數量
- 增加網絡上(或移動網絡上)客戶之間的滲透性和在網絡上通過數據講故事的需求。
這就是D3.js值得注意的地方。D3.js已經成為交互式數據可視化的圣杯。
數據驅動腳本語言VS其他方法：
我認為D3.js的真正潛力要大于它在數據科學界的流行度。主要的原因是比起其他數據科學或多領域交叉學習，D3.js需要不同的技能組合（比如超文本標記語言，級聯樣式表和腳本語言的知識）。并且已經有現成的工具可提供設施，比如商業分析軟件和商業智能工具軟件。
然而如果你想以較低的成本將自定義儀表盤或者數據故事發布到網上，D3.js在目前是最好的可獲取的方法，所以我們認為應該要創造這種學習方法。
我們現在已經為新手設計了一種學習方法，如果你開始覺得這種方法太過于咄咄逼人，別擔心，這很正常。但是，如果你決定了在數據驅動腳本語言上邁開第一步，我們承諾會不斷幫助你去克服在學習路上的臉型障礙。
提示：這個學習路徑的設計是在默認你是一個編程和網頁開發語言（比如超文本標記語言，級聯樣式表和腳本語言）的新手。如果你已經熟悉這些了，你可以跳過相應部分。
什么是數據驅動文件？
數據驅動文件(D3)是一個開源的腳本語言庫，它可用于創建能夠在現代瀏覽器上啟用的動態、交互式可視化。它主要通過超文本標記語言，可縮放矢量圖形，級聯樣式表和腳本語言運行。數據驅動文件是邁克·博斯托克創建的，邁克·博斯托克是一個計算機科學家和數據可視化專家。
數據驅動文件運行得非常快,響應和支持大型數據集在網頁瀏覽器上創建動態動畫。并且數據驅動文件能夠收集有用的編碼組件和插件使它的代碼可重用性。
給初學者的建議：如果你完全是個新手,你可能會在Java編程語言和腳本語言這兩者之間感到困惑。他們是兩種完全獨立的語言。Java編程語言主要用于軟件和應用程序的開發，而腳本語言則是用來創建交互式網頁的。
第0步：動機——你為什么學習數據驅動文件？
我十分認同西蒙·西內克的黃金圈理論。他說，當你開始著手去做某件事情，問問自己為什么要去做。
當你開始你的學習之旅之前,你應該對這個問題的回答:我為什么要學習數據驅動文件?或數據驅動文件對我有怎樣的提升?
讓我來幫助你找到答案。去看看斯科特?莫里看的關于網絡交互式數據可視化的演講，你就會了解到創建網絡可視化的真正威力。
5個真實世界的例子：
這非常重要！讓我來向你展示一些通過使用數據驅動創建的可視化。你不需要分析這些可視化,但是需要收集靈感和創建一個的沖動。
- 1，2012年1月在紐約發生的警察罷工事件
- 2，馬爾可夫過程
- 3，為了機器學習的可視化介紹
- 4，賽道帶來的勝利
- 5，奧斯卡競爭者之間的聯系
我強烈建議花一些時間在每一個頁面上，這些頁面上的元素都是交互進行的。你就會開始看到數據驅動文件會給你帶來什么樣的而力量了。
瀏覽其他 600個數據驅動文件的例子 。
數據可視化的重要性
如果你已經看了上面的例子，我相信我不再需要強調數據可視化的重要性了，你已經知道數據可以多大程度地為它本身解說。作為一個數據科學家,你的真實動機應該是向利益相關者解釋模型。對于不會數據分析的利益相關者，真正呈現在他們面前的是現時的數據。他們不想看到數據，他們只想看到通過數字編織出的精巧美麗的故事。如果你能夠通過數據驅動完成這項任務，你就很棒了。
第一步：基礎性學習——超文本標記語言，超文本標記語言，可縮放矢量圖形，級聯樣式表和腳本語言
第一個明確編程的基礎。如果你沒有編程的先驗知識，可以在Codecademy網站從超文本標記語言和級聯樣式表課程開始學習。這是一個互動的課程和最佳的起點。
一旦你已經學會了超文本標記語言和級聯樣式表，接下來要學習腳本語言的基礎知識了，你也可以在Codecademy這個網站上學習腳本語言的課程。
你也可以在Dash的網站上的論壇會上以一種互動的形式學習超文本標記語言、級聯樣式表和腳本語言。當你學會了腳本語言后，下一步就是學習jQuery。堅持在codecademy上繼續學習。這是一非常短的課程，但是對于數據驅動文件的學習很有幫助。
最后，你需要學習可縮放矢量圖形。在數據驅動文件創建各種嵌入式圖形可視化中起著至關重要的作用。對于可縮放矢量圖形的學習，你可以跟著w3學校的教程來學習。
此時，你應該可以創建基本的交互網站頁面。現在你需要的是獲得練手的經驗。
測試你的技能：為了測評你的超文本標記語言、級聯樣式表和腳本語言的知識，你可以去做一些創建網頁項目的練習。這能夠幫助你在編程方面獲得一些自信。
除此之外，如果你還在這些基本原理上不明白，從Freecodecamp上學習這個完整的課程。如果你已經成功地掌握了所有這些課程，你在進入下一步的學習之前已經非常棒了。
第二步：下載、安裝和運行數據驅動文件
現在你需要安裝一個用來編程的文本編輯器，文本編輯器的選擇至關重要。選擇一個好的文本編輯器能夠提供一種真正刺激的環境給你編程。我很喜歡是我正在使用的Sublime Text編輯器，也推薦給你們。這是一個開放性資源，對使用者來說非常快也非常簡單。它支持各種有用的插件并且擁有很好的定制選項編碼的經驗。
在你安裝好文本編輯器之后，下一步就是下載和安裝數據驅動文件圖書館，這也是很簡單的。
你可以在這里下載完整的數據驅動文件的壓縮包文件，在你的本地磁盤創建一個文件夾，然后解壓就好了，你可以在這個文件夾里找到被命名為d3.js和min。js的腳本語言文件夾。你可以通過多種方式在文本編輯器上加載D3庫，你可以從你的本地磁盤上加載或者其來源。別忘記在開頭部分加上這個程序語言。
<!--Load D3 from source website--> <script src="http://d3js.org/d3.v3.min.js"></script> <!--Load D3 from local machine--> <script type="text/javascript" src="d3.min.js"></script>
第三步：開始在數據驅動文件上工作——
接下來，你應該在 Udacity 網站上第1b章上學習。它將通過一個簡單的例子給你介紹D3的概念，一旦你理解透了這個基本的例子，你就可以理解更多的關于怎么創建數據基本原始的細節。
你可以挑選以下內容中的一個進行學習：
- Chapter 7 – Chapter 20 from dashingd3 tutorials; or
- Chapter 4 – Chapter 17 from Book from Scott Murray
如果你有超文本編輯、級聯樣式表和腳本語言的知識，這兩部分內容都非常細節地給你介紹了D3的多種多樣的概念。
第四步：練習
到現在為止，你應該掌握了D3的工作知識，在使用這些不同的語言進行編程的時候，你應該感覺到非常舒服。現在我們就應該練習一些基本的可視化工具，這些工具你都在以上步驟學習過了。
下面的這些例子的目的是給你練習的，先不要檢驗這些代碼，而是你自己先去嘗試，然后當你遇到問題了就嘗試著想出一些解決方案。
例1：創建一個餅圖
<!DOCTYPE html>
<html>
<head>
<title>Path with Line</title>
<script type="text/javascript" src="d3.min.js"></script>
</head>
<body>
<script>
var data = [20, 50, 80];
var r = 150;
var canvas = d3.select("body").append("svg")
.attr("width", 1500)
.attr("height", 1500);
var color = d3.scale.ordinal()
.range(["orange", "red", "green"]);
var group = canvas.append("g")
.attr("transform", "translate(200, 200)");
var arc = d3.svg.arc()
.innerRadius(80)
.outerRadius(r);
var pie = d3.layout.pie()
.value ( function(d) { return d; });
var arcs = group.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc");
arcs.append("path")
.attr("d", arc)
.attr("fill", function(d) { return color(d.data)});
arcs.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("text-anchor", "middle")
.attr("font-size", "1.5em")
.text(function(d) { return d.data; });
</script> </body> </html>
輸出：它看起來就像這樣
第二個例子：創建一個基于“增大化現實”技術的動畫
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3.min.js"></script>
</head>
<body>
<div>
<h2>Animated Bar Chart</h2>
<div id="chart"></div>
</div>
<script>
var bardata = [];
for (var i=0; i<50; i++){
bardata.push(Math.round(Math.random()*30))
}
bardata.sort(function compareNumbers(a,b){
return a-b;
})
var margin = { top: 30, right: 30, bottom: 40, left: 50}
var height = 400 - margin.top - margin.bottom,
width = 600 - margin.right - margin.left,
barWidth = 50,
barOffset = 5;
var tempColor;
var tooltip = d3.select('body').append('div')
.style('position', 'absolute')
.style('padding', '0 10px')
.style('background', 'white')
.style('opacity', 0)
var yScale = d3.scale.linear()
.domain([0, d3.max(bardata)])
.range([0, height])
var xScale = d3.scale.ordinal()
.domain(d3.range(0,bardata.length))
.rangeBands([0,width], .3)
var color = d3.scale.linear()
.domain([0, bardata.length*.63, bardata.length])
.range(['#ffb832','#c61c6f','#d33682'])
var myChart = d3.select('#chart').append('svg')
.style('background', '#e7e0cb')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform','translate(' + margin.left+','+ margin.top + ')')
.selectAll('rect')
.data(bardata)
.enter()
.append('rect')
.style('fill', function(d,i){
return color(i);
})
.attr('width', xScale.rangeBand())
.attr('x', function(d,i){
return xScale(i);
})
.attr('height', 0)
.attr('y', height)
.on('mouseover', function(d){
tooltip.transition()
.style('opacity', 0.9)
tooltip.html(d)
.style('left', (d3.event.pageX - 35)+'px')
.style('top', (d3.event.pageY - 40)+'px')
tempColor = this.style.fill;
d3.select(this)
.style('opacity', .5)
.style('fill', 'yellow')
})
.on('mouseout', function(d){
d3.select(this)
.style('opacity', 1)
.style('fill', tempColor)
})
myChart.transition()
.attr('height', function(d){
return yScale(d);
})
.attr('y', function(d){
return height - yScale(d);
})
.delay(function(d,i){
return i*20;
})
.duration(5000)
.ease('elastic')
var vGuideScale = d3.scale.linear()
.domain([0, d3.max(bardata)])
.range([height, 0])
var vAxis = d3.svg.axis()
.scale(vGuideScale)
.orient('left')
.ticks(10)
var vGuide = d3.select('svg').append('g')
vAxis(vGuide)
vGuide.attr('transform','translate('+margin.left+',' + margin.top + ')')
vGuide.selectAll('path')
.style({fill: 'none', stroke: '#000'})
vGuide.selectAll('line')
.style({stroke: '#000'})
var hAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
.tickValues(xScale.domain().filter(function(d,i){
return !(i % (bardata.length/5));
}))
var hGuide = d3.select('svg').append('g')
hAxis(hGuide)
hGuide.attr('transform', 'translate('+margin.left+',' + (height + margin.top) + ')')
hGuide.selectAll('path')
.style({fill: 'none', stroke: '#000'})
hGuide.selectAll('line')
.style({stroke: '#000'})
</script>
</body>
</html>
第三個例子：創建一個簡單的地圖輪廓
我已經波士頓附近的地圖展示了這個實例。這只是為了理解地圖制作的概要，并沒有展示較為深入的知識。
<html>
<head>
<title>Basic D3 map</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="neighborhoods.js"></script>
</head>
<body>
<script>
var width = 700,
height = 580;
var svg = d3.select( "body" )
.append( "svg" )
.attr( "width", width )
.attr( "height", height );
var g = svg.append( "g" );
var albersProjection = d3.geo.albers()
.scale( 190000 )
.rotate( [71.057,0] )
.center( [0, 42.313] )
.translate( [width/2,height/2] );
var geoPath = d3.geo.path()
.projection( albersProjection );
g.selectAll( "path" )
.data( neighborhoods_json.features )
.enter()
.append( "path" )
.attr( "fill", "#ccc" )
.attr( "d", geoPath );
</script>
</body>
</html>
輸出：這是波士頓地區地圖的輪廓
這些例子只是來滿足你的好奇心，戲真正地開始是在處理動畫的地理地圖上。一旦你在創建這些基礎的可視化時候感到很順暢舒適了，你就可以進入到下一個階段。對于地圖來說，D3的geojson和topojson格式效果最好。Geojson是默認的地理數據文件，但是，topojson被認為是能夠在小尺寸（即壓縮數據）里更快且加載更大尺寸的數據集。
其他有用資源
以下是一些您可能找到的更多有用的資源：
- Github Repository of d3.js Tutorials
- Complete Udacity Course on d3.js
- Best 油Tube Tutorial on d3.js
- D3 Official Website
- D3 Tips and Tricks – Free eBook
不過，如果你發現D3很難學，隨時在下面的評論部分中分享你的問題。
原文： analyticsvidhya
本文由數據分析網– 肖月翻譯！歡迎加入翻譯組。
肖月：統計學專業畢業生，擅長SPSS等統計分析軟件，喜歡寫文章。
注：數據分析網遵循行業規范，任何轉載的稿件都會明確標注作者和來源，若標注有誤或遺漏，請聯系主編郵箱：afenxi@afenxi.com
來自：http://www.afenxi.com/post/23994