31,19 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Fachliteratur
- Sprache: Englisch
Want to get started with impressive interactive visualizations and implement them in your daily tasks? This book offers the perfect solution-D3.js. It has emerged as the most popular tool for data visualization.
This book will teach you how to implement the features of the latest version of D3 while writing JavaScript using the newest tools and technique
You will start by setting up the D3 environment and making your first basic bar chart. You will then build stunning SVG and Canvas-based data visualizations while writing testable, extensible code,as accurate and informative as it is visually stimulating. Step-by-step examples walk you through creating, integrating, and debugging different types of visualization and will have you building basic visualizations (such as bar, line, and scatter graphs) in no time.
By the end of this book, you will have mastered the techniques necessary to successfully visualize data and will be ready to use D3 to transform any data into an engaging and sophisticated visualization.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 332
Veröffentlichungsjahr: 2017
Ähnliche
Third Edition
BIRMINGHAM - MUMBAI
< html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
D3.js 4.x Data Visualization
Third Edition
Copyright © 2017 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: October 2013 Second edition: April 2016 Third edition: April 2017
Production reference: 2300617
ISBN 978-1-78712-035-8
www.packtpub.com
Credits
Authors
Aendrew Rininsland Swizec Teller
Copy Editor
Dhanya Baburaj
Reviewer
Gerardo Furtado
Project Coordinator
Devanshi Doshi
Commissioning Editor
Ashwin Nair
Proofreader
Safis Editing
Acquisition Editor
Shweta Pant
Indexer
Tejal Daruwale Soni
Content Development EditorsJohann Barretto Onkar Wani
Graphics
Jason Monterio
Technical Editor
Rashil Shah
Production Coordinator
Shraddha Falebhai
About the Authors
Aendrew Rininsland is a developer and journalist who has spent much of the last half a decade building interactive content for newspapers such as The Financial Times, The Times, Sunday Times, The Economist, and The Guardian. During his 3 years at The Times and Sunday Times, he worked on all kinds of editorial projects, ranging from obituaries of figures such as Nelson Mandela to high-profile, data-driven investigations such as The Doping Scandal the largest leak of sporting blood test data in history. He is currently a senior developer with the interactive graphics team at the Financial Times.
Swizec Teller, author of Data Visualization with d3.js, is a geek with a hat. He founded his first start-up at the age of 21 years and is now looking for the next big idea as a full-stack Web generalist focusing on freelancing for early-stage start-up companies. When he isn't coding, he's usually blogging, writing books, or giving talks at various non-conference events in Slovenia and nearby countries. He is still looking for a chance to speak at a big international conference. In November 2012, he started writing Why Programmers Work At Night, and set out on a quest to improve the lives of developers everywhere.
About the Reviewer
Gerardo Furtado is a biology teacher, science communicator and writer, and author of a book on evolutionary biology published by the University of Brasilia, as well as fiction books.
His second academic passion is data visualization, which ultimately led him to D3.js, the most powerful (and complex) JavaScript library to create visualizations based on data.
www.PacktPub.com
For support files and downloads related to your book, please visit www.PacktPub.com.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www.packtpub.com/mapt
Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.
Why subscribe?
Fully searchable across every book published by Packt
Copy and paste, print, and bookmark content
On demand and accessible via a web browser
Customer Feedback
Thanks for purchasing this Packt book. At Packt, quality is at the heart of our editorial process. To help us improve, please leave us an honest review on this book's Amazon page at "https://www.amazon.com/dp/178712035X".
If you'd like to join our team of regular reviewers, you can e-mail us at [email protected]. We award our regular reviewers with free eBooks and videos in exchange for their valuable feedback. Help us be relentless in improving our products!
Table of Contents
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
Getting Started with D3, ES2017, and Node.js
What is D3.js?
What happened to all the classes?
What's new in D3 v4?
What's ES2017?
Getting started with Node and Git on the command line
A quick Chrome Developer Tools primer
The obligatory bar chart example
Loading in data
Twelve (give or take a few) bar blues
Summary
A Primer on DOM, SVG, and CSS
DOM
Manipulating the DOM with d3-selection
Selections
Let's make a table
What exactly did we do here?
Selections example
Manipulating content
Joining data to selections
An HTML visualization example
Scalable Vector Graphics
Drawing with SVG
Manually adding elements and shapes
Text
Shapes
Transformations
CSS
Summary
Shape Primitives of D3
Using paths
Line
Area
Arc
Symbol
Chord/Ribbon
Axes
Summary
Making Data Useful
Thinking about data functionally
Built-in array functions
Data functions of D3
Managing objects with d3-collection
What about ES6 Maps and Sets?
Scales
Ordinal scales
Quantitative scales
Continuous range scales
Discrete range scales
Time
Formatting
Time arithmetic
Loading data
The core
Flow control
Promises
Generators
Observables
Geography
Getting geodata
Drawing geographically
Using geography as a base
Summary
Defining the User Experience - Animation and Interaction
Animation
Animation with transitions
Interpolators
Easing
Timers
Putting it all together - sequencing animations
Interacting with the user
Basic interaction
Behaviors
Drag
Brushes
Zoom
Do you even need interaction?
Summary
Hierarchical Layouts of D3
What are layouts and why should you care?
Built-in layouts
Hierarchical layouts
Tree the whales!
Muster the cluster!
Money for nothing, treemaps for free (maps)
Smitten with partition
Pack it up, pack it in, let me begin...
Bonus chart! Sunburst radial partition joy!
Summary
The Other Layouts
Hoorah for modular code
When the moon hits your eye (chart), like a big pizza pie (chart)
Histograms, Herstograms, Yourstograms, and Mystograms
Striking a chord
May the force (simulation) be with you
Got mad stacks
Bonus chart - Streamalicious!
Summary
D3 on the Server with Canvas, Koa 2, and Node.js
Readying the environment
All aboard the Koa train to servertown!
Proximity detection and the Voronoi geom
Rendering in Canvas on the server
Deploying to Heroku
Summary
Having Confidence in Your Visualizations
Linting everything!
Static type checking: TypeScript versus Tern.js
Code analysis with Tern.js
TypeScript - D3 powertools
Behavior-driven development with Mocha and Chai
Setting up your project with Mocha
Testing behaviors - BDD with Mocha
Summary
Designing Good Data Visualizations
Choosing the right dimensions, choosing the right chart
Clarity, honesty, and a sense of purpose
Helping your audience understand scale
Using color effectively
Understanding your audience
Some principles for designing for mobile and desktop
Columns are for desktops, rows are for mobiles
Be sparing with animations on mobiles
Realizing similar UI elements react differently between platforms
Avoiding mystery meat navigation
Be wary of the scroll
Summary
Preface
Welcome to D3.js 4.x Data Visualization, Third Edition. Over the course of this book, you'll learn the basics of one of the world's most ubiquitous and powerful data visualization libraries, but we don't stop there. By the end of our time together, you'll have all the skills you need to become a total D3 ninja, and will be able to do everything from build visualizations from scratch straight through to using it on the server and writing automated tests. If you haven't leveled up your JavaScript skills in a while, you're in for a treat--this book endeavors to use the latest features currently being added to the language, all the while explaining why they're cool and how they differ from "old school" JavaScript.
What this book covers
Chapter 1, Getting Started with D3, ES2017, and Node.js, covers the latest tools for building data visualizations using D3.
Chapter 2, A Primer on DOM, SVG, and CSS, reviews the underlying web technologies that D3 can manipulate.
Chapter 3, Shape Primitives of D3, identifies and creates the basic shapes that comprise a data visualization.
Chapter 4, Making Data Useful, teacheshow to transform data so that D3 can visualize it.
Chapter 5, Defining the User Experience - Animation and Interaction, helps you use animation and user interactivity to drive your data visualizations.
Chapter 6, Hierarchical Layouts of D3, focuses on how hierarchical layouts can take your D3 skills to the next level by providing reusable patterns for creating complex charts.
Chapter 7, The Other Layouts, discusses the non-hierarchical layouts that speed the creation of many addition complex chart types.
Chapter 8,D3 on the Server with Canvas, Koa 2, and Node.js, outlines how to build and deploy a Node.js-based web service that renders D3 using Koa.js and Canvas.
Chapter 9, Having Confidence in Your Visualizations, showcases how to improve the quality of your code by introducing linting, static type checking, and automated testing to your projects.
Chapter 10, Designing Good Data Visualizations, compares and contrasts differing approaches to data visualization while building a set of best practices.
What you need for this book
You will need a machine that is capable of running Node.js. We will discuss how to install this in the first chapter--you can run it on pretty much anything, but having a few extra gigabytes of RAM available will probably help you while developing. Some of the mapping examples later in the book are kind of CPU intensive, though most machines produced since 2014 should be able to handle it.
You should also have the latest version of your favorite web browser--mine is Chrome, and I use it in the examples, but Firefox also works well. You can also try to work in Safari or Internet Explorer/Edge, or Opera, or any number of other browsers, but I find Chrome's developer tools to be the best.
Who this book is for
This book is for web developers, interactive news developers, data scientists, and anyone interested in representing data through interactive visualizations on the Web with D3. Some basic knowledge of JavaScript is expected, but no prior experience with data visualization or D3 is required to follow this book.
Conventions
In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "If it says something similar toCommand not found, double-check whether you've installed everything correctly, and verify that Node.js is in your$PATHenvironment variable."
A block of code is set as follows:
"babel": { "presets": [ "es2017" ]},"main": "lib/main.js","scripts": { "start": "webpack-dev-server --inline",},
Any command-line input or output is written as follows:
$ brew install n
$ n lts
New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "We will mostly use theElementsandConsoletabs,Elementsto inspect the DOM andConsoleto play with JavaScript code and look for any problems."
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of. To send us general feedback, simply e-mail [email protected], and mention the book's title in the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
You can download the code files by following these steps:
Log in or register to our website using your e-mail address and password.
Hover the mouse pointer on the
SUPPORT
tab at the top.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box.
Select the book for which you're looking to download the code files.
Choose from the drop-down menu where you purchased this book from.
Click on
Code Download
.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR / 7-Zip for Windows
Zipeg / iZip / UnRarX for Mac
7-Zip / PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/D3.js-4.x-Data-Visualization. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/supportand enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at [email protected] with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.
Getting Started with D3, ES2017, and Node.js
Data-Driven Documents (D3), developed by Mike Bostock and the D3 community in 2011, is the successor to Bostock's earlier Protovis library. It allows pixel-perfect rendering of data by abstracting the calculation of things such as scales and axes into an easy-to-use Domain-Specific Language (DSL), and uses idioms that should be immediately familiar to anyone with experience of using the popular jQuery JavaScript library. Much like jQuery, in D3, you operate on elements by selecting and then manipulating them via a chain of modifier functions. Especially within the context of data visualization, this declarative approach makes using it easier and more enjoyable than a lot of other tools out there. The official website, https://d3js.org/, features many great examples that show off the power of D3, but understanding them is tricky to start with. After finishing with this book, you should be able to understand D3 well enough to figure out the examples, tweaking them to fit your needs. If you want to follow the development of D3 more closely, check out the source code hosted on GitHub at https://github.com/d3.
In this chapter, we'll lay the foundations of what you'll need to run all the examples in the book. I'll explain how you can start writing ECMAScript 2017 (ES2017)--the latest and most advanced version of JavaScript--and show you how to use Babel to transpile it to ES5, allowing your modern JavaScript to be run on any browser. We'll then cover the basics of using D3 v4 to render a basic chart.
What is D3.js?
The fine-grained control and its elegance make D3 one of the most powerful open source visualization libraries out there. This also means that it's not very suitable for simple jobs, such as drawing a line chart or two--in that case, you may want to use a library designed for charting. Many use D3 internally anyway. For a massive list, visit https://github.com/sorrycc/awesome-javascript#data-visualization.
D3 is ultimately based around functional programming principles, which is currently experiencing a renaissance in the JavaScript community. This book isn't really about functional programming, but a lot of what we'll do will seem really familiar if you've ever used functional programming principles before. If you haven't, or come from an Object-Oriented (OO) background like I do, don't worry, I'll explain the important bits as we get to them, and the revised section on functional programming at the beginning of Chapter 4, Making Data Useful, will hopefully give you some insight into why this paradigm is so useful, especially for data visualization and application construction.
What happened to all the classes?
The second edition of this book contained quite a number of examples using the class feature that is new in ES2015. The revised examples in this edition use factory functions instead, and the class keyword never appears. Why is this, exactly?
ES2015 classes are essentially just syntactic sugaring for factory functions. By this I mean that they ultimately transpile down to factory functions anyway. Although classes can provide a certain level of organization to a complex piece of code, they ultimately hide what is going on underneath it all. Not only that, using OO paradigms, such as classes, is effectively avoiding one of the most powerful and elegant aspects of JavaScript as a language, which is its focus on first-class functions and objects. Your code will be simpler and more elegant using functional paradigms than OO, and you'll find it less difficult to read examples in the D3 community, which almost never use classes.
There are many, much more comprehensive arguments against using classes than I'm able to make here. For one of the best, refer to Eric Elliott's excellent The Two Pillars of JavaScript pieces at:www.medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3.
What's new in D3 v4?
One of the key changes to D3 since the last edition of this book is the release of version 4.
Among its many changes, the most significant one is a complete overhaul of the D3 namespace. This means that none of the examples in this book will work with D3 3.x, and the examples from Learning D3.js Data Visualization, Second Edition will not work with D3 4.x. This is quite possibly the cruelest thing Mr. Bostock could ever do to educational authors such as myself (I am joking here!). Kidding aside, it also means many of the block examples in the D3 community are out of date and may appear rather odd if this book is your first encounter with the library. For this reason, it is very important to note the version of D3 an example uses -- if it uses 3.x, it might be worth searching for a 4.x example just to prevent this cognitive dissonance.
Related to this is how D3 has been broken up from a single library into many smaller libraries (or micro-libraries). There are two approaches you can take:
You can use D3 as a single library (a
monolib
) in much the same way as version 3
You can selectively use individual (
microlib
) components of D3 in your project
This book takes the former route. While learning D3, using micro-libraries takes a lot more effort, even if it helps reduce the size of the final bundle that people who view your graphics will have to download. That said, I will try to signpost which package a particular piece of functionality resides in; so, once you become more comfortable with D3, you can start using the microlibs instead of including everything and the kitchen sink.
What's ES2017?
One of the main changes to this book since its first edition is the emphasis on modern JavaScript; in this case, ES2017. Formerly known as ES6 (Harmony), it pushes the language features of JavaScript forward significantly, allowing for new usage patterns that simplify code readability and increased expressiveness. If you've written JavaScript before and the examples in this chapter look pretty confusing, it means you're probably familiar with the older, more common ES5 syntax.
However, don't sweat! It really doesn't take too long to get the hang of the new syntax, and I will try to explain the new language features as we encounter them. Although it might seem to be something of a steep learning curve at the start, by the end, you'll have improved your ability to write code quite substantially and will be on the cutting edge of contemporary JavaScript development.
Before I go any further, let me clear some confusion about what ES2017 actually is. Initially, the ECMAScript (or ES for short) standards were incremented by cardinal numbers, for instance, ES4, ES5, ES6, and ES7. However, with ES6, they changed this so that a new standard is released every year in order to keep pace with modern development trends, and thus we refer to the year (2017) now. The big release was ES2015, which more or less maps to ES6. ES2016 was ratified in June 2016, and builds on the previous year's standard, while adding a few fixes and two new features. ES2017 is currently in the draft stage, which means proposals for new features are being considered and developed until it is ratified sometime in 2017. As a result of this book being written while these features were in draft, they may not actually make it to ES2017 and thus may need to wait until a later standard to be officially added to the language.
You don't really need to worry about any of this, however, because we use Babel.js to transpile everything down to ES5 anyway, so it runs the same in Node.js and in the browser. I will try to refer to the relevant specification where a feature is added, when I introduce it for the sake of accuracy (for instance, modules are an ES2015 feature), but when I refer to JavaScript, I mean all modern JavaScript, regardless of which ECMAScript specification it originated in.
A quick Chrome Developer Tools primer
Chrome Developer Tools are indispensable to Web development. Most modern browsers have something similar, but to keep this book shorter, we'll stick to just Chrome here for the sake of simplicity. Feel free to use a different browser. Firefox's Developer Edition is particularly nice, and--yeah yeah, I hear you guys at the back--Opera is good too!
We will mostly use the Elements and Console tabs, Elements to inspect the DOM and Console to play with JavaScript code and look for any problems. The other six tabs come in handy for large projects:
The Network tab will let you know how long files will take to load and help you inspect the Ajax requests. The Profiles tab will help you profile JavaScript for performance. The Resources tab is good for inspecting client-side data. Timeline and Audits are useful when you have a global variable that is leaking memory and you're trying to work out exactly why your library is suddenly causing Chrome to use 500 MB of RAM. While I've used these in D3 development, they're probably more useful when building large Web applications with frameworks such as React and Angular.
The main one you want to focus on, however, is Sources, which shows all the source code files that have been pulled in by the web page. Not only is this useful in determining whether your code is actually loading, it also contains a fully functional JavaScript debugger, which few mortals dare to use. Although explaining how to debug code is kind of boring and not at the level of this chapter, learning to use breakpoints instead of perpetually using console.log to figure out what your code is doing, is a skill that will take you far in the years to come. For a good overview, visit https://developers.google.com/web/tools/chrome-devtools/debug/breakpoints/step-code?hl=en
Most of what you'll do with Developer Tools, however, involves looking at the CSS inspector at the right-hand side of the Elements tab. It can tell you what CSS rules are impacting the styling of an element, which is very good for hunting rogue rules that are messing things up. You can also edit the CSS and immediately see the results, as follows:
Loading in data
Go back to
