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
About the Author
About the Reviewer
Customer Feedback

Drawing grid lines

Quite often, we will need horizontal and vertical grid lines to be drawn in consistency with the ticks on both x and y axes. As we have shown in the previous recipe, typically, we don't have, or don't want to have, precise control of how ticks are rendered on D3 axes. Therefore, we might not know how many ticks are present and their values, before they are rendered. This is especially true if you are building a reusable visualization library, where it is impossible to know the tick configuration ahead of its time. In this recipe, we will explore some useful techniques for drawing consistent grid lines on Axis without actually needing to know the tick values.

Getting ready

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

How to do it...

First, let's take a look at how we draw grid lines in the following code:

<script type="text/javascript"> 
    var height = 500, ...