28,14 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
This book will help you build interactive graphs that are viewable in any web browser using JavaScript, D3.js, and SVG. You will learn how to make a scatter plot, a bar graph, a pie chart, a force directed graph, and a map.
Key Features
- Takes you through the most common graphs you'll need
- Add interactivity to your visualizations
- Easy to follow builds
Book Description
D3.js is a JavaScript library that allows you to create graphs and data visualizations in the browser with HTML, SVG, and CSS. This book will take you from the basics of D3.js, so that you can create your own interactive visualizations, to creating the most common graphs that you will encounter as a developer, scientist, statistician, or data scientist.
The book begins with an overview of SVG, the basis for creating two-dimensional graphics in the browser. Once the reader has a firm understanding of SVG, we will tackle the basics of how to use D3.js to connect data to our SVG elements. We will start with a scatter plot that maps run data to circles on a graph, and expand our scatter plot to make it interactive. You will see how you can easily allow the users of your graph to create, edit, and delete run data by simply dragging and clicking the graph. Next, we will explore creating a bar graph, using external data from a mock API.
After that, we will explore animations and motion with a bar graph, and use various physics-based forces to create a force-directed graph. Finally, we will look at how to use GeoJSON data to create a map.
What you will learn
- Build a scatter plot
- Build a bar graph
- Build a pie chart
- Build a force-directed graph
- Build a map
- Build interactivity into your graphs
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.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 131
Veröffentlichungsjahr: 2018
Ähnliche
D3.js Quick Start Guide
Copyright © 2018 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 author(s), nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been 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.
Commissioning Editor: Kunal ChaudariAcquisition Editor:Noyonika DasContent Development Editor:Mohammed Yusuf ImaratwaleTechnical Editor:Sushmeeta JenaCopy Editor:Safis EditingProject Coordinator:Hardik BhindeProofreader: Safis EditingIndexer:Rekha NairGraphics:Alishon MendonsaProduction Coordinator:Shantanu Zagade
First published: September 2018
Production reference: 1260918
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-78934-238-3
www.packtpub.com
Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.
Why subscribe?
Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Mapt is fully searchable
Copy and paste, print, and bookmark content
Packt.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.packt.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.packt.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.
Contributors
About the author
Matthew Huntington has worked as a developer for about 15 years now, and has a full understanding of all aspects of development (server side, client side, and mobile). He graduated magna cum laude from Vassar College with a degree in computer science in which he received departmental honors. He's worked for many clients in New York, including Nike, IBM, Pfizer, MTV, Chanel, Verizon, Goldman Sachs, Nestle, AARP, and BAM. He's worked with companies in pretty much all of the major industries applicable to development, and he has a deep understanding of the differences in the ways those industries work.
As an instructor, Matt has been teaching full-time since 2015 at General Assembly and has lead workshops at many locations, including prestigious universities such as Columbia University and NYU.
About the reviewer
Xun (Brian) Wu is the Founder and CEO of smartchart.tech. He has over 16 years of extensive hands-on experience in design and development with Blockchain, big data, Cloud, UI, and system infrastructure. He is the coauthor of Blockchain By Example, Hyperledger cookbook, Blockchain Quick Start Guide, and Seven NoSQL Databases in a Week. He has also been a technical reviewer for over 40 books for Packt. He served as a board advisor for several blockchain startups and owned several patents on blockchain. He holds a Master's in computer science from NJIT and lives in New Jersey with his two beautiful daughters, Bridget and Charlotte.
Nikita Rokotyan is a data visualization engineer with a background in physics and creative technologies. He specializes in creating enriched, data-driven experiences with strong dynamic and interactive components.
Focusing on aesthetics and information content, Nikita has worked on a number of applied and artistic data visualizations for various startups as well as large organizations such as University of Tokyo, Proctor & Gamble, and the Paul Mellon Centre for Studies in British Art.
Currently he's running a data visualization studio Interacta and co-running a company in NYC—CultivateMe—that explores how data visualization can help with a better understanding and cultivating human talent
Packt is searching for authors like you
If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.
Table of Contents
Title Page
Copyright and Credits
D3.js Quick Start Guide
Packt Upsell
Why subscribe?
Packt.com
Contributors
About the author
About the reviewer
Packt is searching for authors like you
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Reviews
Getting Started with D3.js
What is SVG?
What makes D3 so special?
This book's approach to learning
A preview of each build
Using SVG to create images using code
Building an interactive scatter plot
Making a basic scatter plot interactive
Creating a bar graph using a data file
Animating SVG elements to create an interactive pie chart
Using physics to create a force-directed graph
Mapping
Setting up
Summary
Using SVG to Create Images Using Code
Base tag
Basic elements
Positioning an element
Styling an element
Important SVG elements
Circle
Line
Rectangle
Ellipse
Polygon
Polyline
Text
Group
Bezier curves
Cubic Bezier curves
Smooth cubic Bezier curves
Quadratic Bezier curve
Smooth quadratic Bezier curve
Drawing a path
Arcs
Documentation
Summary
Building an Interactive Scatter Plot
Adding a link to the D3 library
Adding an<svg>tag and sizing it with D3
Creating some fake data for our app
Adding SVG circles and styling them
Creating a linear scale
Attaching data to visual elements
Use data attached to a visual element to affect its appearance
Creating a time scale
Parsing and formatting times
Setting dynamic domains
Dynamically generating SVG elements
Creating axes
Displaying data in a table
Summary
Making a Basic Scatter Plot Interactive
Creating a click handler
Removing data
Dragging an element
Updating data after a drag
Creating a zoom behavior that scales elements
Updating axes when zooming and panning
Updating click points after a transform
Avoiding redrawing the entire screen during rendering
Hiding elements beyond an axis
Summary
Creating a Bar Graph Using a Data File
Setting up our application
Creating an external file to hold our data
Making an AJAX request
Writing the basic code
Handling file access
Using AJAX data to create SVG elements
Adjusting the height and the width of the bars
Adjusting the horizontal and the vertical placement of the bars
Making the width of the bars dynamic
Changing the color of the bar based on data
Adding axes
Summary
Animating SVG Elements to Create an Interactive Pie Chart
Setting up the application
Create data/configuration variables
Creating an ordinal scale
Creating the color scale to map labels to colors
Setting up the SVG
Adding paths for each pie segment
Generating an arc creating function
Formatting the data for the arc
Adjusting the position of the pie
Making a donut graph
Removing parts of the pie
Summary
Using Physics to Create a Force-Directed Graph
What is a force-directed graph?
How to set up a graph of relationships
Display
Physics
Setting up the HTML
Setting up styling for nodes and links
Setting up the SVG
Adding data for people
Adding data for relationships
Add circles to the SVG
Adding lines to the SVG
Creating a simulation
Specifying how the simulation affects visual elements
Creating forces
Summary
Mapping
Defining GeoJSON
Setting up the HTML
Using a projection
Generating a path using a projection and GeoJSON data
Summary
Other Books You May Enjoy
Leave a review - let other readers know what you think
Preface
Welcome to D3.js Quick Start Guide. In it, we'll be covering the basics of D3 through a series of large builds. By the end, you should have a strong enough grasp of the library to go out and build your own interactive data visualizations.
Who this book is for
This book is for junior-to senior-level frontend and full-stack web developers who are interested in getting to data visualization. The reader needs to have a basic understanding of HTML, CSS, JavaScript, AJAX, and what a server is, in order to be able to work with the code and concepts given in this book.
What this book covers
Chapter 1, Getting Started with D3.js, provides a high-level overview of what makes D3 so interesting. We examine what an SVG element is and set up our machine so that it is ready to create D3 code. We also take a look at this book's approach to learning and how it applies to the applications that we'll build.
Chapter 2, Using SVG to Create Images Using Code, covers the basics of SVG (base tags, basic elements, positioning, and styling). We also look at Bezier curves and how to draw organic shapes with them. We're now ready to learn how D3 can be used to modify these elements.
Chapter 3, Building an Interactive Scatter Plot, explains static scatter plots and a shows how to build a table that displays its data.
Chapter 4, Making a Basic Scatter Plot Interactive, shows you as many useful modules as possible, with examples of daily activities that can be carried out and personal comments based on our experience of using them.
Chapter 5, Create a Bar Graph Using a Data File, covers many interesting use cases that any system administrator will need to run daily. Many other tasks can be performed as we show with customized playbooks. But not every script is considered as good automation. What matters is that the right nodes go from state A to state B with no errors and in a short time.
Chapter 6, Animating SVG Elements to Create an Interactive Pie Chart, shows how a pie chart animates when you remove sections from it.
Chapter 7, Use Physics to Create a Force Directed Graph, shows how to use D3 to create a graph that visualizes relationships between various nodes of data. This can be very useful in scenarios such as graphing a friend network, showing parent/child company relationships, or displaying a company's staff hierarchy.
Chapter 8, Mapping, discusses GeoJSON, what it's used for, and why it differs from more general JSON data. We also cover how to use D3 to create a projection and render GeoJSON data as a map.
To get the most out of this book
This book assumes a basic understanding of HTML, CSS, JavaScript, AJAX, and what a server is, in order to be able to work with the code and concepts given in this book.
For this book you really only need to download and install the following:
Chrome, available at
https://www.google.com/chrome/
: a web browser so that we can view our visualizations.
Node:
https://nodejs.org/en/
: This allows us to run JavaScript from the terminal. In
Chapter 4
,
Making a Basic Scatter Plot Interactive
, we will use it so that we can make AJAX calls.
A code editor. I'd suggest Atom if you're new to coding:
https://atom.io/
.
Download the example code files
You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packt.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
Log in or register at
www.packt.com
.
Select the
SUPPORT
tab.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box and follow the onscreen instructions.
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-Quick-Start-Guide. In case there's an update to the code, it will be updated on the existing GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Download the color images
We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://www.packtpub.com/sites/default/files/downloads/9781789342383_ColorImages.pdf.
Conventions used
There are a number of text conventions used throughout this book.
CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Mount the downloaded WebStorm-10*.dmg disk image file as another disk in your system."
A block of code is set as follows:
<
circle
r
50
cx
50
cy
50
fill
red
stroke
blue
stroke-width
5
></
circle
>
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
<
head
>
<
link
rel
"
stylesheet
"
href
"
app.css
"
>
</
head
>
Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Select System info from the Administration panel."
Get in touch
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [email protected].
Errata
