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! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Learning Responsive Data Visualization
Learning Responsive Data Visualization

Learning Responsive Data Visualization: Create stunning data visualizations that look awesome on every device and screen resolutions

Arrow left icon
Profile Icon Hanchett Profile Icon Körner
Arrow right icon
NZ$52.19 NZ$57.99
Full star icon Full star icon Full star icon Full star icon Half star icon 4.3 (3 Ratings)
eBook Mar 2016 258 pages 1st Edition
eBook
NZ$52.19 NZ$57.99
Paperback
NZ$57.59 NZ$71.99
Subscription
Free Trial
Arrow left icon
Profile Icon Hanchett Profile Icon Körner
Arrow right icon
NZ$52.19 NZ$57.99
Full star icon Full star icon Full star icon Full star icon Half star icon 4.3 (3 Ratings)
eBook Mar 2016 258 pages 1st Edition
eBook
NZ$52.19 NZ$57.99
Paperback
NZ$57.59 NZ$71.99
Subscription
Free Trial
eBook
NZ$52.19 NZ$57.99
Paperback
NZ$57.59 NZ$71.99
Subscription
Free Trial

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
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

Learning Responsive Data Visualization

Chapter 2. Creating a Bar Chart Using D3.js and SVG

In this chapter, you will learn how to create a bar chart, including proper axis and scales—this requires some basic knowledge in D3, which will also be covered here. You will learn the following:

  • How to select and transform DOM elements using D3
  • How to use D3 with SVG elements
  • How to use a data-driven approach to create visualizations
  • How to use data binding and data joins
  • How to use dynamic properties
  • How to draw lines, areas, and arcs
  • How to use scales
  • How to draw axis
  • How to create a bar chart

First, we will start with some simple DOM selections and transformations of HTML elements and continue creating SVG elements using D3. We will also see how to bind data to the DOM and apply data-driven transformations using data joins and dynamic properties.

In the second section, we will see one of the built-in SVG abstractions in D3—the so-called generator functions—especially line, area, and arc generators. These abstractions...

Getting started with D3.js

In this chapter, we will create our first bar chart using D3.js and SVG; however, to get there, we will have to go through some basics. These basic concepts are very important because they will give you the freedom to create visualizations for almost everything that you have in your mind. The more of them you know and understand, the more crazy things you can do with D3.

D3.js is a powerful JavaScript library for data-driven DOM manipulations and includes predefined abstractions, transformations, and helpers to work with SVG elements. This makes it an excellent library to write interactive data visualization components using web standards and the complete capabilities of modern web browsers.

Don't worry if you think that this definition is full of fancy buzzwords because in this section, we will walk through all of them. You will understand exactly what they mean and why this makes D3 and SVG a great combination to create visualizations.

Selecting and manipulating...

Drawing shapes with D3

D3 is a great library to create web visualizations because it includes a lot of useful abstractions when working with SVG elements. In this section, we will look at some of these SVG abstractions to draw shapes. These abstractions for drawing shapes are called generators in D3; we will mainly use the line-, area-, and arc-generators when creating visualizations.

Note

All SVG shape abstractions can be found in the D3 Github page at https://github.com/mbostock/d3/wiki/API-Reference#d3svg-svg.

Drawing Lines and Curves

If you've ever used the SVG path element and the d attribute to create custom shapes or Bézier curves, you already know that this is not as easy as it should be. Those who have never used the SVG path element only need to know that you would have to learn a special syntax to define and concatenate control points for a Bézier curve.

Note

You can find more information about the d attribute on MDN at https://developer.mozilla.org/en-US/docs/Web/SVG...

Creating Scales and Axis

D3 is often mistaken for a charting library, which is not really correct. D3 provides loads of built-in functions to easily create interactive charts; however, it is not a charting library. One of these typical built-in charting helpers are the closely related Scales and axis generators. You will learn about them in this section.

At the end of this section, we want to be able to draw a simple axis as the one in the following figure. Therefore, we need to scale our dataset to a specific pixel range (using Scales) and create all the SVG elements for the axis (using axis generators):

Creating Scales and Axis

Axis in D3

Mapping data values to a Pixel Range with scales

The concept of scales is very important when we deal with graphics and visualization. It is a common task to scale values from a certain domain to a certain range of pixels. We need them to create tick values on axes, and we need them to scale our data points to the area of the chart.

The following figure explains the problem a little...

A simple bar chart

Congratulations, you've gathered all the knowledge to build your first bar chart; and this is exactly what we will do in this section. In the following figure, we will create a bar chart that has axis, scales, bars, and labels.

A simple bar chart

A simple bar chart

Let's start with a simple setup—a blank HTML page that loads the D3 library from the bower components directory. In addition, we define the crispEdges rendering for path elements in the header:

<!doctype HTML>
<html>
<head>
<title>Bar Chart</title>
<script src="bower_components/d3/d3.min.js"></script>

<style>
      .axis path, .axis line {
        fill: none;
        stroke: #999;
        shape-rendering: crispEdges;
      }
      .data rect {
        stroke: red;
        fill: rgba(255, 0, 0, 0.5);
      }
</style>

</head>
<body>
<script>
    // Our code goes here
</script>
</body>
</html>

Now, we can start to write...

Summary

In this chapter, you learned how to select DOM elements and do data-driven transformations using data joins and dynamic properties. We also saw how to use shape and axis generator functions to quickly create common shapes such as lines or areas.

In the end of this chapter, we built our first simple (almost) responsive bar chart. The bar chart already adapts to the width of the browser window on the page load, but it doesn't get recomputed when we change the browser dimensions.

In the next chapter, we will take a look at loading, filtering, and grouping data. This is very important because almost always we will have to load remote data in a certain format (such as CSV) and then process, filter, or group it afterwards in order to visualize it.

Left arrow icon Right arrow icon

Key benefits

  • Learn the techniques for building data visualizations that work well for all screen sizes
  • Implement responsive techniques with popular libraries to get to grips with building responsive visualizations that work in the real world
  • Incorporate responsive workflow in your data visualization process to build visualizations that take a mobile-first approach.

Description

Using D3.js and Responsive Design principles, you will not just be able to implement visualizations that look and feel awesome across all devices and screen resolutions, but you will also boost your productivity and reduce development time by making use of Bootstrap—the most popular framework for developing responsive web applications. This book teaches the basics of scalable vector graphics (SVG), D3.js, and Bootstrap while focusing on Responsive Design as well as mobile-first visualizations; the reader will start by discovering Bootstrap and how it can be used for creating responsive applications, and then implement a basic bar chart in D3.js. You will learn about loading, parsing, and filtering data in JavaScript and then dive into creating a responsive visualization by using Media Queries, responsive interactions for Mobile and Desktop devices, and transitions to bring the visualization to life. In the following chapters, we build a fully responsive interactive map to display geographic data using GeoJSON and set up integration testing with Protractor to test the application across real devices using a mobile API gateway such as AWS Device Farm. You will finish the journey by discovering the caveats of mobile-first applications and learn how to master cross-browser complications.

Who is this book for?

Web developers and data science professionals who want to make their visualizations work for smaller screen sizes. Some basic knowledge of JavaScript and Data visualization is expected.

What you will learn

  • * Get familiar with responsive design for data visualizations
  • * Understand the main concepts of D3.js to create interactive visualizations
  • * Unleash the power of Bootstrap to create stunning and responsive visualizations for all screen resolutions
  • * Implement Touch and Mouse interactions for mobile-first applications
  • * Design Transitions and Animations that impress in portrait and landscape
  • * Build a Responsive World Map using GeoJSON and D3.js

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Mar 23, 2016
Length: 258 pages
Edition : 1st
Language : English
ISBN-13 : 9781785884337
Category :
Languages :
Tools :

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
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Mar 23, 2016
Length: 258 pages
Edition : 1st
Language : English
ISBN-13 : 9781785884337
Category :
Languages :
Tools :

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
$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 NZ$7 each
Feature tick icon Exclusive print discounts
$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 NZ$7 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total NZ$ 172.77 215.97 43.20 saved
Learning Responsive Data Visualization
NZ$57.59 NZ$71.99
Learning Highcharts 4
NZ$57.59 NZ$71.99
Data Visualization with D3 and AngularJS
NZ$57.59 NZ$71.99
Total NZ$ 172.77 215.97 43.20 saved Stars icon

Table of Contents

10 Chapters
1. Getting Started with Responsive Design, Bootstrap, and D3.js Chevron down icon Chevron up icon
2. Creating a Bar Chart Using D3.js and SVG Chevron down icon Chevron up icon
3. Loading, Filtering, and Grouping Data Chevron down icon Chevron up icon
4. Making the Chart Responsive Using Bootstrap and Media Queries Chevron down icon Chevron up icon
5. Building Responsive Interactions Chevron down icon Chevron up icon
6. Designing Transitions and Animations Chevron down icon Chevron up icon
7. Creating Maps and Cartographic Visualizations Using GeoJSON Chevron down icon Chevron up icon
8. Testing Responsive Visualizations Chevron down icon Chevron up icon
9. Solving Cross-Browser Issues Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.3
(3 Ratings)
5 star 33.3%
4 star 66.7%
3 star 0%
2 star 0%
1 star 0%
Marc Aug 16, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Great resource for kick-starting any development in data visualization. The author clearly has a lot of experience in field. and the book is written in an approachable manner. Code snippets are usually accompanied by images representing the output of the code, which is very helpful. A great deal of emphasis is place upon established javascript conventions. However, readers should be familiar with the basics of programming as the book jumps straight into visualization concepts. 5/5
Amazon Verified review Amazon
Stefan Kupstaitis-Dunkler Aug 03, 2016
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
+ short, concise, comprehensible, simple- occasionally too short and simple+ many links for further reading to official documentation or interesting blog entries+ utilizing non-invasive text boxes throughout the chapters.+ The author understands how to direct the reader's attention at the important parts of the technologies introduced.+ Visualizations of examples AND concepts very helpfulBook audience: intermediate at HTML, CSS, JavaScript; Beginner of D3.js
Amazon Verified review Amazon
Georg H. Jul 03, 2016
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
Christoph Körner publishes a book very well suited for beginners.Starting with the basics (media queries, plotting options in the browser) he continues to explain how to create shapes in D3.I like that data wrangling is explained as usually data will need to be grouped or re-formatted to be useful for visualization in D3.Choosing the right resolution of the data for real responsiveness is covered as well.In my opinion, this book is targeted at beginners starting out with responsive data visualization. As such I really like that Christoph is covering everything from the basics onwards.As responsive visualization is important for web-applications I am missing a chapter of how to integrate D3 with a popular web framework like Angular.
Amazon Verified review Amazon
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.

Modal Close icon
Modal Close icon