D3.js新手到专家：使用D3.js进行交互式可视化的完整学习路径
椁胨
8年前
<p>导论</p> <p>如果有两大推动数字新闻的基本趋势，这将会是：</p> <ul> <li>增加产生的数据量和捕获他们的客户数量</li> <li>增加网络上(或移动网络上)客户之间的渗透性和在网络上通过数据讲故事的需求。</li> </ul> <p>这就是D3.js值得注意的地方。D3.js已经成为交互式数据可视化的圣杯。</p> <p>数据驱动脚本语言VS其他方法：</p> <p>我认为D3.js的真正潜力要大于它在数据科学界的流行度。主要的原因是比起其他数据科学或多领域交叉学习，D3.js需要不同的技能组合（比如超文本标记语言，级联样式表和脚本语言的知识）。并且已经有现成的工具可提供设施，比如商业分析软件和商业智能工具软件。</p> <p>然而如果你想以较低的成本将自定义仪表盘或者数据故事发布到网上，D3.js在目前是最好的可获取的方法，所以我们认为应该要创造这种学习方法。</p> <p><img src="https://simg.open-open.com/show/0dcf5c90a95ce829bdbe45cf6e649dd8.jpg"></p> <p>我们现在已经为新手设计了一种学习方法，如果你开始觉得这种方法太过于咄咄逼人，别担心，这很正常。但是，如果你决定了在数据驱动脚本语言上迈开第一步，我们承诺会不断帮助你去克服在学习路上的脸型障碍。</p> <p>提示：这个学习路径的设计是在默认你是一个编程和网页开发语言（比如超文本标记语言，级联样式表和脚本语言）的新手。如果你已经熟悉这些了，你可以跳过相应部分。</p> <p>什么是数据驱动文件？</p> <p>数据驱动文件(D3)是一个开源的脚本语言库，它可用于创建能够在现代浏览器上启用的动态、交互式可视化。它主要通过超文本标记语言，可缩放矢量图形，级联样式表和脚本语言运行。数据驱动文件是迈克·博斯托克创建的，迈克·博斯托克是一个计算机科学家和数据可视化专家。</p> <p>数据驱动文件运行得非常快,响应和支持大型数据集在网页浏览器上创建动态动画。并且数据驱动文件能够收集有用的编码组件和插件使它的代码可重用性。</p> <p>给初学者的建议：如果你完全是个新手,你可能会在Java编程语言和脚本语言这两者之间感到困惑。他们是两种完全独立的语言。Java编程语言主要用于软件和应用程序的开发，而脚本语言则是用来创建交互式网页的。</p> <h3>第0步：动机——你为什么学习数据驱动文件？</h3> <p>我十分认同西蒙·西内克的黄金圈理论。他说，当你开始着手去做某件事情，问问自己为什么要去做。</p> <p>当你开始你的学习之旅之前,你应该对这个问题的回答:我为什么要学习数据驱动文件?或数据驱动文件对我有怎样的提升?</p> <p>让我来帮助你找到答案。去看看斯科特?莫里看的关于网络交互式数据可视化的演讲，你就会了解到创建网络可视化的真正威力。</p> <p>5个真实世界的例子：</p> <p>这非常重要！让我来向你展示一些通过使用数据驱动创建的可视化。你不需要分析这些可视化,但是需要收集灵感和创建一个的冲动。</p> <ul> <li>1，2012年1月在纽约发生的警察罢工事件</li> <li>2，马尔可夫过程</li> <li>3，为了机器学习的可视化介绍</li> <li>4，赛道带来的胜利</li> <li>5，奥斯卡竞争者之间的联系</li> </ul> <p>我强烈建议花一些时间在每一个页面上，这些页面上的元素都是交互进行的。你就会开始看到数据驱动文件会给你带来什么样的而力量了。</p> <p>浏览其他 <a href="/misc/goto?guid=4959677181014673717" rel="nofollow,noindex">600个数据驱动文件的例子</a> 。</p> <p>数据可视化的重要性</p> <p>如果你已经看了上面的例子，我相信我不再需要强调数据可视化的重要性了，你已经知道数据可以多大程度地为它本身解说。作为一个数据科学家,你的真实动机应该是向利益相关者解释模型。对于不会数据分析的利益相关者，真正呈现在他们面前的是现时的数据。他们不想看到数据，他们只想看到通过数字编织出的精巧美丽的故事。如果你能够通过数据驱动完成这项任务，你就很棒了。</p> <h3>第一步：基础性学习——超文本标记语言，超文本标记语言，可缩放矢量图形，级联样式表和脚本语言</h3> <p>第一个明确编程的基础。如果你没有编程的先验知识，可以在Codecademy网站从超文本标记语言和级联样式表课程开始学习。这是一个互动的课程和最佳的起点。</p> <p>一旦你已经学会了超文本标记语言和级联样式表，接下来要学习脚本语言的基础知识了，你也可以在Codecademy这个网站上学习脚本语言的课程。</p> <p>你也可以在Dash的网站上的论坛会上以一种互动的形式学习超文本标记语言、级联样式表和脚本语言。当你学会了脚本语言后，下一步就是学习jQuery。坚持在codecademy上继续学习。这是一非常短的课程，但是对于数据驱动文件的学习很有帮助。</p> <p>最后，你需要学习可缩放矢量图形。在数据驱动文件创建各种嵌入式图形可视化中起着至关重要的作用。对于可缩放矢量图形的学习，你可以跟着w3学校的教程来学习。</p> <p>此时，你应该可以创建基本的交互网站页面。现在你需要的是获得练手的经验。</p> <p>测试你的技能：为了测评你的超文本标记语言、级联样式表和脚本语言的知识，你可以去做一些创建网页项目的练习。这能够帮助你在编程方面获得一些自信。</p> <p>除此之外，如果你还在这些基本原理上不明白，从Freecodecamp上学习这个完整的课程。如果你已经成功地掌握了所有这些课程，你在进入下一步的学习之前已经非常棒了。</p> <h3>第二步：下载、安装和运行数据驱动文件</h3> <p>现在你需要安装一个用来编程的文本编辑器，文本编辑器的选择至关重要。选择一个好的文本编辑器能够提供一种真正刺激的环境给你编程。我很喜欢是我正在使用的Sublime Text编辑器，也推荐给你们。这是一个开放性资源，对使用者来说非常快也非常简单。它支持各种有用的插件并且拥有很好的定制选项编码的经验。</p> <p>在你安装好文本编辑器之后，下一步就是下载和安装数据驱动文件图书馆，这也是很简单的。</p> <p>你可以在这里下载完整的数据驱动文件的压缩包文件，在你的本地磁盘创建一个文件夹，然后解压就好了，你可以在这个文件夹里找到被命名为d3.js和min。js的脚本语言文件夹。你可以通过多种方式在文本编辑器上加载D3库，你可以从你的本地磁盘上加载或者其来源。别忘记在开头部分加上这个程序语言。</p> <pre> <!--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></pre> <h3>第三步：开始在数据驱动文件上工作——</h3> <p>接下来，你应该在 <a href="/misc/goto?guid=4959677181102179477" rel="nofollow,noindex">Udacity</a> 网站上第1b章上学习。它将通过一个简单的例子给你介绍D3的概念，一旦你理解透了这个基本的例子，你就可以理解更多的关于怎么创建数据基本原始的细节。</p> <p>你可以挑选以下内容中的一个进行学习：</p> <ul> <li>Chapter 7 – Chapter 20 from <a href="/misc/goto?guid=4959677181187272909" rel="nofollow,noindex">dashingd3</a> tutorials; or</li> <li>Chapter 4 – Chapter 17 from Book from <a href="/misc/goto?guid=4959549345688148514" rel="nofollow,noindex">Scott Murray</a></li> </ul> <p>如果你有超文本编辑、级联样式表和脚本语言的知识，这两部分内容都非常细节地给你介绍了D3的多种多样的概念。</p> <h3>第四步：练习</h3> <p>到现在为止，你应该掌握了D3的工作知识，在使用这些不同的语言进行编程的时候，你应该感觉到非常舒服。现在我们就应该练习一些基本的可视化工具，这些工具你都在以上步骤学习过了。</p> <p>下面的这些例子的目的是给你练习的，先不要检验这些代码，而是你自己先去尝试，然后当你遇到问题了就尝试着想出一些解决方案。</p> <p>例1：创建一个饼图</p> <pre> <!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);</pre> <pre> var color = d3.scale.ordinal() .range(["orange", "red", "green"]);</pre> <pre> var group = canvas.append("g") .attr("transform", "translate(200, 200)");</pre> <pre> var arc = d3.svg.arc() .innerRadius(80) .outerRadius(r);</pre> <pre> var pie = d3.layout.pie() .value ( function(d) { return d; });</pre> <pre> var arcs = group.selectAll(".arc") .data(pie(data)) .enter() .append("g") .attr("class", "arc");</pre> <pre> arcs.append("path") .attr("d", arc) .attr("fill", function(d) { return color(d.data)});</pre> <pre> 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; });</pre> <pre> </script> </body> </html></pre> <p>输出：它看起来就像这样</p> <p><img src="https://simg.open-open.com/show/f7d87d3d3f3805a812578c5d3ce09b95.png"></p> <p>第二个例子：创建一个基于“增大化现实”技术的动画</p> <pre> <!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></pre> <p>第三个例子：创建一个简单的地图轮廓</p> <p>我已经波士顿附近的地图展示了这个实例。这只是为了理解地图制作的概要，并没有展示较为深入的知识。</p> <pre> <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></pre> <p>输出：这是波士顿地区地图的轮廓</p> <p><img src="https://simg.open-open.com/show/3dc5a81f2fc7f248cf4d30ff1f70f36a.png"></p> <p>这些例子只是来满足你的好奇心，戏真正地开始是在处理动画的地理地图上。一旦你在创建这些基础的可视化时候感到很顺畅舒适了，你就可以进入到下一个阶段。对于地图来说，D3的geojson和topojson格式效果最好。Geojson是默认的地理数据文件，但是，topojson被认为是能够在小尺寸（即压缩数据）里更快且加载更大尺寸的数据集。</p> <p>其他有用资源</p> <p>以下是一些您可能找到的更多有用的资源：</p> <ol> <li><a href="/misc/goto?guid=4958531188026184533" rel="nofollow,noindex">Github Repository of d3.js Tutorials</a></li> <li><a href="/misc/goto?guid=4959677181339300202" rel="nofollow,noindex">Complete Udacity Course on d3.js</a></li> <li><a href="https://www.油Tube.com/watch?v=n5NcCoa9dDU&list=PL6il2r9i3BqH9PmbOf5wA5E1wOG3FT22p" rel="nofollow,noindex">Best 油Tube Tutorial on d3.js</a></li> <li><a href="/misc/goto?guid=4959677181509175698" rel="nofollow,noindex">D3 Official Website</a></li> <li><a href="/misc/goto?guid=4958823447491998597" rel="nofollow,noindex">D3 Tips and Tricks – Free eBook</a></li> </ol> <p>不过，如果你发现D3很难学，随时在下面的评论部分中分享你的问题。</p> <p>原文： <a href="/misc/goto?guid=4959677181612012562" rel="nofollow,noindex">analyticsvidhya</a></p> <p>本文由数据分析网– 肖月翻译！欢迎加入翻译组。</p> <p>肖月：统计学专业毕业生，擅长SPSS等统计分析软件，喜欢写文章。</p> <p>注：数据分析网遵循行业规范，任何转载的稿件都会明确标注作者和来源，若标注有误或遗漏，请联系主编邮箱：afenxi@afenxi.com</p> <p> </p> <p>来自：http://www.afenxi.com/post/23994</p> <p> </p>