Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Learning D3.js 5 Mapping

You're reading from   Learning D3.js 5 Mapping Build cutting-edge maps and visualizations with JavaScript

Arrow left icon
Product type Paperback
Published in Nov 2017
Publisher
ISBN-13 9781787280175
Length 298 pages
Edition 2nd Edition
Languages
Tools
Arrow right icon
Authors (3):
Arrow left icon
Thomas Newton Thomas Newton
Author Profile Icon Thomas Newton
Thomas Newton
Oscar Villarreal Oscar Villarreal
Author Profile Icon Oscar Villarreal
Oscar Villarreal
Lars Verspohl Lars Verspohl
Author Profile Icon Lars Verspohl
Lars Verspohl
Arrow right icon
View More author details
Toc

Table of Contents (13) Chapters Close

Preface 1. Gathering Your Cartography Toolbox FREE CHAPTER 2. Creating Images from Simple Text 3. Producing Graphics from Data - the Foundations of D3 4. Creating a Map 5. Click-Click Boom! Applying Interactivity to Your Map 6. Finding and Working with Geographic Data 7. Testing 8. Drawing with Canvas and D3 9. Mapping with Canvas and D3 10. Adding Interactivity to Your Canvas Map 11. Shaping Maps with Data - Hexbin Maps 12. Publishing Your Visualization with GitHub Pages

Experiment 4 – using updates and transitions to enhance our visualization

For our next experiment, we will take all of our combined knowledge and add some smooth transitions to the map. Transitions are a fantastic way to add style and smoothness to data changes.

This experiment will, again, require us to start with example-3.html. The complete experiment can be viewed at http://localhost:8080/chapter-4/example-5.html.

If you remember, we leveraged the JavaScript setInterval() function to execute updates at a regular timed frequency. We will go back to this method now to assign a random number between 1 and 33 to our existing color() function. We will then leverage a D3 method to smoothly transition between the random color changes.

Right below the update section, add the following setInterval() block of code:

    setInterval(function(){
map.selectAll('path&apos...
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime