Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.

Change country

Modal Close icon
Country selected Country selected
country flag United States
Country selected
country flag United Kingdom
Country selected
country flag India
Country selected
country flag Germany
Country selected
country flag France
Country selected
country flag Canada
Country selected
country flag Russia
Country selected
country flag Spain
Country selected
country flag Brazil
Country selected
country flag Australia
Country selected
country flag Argentina
Country selected
country flag Austria
Country selected
country flag Belgium
Country selected
country flag Bulgaria
Country selected
country flag Chile
Country selected
country flag Colombia
Country selected
country flag Cyprus
Country selected
country flag Czechia
Country selected
country flag Denmark
Country selected
country flag Ecuador
Country selected
country flag Egypt
Country selected
country flag Estonia
Country selected
country flag Finland
Country selected
country flag Greece
Country selected
country flag Hungary
Country selected
country flag Indonesia
Country selected
country flag Ireland
Country selected
country flag Italy
Country selected
country flag Japan
Country selected
country flag Latvia
Country selected
country flag Lithuania
Country selected
country flag Luxembourg
Country selected
country flag Malaysia
Country selected
country flag Malta
Country selected
country flag Mexico
Country selected
country flag Netherlands
Country selected
country flag New Zealand
Country selected
country flag Norway
Country selected
country flag Philippines
Country selected
country flag Poland
Country selected
country flag Portugal
Country selected
country flag Romania
Country selected
country flag Singapore
Country selected
country flag Slovakia
Country selected
country flag Slovenia
Country selected
country flag South Africa
Country selected
country flag South Korea
Country selected
country flag Sweden
Country selected
country flag Switzerland
Country selected
country flag Taiwan
Country selected
country flag Thailand
Country selected
country flag Turkey
Country selected
country flag Ukraine
Country selected
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Home > Web Development > Front End Web Development > D3.js Quick Start Guide
D3.js Quick Start Guide
D3.js Quick Start Guide

D3.js Quick Start Guide: Create amazing, interactive visualizations in the browser with JavaScript

Arrow left icon
Profile Icon Huntington
Arrow right icon
$17.99 $25.99
Full star icon Full star icon Full star icon Full star icon Full star icon 5 (1 Ratings)
eBook Sep 2018 180 pages 1st Edition
eBook
$17.99 $25.99
Paperback
$32.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Huntington
Arrow right icon
$17.99 $25.99
Full star icon Full star icon Full star icon Full star icon Full star icon 5 (1 Ratings)
eBook Sep 2018 180 pages 1st Edition
eBook
$17.99 $25.99
Paperback
$32.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$17.99 $25.99
Paperback
$32.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Table of content icon View table of contents Preview book icon Preview Book

D3.js Quick Start Guide

Using SVG to Create Images Using Code

SVG elements are a way to create images within a web page and are the foundation of D3 and how it works. They use code to create shapes, rather than defining each pixel of an image. This chapter covers how to create various SVG elements within a web page. In it, we will cover the following topics:

  • Base tags
  • Basic elements
  • Positioning
  • Styling
  • Important SVG elements

The complete code for this section can be found here: https://github.com/PacktPublishing/D3.js-Quick-Start-Guide/tree/master/Chapter02.

Base tag

When viewing SVG graphics in a browser, it's important to embed an <svg> tag inside an HTML page. Let's create an index.html file and add the following to it:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
    </head>
    <body>
        <svg></svg>
    </body>
</html>

Now start a web browser and open that file (usually, File | Open File). For this book, it is recommended that the reader use Google Chrome, but in development and production, any browser will do. If we inspect our HTML in the Elements tab of Chrome's Dev Tools (View | Developer | Developer Tools), we'll see the following:

Basic elements

We can draw elements in our <svg> element by adding a variety of predefined tags as child elements of the <svg>. This is just as we did in HTML, where we add <div>, <a>, and <img> tags inside the <body> tag. There are many tags, such as <circle>, <rect>, and <line>, that we'll explore in a bit. Here's just one example:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
    </head>
    <body>
        <svg>
            <circle></circle>
        </svg>
    </body>
</html>

Note that we can't see the circle because it doesn't have a radius, as shown in this screenshot:

We'll talk more about this later, but, for now, if we want to see the circle, we can add a special attribute that all <circle>...

Positioning an element

The <svg> tag is an inline element, such as an image (as opposed to a block element such as a <div>). Elements within the <svg> are positioned similar to Photoshop, with a set of coordinates that follow the form (x,y). An example of this could be (10,15), which translates to x=10 and y=15. This is different than HTML, where elements are laid out relative to one another. Here are some important things to keep in mind:

  • The point (0,0) is the upper–left corner of the <svg> element.
  • As y values increase, the point moves vertically down the <svg> element.
  • Don't confuse this with a typical coordinate system that has (0,0) at the lower–left corner with a point moving up, as y increases in value. This diagram shows the difference between a traditional coordinate system and an SVG coordinate system:

We can use...

Styling an element

The appearance of any tag inside an <svg> can be styled with the following attributes (the following are the attributes with example values):

  • fill=red or fill=#ff0000 will alter the color of the shape.
  • stroke=red or stroke=#ff0000 will alter stroke color. Stroke is a line that surrounds each element.
  • stroke-width=4 will adjust the width of the stroke.
  • fill-opacity=0.5 will adjust the transparency of the fill color.
  • stroke-opacity=0.5 will adjust the transparency of the stroke color.
  • transform = "translate(2,3)" will translate the element by the given x, y values.
  • transform = "scale(2.1)" will scale the size of the element by the given proportion (for example, 2.1 times as big).
  • transform = "rotate(45)" will rotate the element by the given number of degrees.

Let's style the circle we positioned previously:

<circle...

Important SVG elements

To demonstrate each element, we'll use the following code as a starting point and then add each element inside the <svg> tag:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
    </head>
    <body>
        <svg width=800 height=600>
        </svg>
    </body>
</html>

Let's now move on to each element. Note that you can write each tag in the form <element></element>, as we did with <circle></circle> previously, or the self-closing form, <element/>, which you will see next with <circle/>.

Circle

Circles have the following attributes:

  • r: radius
  • cx: x position
  • cy: y position...

Summary

In this chapter, we covered the basics of SVG (base tags, basic elements, positioning, and styling). We also looked 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. In Chapter 3, Building an Interactive Scatter Plot, we will dive into the basics of D3.js and create an interactive scatter plot.

Left arrow icon

Page 1 of 7

Right arrow icon
Download code icon Download Code

Key benefits

  • Takes you through the most common graphs you'll need
  • Add interactivity to your visualizations
  • Easy to follow builds

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.

Who is this book 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.

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

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Sep 27, 2018
Length: 180 pages
Edition : 1st
Language : English
ISBN-13 : 9781789347746
Category :
Web Development
Languages :
JavaScript
Concepts :
Front End Web Development
Tools :
D3

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want

Product Details

Publication date : Sep 27, 2018
Length: 180 pages
Edition : 1st
Language : English
ISBN-13 : 9781789347746
Category :
Web Development
Languages :
JavaScript
Concepts :
Front End Web Development
Tools :
D3

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
START FREE TRIAL
BUY NOW
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW

Frequently bought together

Learning D3.js 5 Mapping
Learning D3.js 5 Mapping
Read more
Nov 2017 298 pages
Full star icon 2 (1)
eBook
eBook
  • eBook eBook $24.99
  • Paperback Paperback $43.99
$24.99 $35.99
$43.99
D3.js Quick Start Guide
D3.js Quick Start Guide
Read more
Sep 2018 180 pages
Full star icon 5 (1)
eBook
eBook
  • eBook eBook $17.99
  • Paperback Paperback $32.99
$17.99 $25.99
$32.99
Learn D3.js
Learn D3.js
Read more
May 2019 650 pages
Full star icon 4.1 (10)
eBook
eBook
  • eBook eBook $17.99
  • Paperback Paperback $38.99
$17.99 $26.99
$38.99
Stars icon
Total $ 115.97
Learning D3.js 5 Mapping
$43.99
D3.js Quick Start Guide
$32.99
Learn D3.js
$38.99
Total $ 115.97 Stars icon

Table of Contents

9 Chapters
Getting Started with D3.js Chevron down icon Chevron up icon
Getting Started with D3.js
What is SVG?
What makes D3 so special?
This book's approach to learning
A preview of each build
Setting up
Summary
Using SVG to Create Images Using Code Chevron down icon Chevron up icon
Using SVG to Create Images Using Code
Base tag
Basic elements
Positioning an element
Styling an element
Important SVG elements
Summary
Building an Interactive Scatter Plot Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
Creating a Bar Graph Using a Data File
Setting up our application
Creating an external file to hold our data
Making an AJAX request
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
Using Physics to Create a Force-Directed Graph
What is a force-directed graph?
How to set up a graph of relationships
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
Other Books You May Enjoy
Leave a review - let other readers know what you think

Recommendations for you

Left arrow icon
React and React Native
React and React Native
Read more
Apr 2024 508 pages
Full star icon 4.3 (9)
eBook
eBook
  • eBook eBook $24.99
  • Paperback Paperback $29.99
$24.99 $35.99
$29.99 $43.99
Django 5 for the Impatient
Django 5 for the Impatient
Read more
Sep 2024 228 pages
Full star icon 4 (2)
eBook
eBook
  • eBook eBook $18.99
  • Paperback Paperback $23.99
$18.99 $27.99
$23.99 $34.99
Django 5 By Example
Django 5 By Example
Read more
Apr 2024 820 pages
Full star icon 4.5 (35)
eBook
eBook
  • eBook eBook $23.98
  • Paperback Paperback $29.98
$23.98 $39.99
$29.98 $49.99
​AI Strategies for Web Development
​AI Strategies for Web Development
Read more
Sep 2024 458 pages
eBook
eBook
  • eBook eBook $20.99
  • Paperback Paperback $37.99
$20.99 $30.99
$37.99
Mastering Angular Test-Driven Development
Mastering Angular Test-Driven Development
Read more
Oct 2024 246 pages
Full star icon 5 (1)
eBook
eBook
  • eBook eBook $20.99
  • Paperback Paperback $37.99
$20.99 $30.99
$37.99
GraphQL Best Practices
GraphQL Best Practices
Read more
Oct 2024 422 pages
eBook
eBook
  • eBook eBook $21.99
  • Paperback Paperback $39.99
$21.99 $31.99
$39.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.4 (72)
eBook
eBook
  • eBook eBook $27.98
  • Paperback Paperback $49.99
$27.98 $39.99
$49.99
Building Python Microservices with FastAPI
Building Python Microservices with FastAPI
Read more
Aug 2022 420 pages
Full star icon 3.9 (9)
eBook
eBook
  • eBook eBook $25.99
  • Paperback Paperback $46.99
$25.99 $37.99
$46.99
Building Production-Grade Web Applications with Supabase
Building Production-Grade Web Applications with Supabase
Read more
Aug 2024 534 pages
Full star icon 4.3 (8)
eBook
eBook
  • eBook eBook $21.99
  • Paperback Paperback $27.98
$21.99 $31.99
$27.98 $39.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 498 pages
Full star icon 4.5 (57)
eBook
eBook
  • eBook eBook $24.99
  • Paperback Paperback $44.99
$24.99 $35.99
$44.99
Right arrow icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Full star icon 5
(1 Ratings)
5 star 100%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
L. Dec 21, 2018
Full star icon Full star icon Full star icon Full star icon Full star icon 5
It isn't always easy to know what book to start with for software. I was a bit worried about getting a D3 book that would be too advanced, or worse, not have enough information. This was perfect. The explanations are easy to understand and the code is presented in a logical order so users learn "why" as they go. Highly recommended for those who are D3 beginners but need something that goes as far as dynamic graphing of external data. This is not a huge book because it doesn't need to be to get the point across. Well done and timely.
Amazon Verified review Amazon

People who bought this also bought

Left arrow icon
Building Python Microservices with FastAPI
Building Python Microservices with FastAPI
Read more
Aug 2022 420 pages
Full star icon 3.9 (9)
eBook
eBook
  • eBook eBook $25.99
  • Paperback Paperback $46.99
$25.99 $37.99
$46.99
React and React Native
React and React Native
Read more
May 2022 606 pages
Full star icon 4.6 (17)
eBook
eBook
  • eBook eBook $27.98
  • Paperback Paperback $49.99
$27.98 $39.99
$49.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 498 pages
Full star icon 4.5 (57)
eBook
eBook
  • eBook eBook $24.99
  • Paperback Paperback $44.99
$24.99 $35.99
$44.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.4 (72)
eBook
eBook
  • eBook eBook $27.98
  • Paperback Paperback $49.99
$27.98 $39.99
$49.99
C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2022 818 pages
Full star icon 4.1 (54)
eBook
eBook
  • eBook eBook $27.98
  • Paperback Paperback $34.98
$27.98 $39.99
$34.98 $49.99
Right arrow icon

About the author

Profile icon Huntington
Huntington
Matt 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.
Read more
See other products by Huntington
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.