Book Image

Data Visualization with D3 4.x Cookbook - Second Edition

By : Nick Zhu
Book Image

Data Visualization with D3 4.x Cookbook - Second Edition

By: Nick Zhu

Overview of this book

Master D3.js and create amazing visualizations with the Data Visualization with D3 4.x Cookbook. Written by professional data engineer Nick Zhu, this D3.js cookbook features over 65 recipes. ? Solve real-world visualization problems using D3.js practical recipes ? Understand D3 fundamentals ? Includes illustrations, ready-to-go code samples and pre-built chart recipes
Table of Contents (21 chapters)
Data Visualization with D3 4.x Cookbook - Second Edition
Credits
About the Author
About the Reviewer
www.PacktPub.com
Customer Feedback
Preface

Selecting a single element


It is very common that at times you will need to select a single element on a page to perform some visual manipulation. This recipe will show you how to perform a targeted single element selection in D3 using a CSS selector.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter2/single-selection.html .

How to do it...

Let's select something (a paragraph element perhaps) and produce the classic hello world on screen.

<p id="target"></p> <!-- A --> 
 
<script type="text/javascript"> 
    d3.select("p#target") // <-- B 
    .text("Hello world!"); // <-- C 
</script> 

This recipe simply produces text Hello world! on your screen.

How it works...

The d3.select command is used to perform a single-element selection in D3. This method accepts a string that represents a valid CSS3 selector or an element object if you already...