现在大数据这么火，D3作为大数据可视化的客户端解决方案，再结合炙手可热的angular，web端，移动端Tweet this book!Please help ari Lerner and Victor Powell by spreading the word about this book on TwitterThe suggested hashtag for this book is #d3angularFind out what other people are saying about the book by clicking on this link to search for thishashtag on twitterhttps://twitter.com/search?q=#d3angularContentsIntroductionabout the authorsabout this bookOrganization of this bookAdditional resources2Conventions used in this book2Development environmentIntroducing D3. A simple example4What is it?4Hello World: D3 style7Selections And Data BindingSelectionsSelector methodsData binding5enter() method17General update patternSⅴ basics23Scalable Vector Graphics23Getting started23SVG coOrdinates25SVG and d337Array helpers55Accessing and manipulating simple arrays56Associative array helpersMaps65ts68Nests69Applying our knowledgescales75CONTENTSA82Animation and interactionData Parsing and Formatting96What next?Intro to Angular102About angular102Hello angular105Directives for reusable visualizations,108Understanding directives108Creating a directive,,108a donut chart directive111Isolate scope,,,113Dynamic visualizations115Two way data bindirg,115Making visualizations dynamic with watch119Getting data into and out of directives,,,,126The d3 way126The Angular way128Updating the scope from within a directive130Best practices for creating reusable visualizations132Accessor functions132Responsive directives134Services136Built in directives137Using replace, template, and transclude to modify the behavior of our visualizations.. 137IntroductionAbout the authorsAri Lerner is a developer with more than 20 years of experience and co-founder of fullstack io. Heco-runs ng-newsletter, speaks at conferences, and recently released Riding Rails with AngularJS. Healso teaches in-person classes at Hack Reactor and online with airpairVictor Powell is a freelance data visualization developer. Prior to freelance, Victor built datavisualization tools with YinzCam, Inc. used by NFL, NHL, and NBA sports teams. In his free time,Victor enjoys finding ways to explaining unintuitive or complex mathematical concepts visuallVictor also guest instructs at Hack ReactorAbout this bookThe D3 on Angularis book is packed with the solutions you need to be a d3 and AngularIS expertAngularJs is an advanced front-end framework released by the team at Google It enables youto build a rich front-end experience, quickly and easily and D3 is an advanced data visualizationframework released by Mike BostockThe d3 on AngulariS gives you the cutting-edge tools you need to get up and running on AngularJSand creating impressive web experiences in no time. The goal of this book is not only to give youa deep understanding of how D3 works, but how to integrate it properly into your own AngularJSWith these tools you can dive into making your own dynamic visualizations with angularis whilebeing confident in understanding the technologyAudienceWe have written this book for those who have never used AngularIS to build a web applicationand are curious about how to get started with an awesome JavaScript framework. We assume thatyou have a working knowledge of HTML and css and a familiarity with basic JavaScript (andpossibly other JavaScript frameworks). We also assume that you' ve never written in D3 before, butare interested in learninghttp://d3js.org/http://angularjs.orghttp://igoogle.comIntroductionOrganization of this bookThe first half off the book focuses exclusively on the basics of D3 so we'll start off assuming youhave not used the Library before. In the second half of the book, we'll cover Angular and how itcan be used to make reusable data visualization components Well also assume you have not usecAngular but at the same time, we wont get into too many details of the library and only cover theconcepts that specifically aid in creating reusable and interactive data visualizationsAdditional resourcesSince this book does not cover AngularJS in-depth, we urge you to check out the Complete Book onAngularjsatng-book.comWe suggest that you take a look at the AngularJS API documentation,, as it gives you direct accessto the recommended methods of writing Angular applications. It also gives you the most up-to-datedocumentation availableConventions used in this bookThroughout this book, you will see the following typographical conventions that indicate differenttypes of informationIn-line code references will look like:

Hello(/h1>a block of code looks like so:1 var app= angular, module('app[)3 function First Controller(scope)iScope data ="Hello"any command at the command line will look like$1s-1Any command in the developer console in Chrome(the browser with which we will primarily bedeveloping) will look likehttps://www.ng-book.comShttp://docs.angularisorg/apiIntroductionvar obj=[message: "hello"]Important words will be shown in boldFinally, tips and tricks will be shown asTip: This is a tipDevelopment environmentIn order to write any applications using Angular]S or D3, we first need to have a comfortabledevelopment environment. Throughout this book, we'll be spending most of our time in two placesour text editor and our browser. We recommend you download the google Chrome browser, as itprovides a great environment to develop in with its convenient and built-in developer tools suiteIt's also the browser we used to create the examples. In theory, there should be no differences in theway the examples run on other standards compliant browsers but we cant ever be absolutely sureIntroducing D3. A simple exampleIn this chapter, we'll go over what D3 is and what makes it such a powerful tool for data visualizationWe'll also introduce a simple Hello World style example that shows how to get quickly get setupand running with D3What is it?D3 (or Data-Driven Documents) is a library written by Mike Bostock for manipulating documentsbased on data. This means D3's primary job is to take data and produce structured documents suchas HTML or SVG with respect to data. Unlike most visualization libraries, D3 is not a ready-madecollection of common graphs and widgets. It's common to use D3 to make common graphs, like barcharts and pie charts, but the real power is in its flexibility and fine grain control over the finalresultD3 works well with other established web technologies like CSS and svG because it doesnt attemptto abstract away the DoM, like many other graphing libraries. This also means D3 will continue tobe useful as browsers incorporate new featuresIf we re just looking for a particular graph type, say, a bar chart, and dont care how exactly it endsup looking, D3 might not be the right library for the job. Several other ready-made libraries exist forcreating simple, cookie-cutter charts, such as High Charts'or Chart js or Google Charts API. If,onthe other hand we have strong requirements for how our visualization should look and function,D 3 is a great choiceTo quickly jump into a real world example of this, take the following interactive visualizationproduced by KQED's the Lowdown blog. It doesnt fall into a single, chart category and the differentchart components need to communicate with each other, updating dynamicallyhttp://bost.ocks.org/mike/http://www.highcharts.com,http://www.chartjs.orghttpsi/developers.google.com/chart/IntroduD3. A simple edeDatd is curre ll as u Mdrcl17th1 2014play 2014-March2010 April July october 2011 April July October 2012 April July Oc ober 2013 Acri July october 2014Lake shastaCentral valley projeStc2. 05M acre-feCapacity: 4.55M acre-feetWate Source: sacramento river201020132014v0 Fransn智 r Apr May j.川 sep oCt Now DeOs Ang?san DiegoLive version of the above interactive visualizationIt was created using a combination of Angular and D3. (source code is available herel)To illustrate this point, well also walk though a little thought experiment. Imagine we re workingwith a ready-made visualization library. Typical visualization libraries might have a BarChart classto create a new bar chart which works fine until we want to do something the library didnt allow tobe configured. For example, say we wanted to change the background color of the legend in our barchart. We could take their code and try and modify it to add our needed feature, but that can quicklyhttp://blogs.kged.org/lowdown/2014/03/18/into-the-drought-californias-shrinking-reservoirs/https://github.com/vicapow/water-supply