4. Creating a Map | Learning D3.js Mapping

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(){
      mexico.transition().duration(500)
          .style('fill', function(d) {
            return color(Math.floor((Math.random() * 32) + 1));
          });
    }...

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning D3.js Mapping

By : Thomas Newton, Oscar Villarreal

Learning D3.js Mapping

By: Thomas Newton, Oscar Villarreal

Overview of this book

Experiment 4 – using updates and transitions to enhance our visualization

Learning D3.js Mapping

By : Thomas Newton, Oscar Villarreal

Learning D3.js Mapping

By: Thomas Newton, Oscar Villarreal

Overview of this book

Experiment 4 – using updates and transitions to enhance our visualization

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access