Apress.Pro.D3.js.pdf

所需积分/C币:9 2019-11-01 23:49:06 4.26MB PDF
收藏 收藏
举报

Go beyond the basics of D3.js to create maintainable, modular, and testable charts and to package them into a library that can be distributed as open source software or kept for private use. This book will show you how to transform regular D3.js chart code into reusable and extendable modules.
Pro D3.jS Marcos iglesias San Francisco, CA, USA ISBN-13(pbk):978-1-4842-52024 ISBN-13( electronic):978-1-4842-5203-1 htps:// doi. org/10.1007/978-1-4842-5203-1 Copyright o 2019 by Marcos Iglesias This work is subject to copyright All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights omissions that may be made. The publisher makes no warranty, express or implied, with respect to h o on While the advice and information in this book are believed to be true and accurate at the date of publicatie neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors material contained herein Managing director, apress Media LLc: Welmoed spahr Acquisitions Editor: Louise Corrigan Development Editor: James Markham Coordinating Editor: Nancy Chen Cover designed by eStudio Calamar CoverimagedesignedbyFreepik(www.freepik.com) Distributed to the book trade worldwide by springer Science+ Business Media New York 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax(201)348-4505 e-mailorders-ny@springer-sbm.com,orvisitwww.springeronline.com.ApressMedia,LlcisaCalifornia LLC and the sole member (owner )is Springer Science Business Media Finance Inc( SSBM Finance Inc) SSBM Finance Inc is a Delaware corporation. Forinformationontranslationspleasee-mailrights@apress.com,orvisithttp://www.apress.com/ rights-permissions. Apress titles may be purchased in bulk for academic, corporate, or promotional use e Book versions and licenses are also available for most titles. For more information reference our Print and ebook bulk sales webpageathttp://www.apress.com/bulk-sales Any source code or other supplementary material referenced by the author in this book is available to readersongithubviathebooksproductpagelocatedatwww.apress.com/9781484252024.foRmore detailedinformationpleasevisithttp://www.apress.com/source-code Printed on acid-free paper To my mother, for discovering and nourishing my love for books Table of contents About the author mmmmmmm xiii About the technical reviewer ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■■■■■■■■■■■■■■■■■■■■■■口■■■■■■■■■■■■■■■■■■■■■■■ Acknowledgments mmmmmmmmm BRBR RR RR RR ERRI EaEI E XVii Introduction Chapter 1: Introduction to Data Visualizations with D3, js ■■■■■■■■■■■■■■■口■■■■■■■■■■■口■■■a■■■■■■ Navigating a Data-Based World ■Ba 2 Total Control of your visualizations Built for the web Well established Constantly Improved Why ES2015? 234455 The New Javascript standard Useful New Language Features. Compact code . Explicit Code mmmammmmmmmmmammmmamamnmnannmmmmnmmanmmmn. 9 Summary 12 Chapter 2: An Archetypal D3. js chart ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 13 Examples in D3. js Development 13 The Bar chart Example 14 The Margin Convention 15 Loading data 16 Scales and Axes 17 Drawing bars 0 utput.....…………19 TABLE OF CONTENTS Problems with D3. js Example Code Hard to read 22 Hard to change.mmaematnano 22 Not reusable 22 Not composable 23 Fragile 23 Summary.,.,,,,,,,,, 23 Chapter 3: D3 js code Encapsulation and APIs.m mmmmammann ■■■■■■■■■ a25 Encapsulation in D3. js Code APl Flavors 26 object Oriented. Declarative∴26 Functional mmmmmmmmmmmmmm,,,,,,,,,,,,,,, 27 Chained 27 Example libraries 28 Plottable 29 Bi| board,,,,,….31 Vega.maeaeaannt n34 D3FC,.mmmmmm 39 Britecharts…………42 Comparing Their apls…...,..,,,,,,,,,,,………,44 Choosing an aPI for Your Library…,,… 45 Developers background∴……45 Library objectives. mmmmnnaamemannnnnannnm Summary . Chapter 4: The Reusable APl 47 Background 47 Ease of use and creation 48 The pattern 48 Using the reusable APl 50 TABLE OF CONTENTS Ample Benefits… 2 Simplicity.......…52 Modularity . Reusability 53 Composability.....…….53 Few Drawbacks ■B 54 Increased complexity. Inefficient Property Updates n55 Boilerplate code 56 D3. js-idiomatic and Well Accepted 58 Summary 59 Chapter 5: Making the Bar Chart Production-Ready ■■■■■■■■■■■■■ ■■■■■■■■■ 61 The path to Professional code Setting Up the chart Structure Creating the core Pattern 62 Building the root element.,,..,,,………,62 Giving Dimensions and Margins Creating Containers . Creating Building blocks…… n,66 Creating Scales and Axes 67 Drawing AXes Drawing bars .mmmmmmmmmmmmmmmmmmmmmmm.... 69 Adding Configurations..,.,.,.,.,…,…70 Creating Accessors. Listening to Events…, 71 Final c0de…73 Summary........,,,,,76 TABLE OF CONTENTS Chapter 6: Britecharts ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■ A Library for the Real World Visualizing Different Kinds of Data. Categorical Data …78 Time series 82 Performance metrics…85 Variable correlations mmmmmmm. 86 Helping Reading Data Visualizations 88 Brush chart 88 Too|tip…....,89 Mini-Tooltip m. Legend....,.,.,..,,,,,,,,,,90 Formatting Charts 91 Styling Helpers .ammennmammnmemmmnnmnnemnnemnemennmennenmnmnmnnnn 91 Formatting Helpers….,.,,,……93 Chart Export 94 Summary..............,,94 Chapter 7: Using and customizing Britecharts ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ Introduction.............95 Downloading Britecharts. Creating a Simple chart.…… 96 Setting Up a Container, Data set, and Configuring and Rendering the line chart....,,…,………,98 Making the Chart Responsive 100 Adding a Too|tip...,,,,,,,,,,,,,,…101 Drawing a Legend.....,.,...,,,……,103 Filtering Data with a Brush 105 Creating the Brush Chart...,,,,,,,,,,,………105 Wiring the Brush Events TABLE OF CONTENTS Customizing the styles.mmmmmmnmnnmnnmnanannmnmnnmnnnmmn 110 Applying a Color Palette. 0 verriding Default Styles…...,,………,112 Summary… 114 Chapter 8: Extending a Chart.mamant ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■■■■■■■■■■■■■■■■■■■■ 115 Introduction 115 Getting Set Up to Contribute etting up the Repository.eR. REII. 116 Running Docs and den0s……,,,,,,,,,,,,,,,,,,,…116 Creating a Branch…,, 117 Modifying a Chart...,,,,,,,,,,,…,…,…,………118 Creating Our First Failing Test 118 Adding a New Accessor…..,,………,119 Updating Demo and documentation…… 120 Sending a Pull request. mmmmmnmnmm Using the Issue Tracker….,,,,,,,…124 Creating a Pull Request 125 Summary ..m....mmm.mmmmm...mm.mmm. 126 Chapter 9: Testing Your Charts 127 Setting Up the test environment.…...,………127 Setting Up Karmatic ..............................................128 Creating the Test Fixtures. Creating the Rendering Tests.........,.,,,,…………131 Rendering the Ro0 t element.…..,,,,,,,,,,,,,,,,,,,,,,,,…,…,…,……131 Rendering Container Groups 134 Rendering AXes …136 Rendering Bars 138 Testing Events. Testing Mouse Hover…… 140 Testing More Mouse Events. TABLE OF CONTENTS Testing the API . Testing Simple Accessors.mmmmmmammmnmmmnmmmmmmmmnmnn 147 Testing a complex accessor. t... s. 149 Summary..........…,151 Chapter 10: Building Your Library mmmmammmmmmmmmmmmmm 153 Bundling Our Library with Webpack.mmmamammm.....mo: 154 Installing and configuring Webpack 156 Creating a Production Bundle.mammon..mmmmnnaamemnnn 158 The Development setup 163 Running Our Tests.nt ,166 Using babel to Transpile our Code tu..n.. 171 Babel fundamentals 172 Using babel with Webpack.m...mmm 173 Publishing Packages with npm 175 Introducing npm and the package json File 175 Adding our Package to the npm Registry 176 Updating and Maintaining Our Library….,……,179 Summary............,,,,,,,,…,180 Chapter 11: Creating Documentation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■■■■■■■■■■■■■■■■■■■■■■口■■■■■■ 181 The value of documentati0n………181 Commenting Our Code with JSDoc Annotations. Introducing JSDoc 182 JSDoc Syntax by Example…… 182 Generating the Documentation mmmemtmammmanmmatanamamammanmmmn 187 Documentation generators 188 Generating Our Docs with Documentation. js 191 Publishing and maintaining the docs 95 Publishing to gitHub Pages mmmmmmmmmmmmmmmmmmmmmmmm. 196 Keeping Our Documentation Updated 196 Extending Our Docs Summary…,.,, 200

...展开详情
试读 127P Apress.Pro.D3.js.pdf
立即下载 低至0.43元/次 身份认证VIP会员低至7折
抢沙发
一个资源只可评论一次,评论内容不能少于5个字
  • 分享王者

    成功上传51个资源即可获取
关注 私信 TA的资源
上传资源赚积分,得勋章
最新推荐
Apress.Pro.D3.js.pdf 9积分/C币 立即下载
1/127
Apress.Pro.D3.js.pdf第1页
Apress.Pro.D3.js.pdf第2页
Apress.Pro.D3.js.pdf第3页
Apress.Pro.D3.js.pdf第4页
Apress.Pro.D3.js.pdf第5页
Apress.Pro.D3.js.pdf第6页
Apress.Pro.D3.js.pdf第7页
Apress.Pro.D3.js.pdf第8页
Apress.Pro.D3.js.pdf第9页
Apress.Pro.D3.js.pdf第10页
Apress.Pro.D3.js.pdf第11页
Apress.Pro.D3.js.pdf第12页
Apress.Pro.D3.js.pdf第13页
Apress.Pro.D3.js.pdf第14页
Apress.Pro.D3.js.pdf第15页
Apress.Pro.D3.js.pdf第16页
Apress.Pro.D3.js.pdf第17页
Apress.Pro.D3.js.pdf第18页
Apress.Pro.D3.js.pdf第19页
Apress.Pro.D3.js.pdf第20页

试读结束, 可继续阅读

9积分/C币 立即下载 >