D3: Modern Web Visualization: Exploratory Visualizations, Interactive Charts, 2D Web Graphics, and Data-Driven Visual Representations

by Victor M Garcia Sanabria

Length: 454 pages
Edition: 1
Language: English
Publisher: BPB Publications
Publication Date: 2022-11-28
ISBN-10: 9355511019
ISBN-13: 9789355511010
Sales Rank: #0 (See Top 100 Books)

0 ratings

Print Book Look Inside

How to Make Web Visualizations with D3js

Key Features

Includes narrative tools to master data visualization methods, charts, templates, and D3.
Essential strategies for creating intelligent visualizations and modern graphs beyond simple lines, bars, and pie charts.
Provides the opportunity for readers to create the graphs that are best suited for their data.

Description

Picking the most appropriate tool is essential whenever you develop a dynamic chart online. D3.js is a clear winner here. The author of this book set out to delve deeply into the software engineering community’s most widely used charting library.

From data requests to scale and style, and even some experiment charts, you’ll have a firm grasp on everything you need to know to create your charts. You can make static charts much more engaging by incorporating elements such as tooltips, interactions, legends, and selectors.

The book explains how to make a simple chart in easy-to-understand steps. Each chapter in the book will deepen your understanding of the different components of charts and the options that D3.js provides for making them. The book dives deeply into the code and examines various charting examples for different use cases. This book will help you learn to create charts by constantly referencing all chapters.

What you will learn

Create 2D illustrations utilizing SVG, Canvas, and HTML5.
Try out all the different visualization and interaction methods that D3 offers.
Explore color, contour, noise, and texture.
Investigate D3’s data-driven methods and DOM manipulation capabilities.
Get access to the full capabilities of modern browsers for producing optimal graphical user interfaces.

Who this book is for

This book has been meticulously assembled for readers who work with data visualization, such as UI designers, web developers, makers of BI dashboards, and data analysts. It will teach you how to create the most engaging infographics from messy and stacked information.

Cover Page
Title Page
Copyright Page
Dedication Page
About the Author
Acknowledgement
Preface
Errata
Table of Contents
1. Getting Started
    Structure
    Objectives
    How to read this book?
    Who is this book for?
    Before we start
    What is D3?
        Make a new directory
            Windows
            MAC OS
        Starting a server
        Creating our index.html
        Copying an existing chart
            Case 1: Data is in the same file
            Case 2: Data is in a different file
        Visualizing our first chart
        Code revision
    Your next exercise
    Annex 1: Installing Python
    Annex 2: Installing node
    Key takeaways
    Conclusion
2. The SVG Tag
    Structure
    Objective
    SVG versus Bitmap
    HTML5 Canvas versus HTML SVG
    HTML SVG tag
        SVG
            Notation
            Attributes
    Shapes
        Rectangles
            Notation
            Attributes
        Circles
            Notation
            Attributes
        Ellipse
            Notation
            Attributes
        Line
            Notation
            Attributes
        Polygon
            Notation
            Attributes
        Polyline
            Notation
            Attributes
        Path
            Notation
            Attributes
            Move commands
            Line commands
            Cubic Bezier curve commands
            Quadratic Bezier curve commands
            Elliptical arc commands
            Closing path commands
    Text
        Text block
            Notation
            Attributes
        Text span
            Notation
            Attributes
        Text path
            Notation
            Attributes
    Conclusion
    Key takeaways
3. Treating Data
    Structure
    Objectives
    Data calls
        Local connections
        Exercise
        Solution
        In depth
        Unknown data source
        Bonus
    Connecting to a server
        Example
    Parsing values
    Timed calls
        Example
        Example
    Calls in v4
    Conclusion
    References
4. Working with Selections
    Structure
    Objectives
    Select
        Example
        Chaining selections
        Clone selection
        Remove selection
            Exercise
    Append
        Exercise
        Exercise
        Insert
        Exercise
    Groups
        Example
    Attributes
    Filter selection
    Each
    Call
    Data order
    Ascending and descending functions
        Sort
    Conclusion
5. Styling, Templates and Color Theory
    Structure
    Objectives
    Styling Our Charts
    Ids and Classes
    Style vs Attribute
    Classed
    Color
        Styling Attributes
            Fill
            Example
        Styling Text
        Styling with patterns
            linearGradient
            radialGradient
            defs
    Color Theory
        Psychology of color
        Simple guidance on color usage in visualizations
        Using neutral colors
        Contrast to call out
        Using one color
        Coloring group categories
        Coloring temperature to represent… temperature
    Conclusion
    Points to Remember
    Further Reading
6. Scales and Axes
    Structure
    Objectives
    What is Scale?
        The Scale Function
            Exercise
            Solution
            Exercise
            Solution
    Types of Scales
        Discrete data vs Continuous
    Drawing the Axes
        Exercise
        Solution
        Customizing the axes
    Proposed Exercises
    Conclusion
    Key Takeaways
7. Dynamic and Interactive
    Structure
    Chapter Objectives
    Animating content
        Javascript Transitions
            Exercise
        Easing the animation
            A visual explanation
    The Update Pattern
        Example
        The join method
            Progressive Animation
    Adding Interactivity
        Tooltips
            Example
        Control
            Interactive Legends
            Example
            Buttons
            Interactive Chart Elements
        Brushes
            Brushing to select
            Brushing as a slider control
    Key Takeaways
    Conclusion
8. Choosing the right visualization
    Structure
    Objectives
    Principles of Perception
        A few notes on Visual Hierarchy
    Data vs. information
    Types of Visualizations
        Comparison
        Distribution
        Correlation
        Composition
        Conclusion
        Questions
    Points to Remember
9. Comparison Charts
    Structure
    Objectives
    Horizontal bar chart
    Vertical bar chart
    Line chart
    Multiline chart
    Multiline chart (Version 2)
        Block 2: The data call
    Radial charts
    Word clouds
    Conclusions
    Key takeaways
10. Distribution Charts
    Structure
    Objectives
    Boxplots
    Candles
    Histograms
    Conclusion
    Key takeaways
11. Correlation Charts
    Structure
    Objectives
    Scatter and bubble plots
        Example
    Heatmaps
        Adding the controls
    Choropleth maps
        Example 1: Depicting the simplest map
        Example 2: Representing the data
    Conclusions
    Key takeaways
12. Composition Charts
    Structure
    Objective
    Pies, donuts, and gauges
        Example 1: Most basic pie chart
        Example 2: Donuts
        Example 3: Gauge charts
        Animating pies, donuts, and gauge charts
            Exercise
            Result
    Stacked bar charts
        Exercise
        Result
        Representing the stacked bars
    Stacking to 100%
        Exercise
    Multibar charts
    Area and stacked area charts
        Stacking areas
        Exercise
        Stacked 100% areas
    Treemaps
        Exercise
        Exercise
        Key takeaways
    Conclusions
Index