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

Creating an area chart


An area chart or an area graph is very similar to a line chart and largely implemented based on the line chart. The main difference between an area chart and a line chart is that in the area chart, the area between the axis and the line will be filled with colors or textures. In this recipe, we will explore techniques of implementing a type of area chart known as Layered Area Chart.

Getting ready

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

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter8/area-chart.html

How to do it...

An area chart implementation is largely based on the line chart implementation and shares a lot of common graphical elements, such as the axes and the clip path; therefore, in this recipe, we will only show the code that concerns the area chart implementation specifics:

... 
 
function renderBody(svg) { 
        if (!_bodyG) 
            _bodyG = svg.append("g") 
                    .attr...