Pro D3.js : Use D3.js to Create Maintainable, Modular, and Testable Charts

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. You know the basics of working with D3.js, but it's time to become a professional D3.js practitioner. This book is your launching pad to refactoring code, composing complex visualizations from small components, working as a team with other developers, and integrating charts with a Continuous Integration system. You'll begin by creating a production-ready chart using D3.js v5, ES2015, and a test-driven approach and then move on to using and extending Britecharts, the reusable charting library based on Reusable API patterns. Finally, you'll see how to use D3.js along with React to document and build your charts to compose a charting library you can release into the NPM repository.With __Pro D3.js__, you'll become an accomplished D3.js developer in no time. **What You Will Learn** * Create v5 D3.js charts with ES2016 and unit tests * Develop modular, testable and extensible code with the Reusable API pattern * Work with and extend Britecharts, a reusable charting library created at Eventbrite * Use Webpack and npm to create and publish a charting library from your own chart collections * Write reference documentation and build a documentation homepage for your library. **Who This Book Is For** Data scientists, data visualization engineers, and frontend developers with a fundamental knowledge of D3.js and some experience with JavaScript, as well as data journalists and consultants. Table of Contents 5 About the Author 12 About the Technical Reviewer 13 Acknowledgments 14 Introduction 15 Chapter 1: Introduction to Data Visualizations with D3.js 18 Navigating a Data-Based World 18 Why D3.js? 19 Total Control of Your Visualizations 19 Built for the Web 20 Well Established 21 Constantly Improved 21 Why ES2015? 22 The New JavaScript Standard 22 Useful New Language Features 22 Compact Code 23 Destructuring 23 Arrow Functions 24 Template Literals 24 Spread Operator 25 Explicit Code 26 const 26 Default Parameters and Destructuring 26 Rest Parameters 27 Block-Level Declarations 27 Summary 29 Chapter 2: An Archetypal D3.js Chart 30 Examples in D3.js Development 30 The Bar Chart Example 31 The Margin Convention 32 Loading Data 33 Scales and Axes 34 Drawing Bars 35 Output 36 Problems with D3.js Example Code 39 Hard to Read 39 Hard to Change 39 Not Reusable 39 Not Composable 40 Fragile 40 Summary 40 Chapter 3: D3.js Code Encapsulation and APIs 41 Encapsulation in D3.js Code 41 API Flavors 42 Object Oriented 42 Declarative 42 Functional 43 Chained 43 Example Libraries 44 Plottable 45 Billboard 47 Vega 50 D3FC 55 Britecharts 58 Comparing Their APIs 60 Choosing an API for Your Library 61 Developers Background 61 Library Objectives 62 Summary 62 Chapter 4: The Reusable API 63 Background 63 Ease of Use and Creation 64 The Pattern 64 Using the Reusable API 66 Ample Benefits 68 Simplicity 68 Modularity 68 Reusability 69 Composability 69 Testability 70 Few Drawbacks 70 Increased Complexity 70 Inefficient Property Updates 71 Boilerplate Code 72 D3.js-idiomatic and Well Accepted 74 Summary 75 Chapter 5: Making the Bar Chart Production-Ready 76 The Path to Professional Code 76 Setting Up the Chart Structure 76 Creating the Core Pattern 77 Building the Root Element 77 Giving Dimensions and Margins 78 Creating Containers 80 Creating Building Blocks 81 Creating Scales and Axes 82 Drawing Axes 83 Drawing Bars 84 Adding Configurations 85 Creating Accessors 85 Listening to Events 86 Final Code 88 Summary 91 Chapter 6: Britecharts 92 A Library for the Real World 92 Visualizing Different Kinds of Data 93 Categorical Data 93 Bar Chart 94 Grouped Bar Chart 94 Stacked Bar Chart 95 Donut Chart 96 Time Series 97 Line Chart 97 Stacked Area Chart 98 Sparkline Chart 99 Performance Metrics 100 Bullet Chart 100 Variable Correlations 101 Heatmap 101 Scatter Plot and Bubble Chart 102 Helping Reading Data Visualizations 103 Brush Chart 103 Tooltip 104 Mini-Tooltip 104 Legend 105 Formatting Charts 106 Styling Helpers 106 Color 107 Filter 107 Load 107 Formatting Helpers 108 Axis 108 Date 108 Number 108 Text 109 Chart Export 109 Summary 109 Chapter 7: Using and Customizing Britecharts 110 Introduction 110 Downloading Britecharts 111 Creating a Simple Chart 111 Setting Up a Container, Data set, and Chart 111 Configuring and Rendering the Line Chart 113 Making the Chart Responsive 115 Adding a Tooltip 116 Drawing a Legend 118 Filtering Data with a Brush 120 Creating the Brush Chart 120 Wiring the Brush Events 123 Customizing the Styles 125 Applying a Color Palette 125 Overriding Default Styles 127 Summary 129 Chapter 8: Extending a Chart 130 Introduction 130 Getting Set Up to Contribute 130 Setting Up the Repository 131 Running Docs and Demos 131 Creating a Branch 132 Modifying a Chart 133 Creating Our First Failing Test 133 Adding a New Accessor 134 Updating Demo and Documentation 135 Sending a Pull Request 139 Using the Issue Tracker 139 Creating a Pull Request 140 Summary 141 Chapter 9: Testing Your Charts 142 Setting Up the Test Environment 142 Setting Up Karmatic 143 Creating the Test Fixtures 144 Creating the Rendering Tests 146 Rendering the Root Element 146 Rendering Container Groups 149 Rendering Axes 151 Rendering Bars 153 Testing Events 155 Testing Mouse Hover 155 Testing More Mouse Events 159 Testing the API 162 Testing Simple Accessors 162 Testing a Complex Accessor 164 Summary 166 Chapter 10: Building Your Library 167 Bundling Our Library with Webpack 168 Installing and Configuring Webpack 170 Entry 170 Output 170 Loaders 171 Plugins 171 Mode 172 Creating a Production Bundle 172 The Development Setup 177 Running Our Tests 180 Using Babel to Transpile Our Code 185 Babel Fundamentals 186 Using Babel with Webpack 187 Publishing Packages with npm 189 Introducing npm and the package.json File 189 Adding Our Package to the npm Registry 190 Updating and Maintaining Our Library 193 Summary 194 Chapter 11: Creating Documentation 195 The Value of Documentation 195 Commenting Our Code with JSDoc Annotations 196 Introducing JSDoc 196 JSDoc Syntax by Example 196 Functions 197 Modules 199 Data 200 Generating the Documentation 201 Documentation Generators 202 JSDoc to Markdown 202 Documentation.js 204 Other Options 204 ESDoc 204 Docusaurus 205 Docco 205 Generating Our Docs with Documentation.js 205 Installation and Configuration 205 Customizing the Docs 208 Publishing and Maintaining the Docs 209 Publishing to GitHub Pages 210 Keeping Our Documentation Updated 210 Using Text Editor Extensions 210 Enforcing Comments with ESLint 211 Installation 211 Configuring and Running ESLint 212 Extending Our Docs 213 Tutorials 213 How-to Guides 214 Topics 214 Reference 214 Summary 214 Chapter 12: Using Your Library with React 215 React, D3.js, and the DOM 215 React 216 Rendering and Reconciliation 216 Dynamic Child Components 217 D3.js 217 Data Joins 217 React and D3.js Working Together 219 D3.js Within React 219 React Faux DOM 220 Lifecycle Methods Wrapping 222 D3 for the Math, React for the DOM 224 Using Lifecycle Methods Wrapping with Our Library 226 Creating the Wrapper 227 Using Our Chart with React 231 Summary 232 Index 233 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. You know the basics of working with D3.js, but it's time to become a professional D3.js practitioner. This book is your launching pad to refactoring code, composing complex visualizations from small components, working as a team with other developers, and integrating charts with a Continuous Integration system. You'll begin by creating a production-ready chart using D3.js v5, ES2015, and a test-driven approach and then move on to using and extending Britecharts, the reusable charting library based on Reusable API patterns. Finally, you'll see how to use D3.js along with React to document and build your charts to compose a charting library you can release into the NPM repository. With Pro D3.js , you'll become an accomplished D3.js developer in no time. What You Will Learn Create v5 D3.js charts with ES2016 and unit tests Develop modular, testable and extensible code with the Reusable API pattern Work with and extend Britecharts, a reusable charting library created at Eventbrite Use Webpack and npm to create and publish a charting library from your own chart collections Write reference documentation and build a documentation homepage for your library. Who This Book Is For Data scientists, data visualization engineers, and frontend developers with a fundamental knowledge of D3.js and some experience with JavaScript, as well as data journalists and consultants. Front Matter ....Pages i-xxi Introduction to Data Visualizations with D3.js (Marcos Iglesias)....Pages 1-12 An Archetypal D3.js Chart (Marcos Iglesias)....Pages 13-23 D3.js Code Encapsulation and APIs (Marcos Iglesias)....Pages 25-46 The Reusable API (Marcos Iglesias)....Pages 47-59 Making the Bar Chart Production-Ready (Marcos Iglesias)....Pages 61-76 Britecharts (Marcos Iglesias)....Pages 77-94 Using and Customizing Britecharts (Marcos Iglesias)....Pages 95-114 Extending a Chart (Marcos Iglesias)....Pages 115-126 Testing Your Charts (Marcos Iglesias)....Pages 127-151 Building Your Library (Marcos Iglesias)....Pages 153-180 Creating Documentation (Marcos Iglesias)....Pages 181-200 Using Your Library with React (Marcos Iglesias)....Pages 201-218 Back Matter ....Pages 219-223