A Complete Guide To Data Visualization With D3.Js 5

Design and build beautiful data visualizations for business intelligence with D3.js

What you'll learn

Get to know what data, data visualization, and D3 .js are

Load data using JavaScript or external sources such as, CSV and JSON

Create a bar graph and code a more complex and dynamic SVG bar graph

Build animated scatter plot, line, and an area chart to refine the outcome of your SVG shapes

Use multiple transitions and make user-friendly charts

Learn about the force layout and know when to use it

Get a firm understanding of GeoJSON, projections, and choropleth maps

Discover new tools for working with data by using the D3 API, in order to more readily assess, understand, and analyze the stories behind the data

Develop your own reusable visualization tools, for fitting graphs and charts into any web situation, ready to consume many types of incoming data

Requirements

Basic JavaScript programming knowledge is required.

Description

This course seeks to take you on a journey to learn to create beautiful visualizations of information using D3.js which is an amazing JavaScript library known among data analysts, engineers, mathematicians, and developers worldwide as an advanced data visualization tool.If you want to create interactive charts, data trees, infographics, geospatial charts, and maps efficiently, then this course is your ideal choice to master interactive data visualization with D3.js V5.This course includes several extensive examples to help you hone your skills with data visualization using D3.js.You will begin with loading load data internally or externally while creating stunning data visualizations using D3 and SVG. You will then create line graphs, scatter plots, bar charts, area charts, interactive tree diagrams, and customize your own map. Next, you will learn to add transitions and animations to your graphs to make them more interactive. Finally, you will master advanced elements of the D3 API with choropleth mapping, developing interactive features, designing responsively adaptable visualizations, and more.Contents and OverviewThis training program includes 3 complete courses, carefully chosen to give you the most comprehensive training possible.In the first course, Learning D3.JS 5.0, you’ll learn about SVG, see how D3.js offers a comprehensive set of visualization tools for your data analysis goals, and how to use these tools. You’ll then load data internally or externally while creating stunning data visualizations using D3 and SVG. You’ll also draw line graphs, scatter plots, area charts, interactive tree diagrams, and customize your own map. Next, you’ll understand and use methods, functions, layouts, and selections to manipulate the DOM using D3. Finally, you’ll understand the enter and exist modes, the click and update functions, projections, and the Geojson format in D3 V5.In the second course, Hands-On Data Visualization with D3.js 5.0, you will learn to add many transitions and animations to your graphs to make them more interesting and appealing to users. This course will also help you build interactive bar charts, scatter plots, and force layouts by manipulating large amounts of data. You will also create choropleth maps and layouts to display visual patterns on geographical locations.The third course, Mastering D3.js 5, will help you learn advanced D3.js features and master you in creating responsive visualizations, integrating 3rd party API data into visualizations, interactive and color-coded mapping, linking charts together for updates across visualizations, and more.By the end of this course, you will have developed a strong foundation in the latest version of D3.js and would be able to create breathtaking visualizations of data using its vast library.Meet Your Expert(s):We have the best work of the following esteemed author(s) to ensure that your learning journey is smooth:Eleftheria Batsou is a passionate front-end developer and UI designer. Her first studies were in the field of Informatics and Telecommunications Engineering and later in Graphical Arts and Multimedia. She likes to teach and share, is self-motivated, and is working hard to make this world a little bit better every day. When she isn't glued to a computer screen, she spends time working out and strolling in nature. Her friends would describe her as easy-going and passionate about life.Colibri Digital is a technology consultancy company founded in 2015 by James Cross and Ingrid Funie. The company works to help their clients navigate the rapidly changing and complex world of emerging technologies, with deep expertise in areas like Big Data, Data Science, Machine Learning, and Cloud Computing. Over the past few years they have worked with some of the world's largest and most prestigious companies, including a tier 1 investment bank, a leading management consultancy group, and one of the world's most popular soft drinks companies, helping each of them to better make sense of their data, and process it in more intelligent ways. The company lives by their motto: Data -> Intelligence -> Action.Eric Laursen is passionate about helping people and organizations make better decisions by understanding information. He works with D3 every day for parts of the American farming industry, building data visualizations to communicate details about products, crops, telemetric data of hardware, process & transactional information for shareholders, and more. Eric enjoys making meaningful, clear, and easy-to-use tools for communicating information in the browser. He enjoys teaching several disciplines including music, personality strengths in the context of community living, and javascript software development skills.

Overview

Section 1: Learning D3.JS 5.0

Lecture 1 The Course Overview

Lecture 2 What Is Data Visualization?

Lecture 3 What Is D3.js?

Lecture 4 Picking a Text Editor

Lecture 5 Setting Up a Local Server

Lecture 6 What Is an SVG?

Lecture 7 Creating Your First SVG

Lecture 8 Creating Rectangles

Lecture 9 Creating Circles and Ellipses

Lecture 10 Creating Lines

Lecture 11 Creating Polygons and Polylines

Lecture 12 Creating Paths

Lecture 13 Creating Texts

Lecture 14 Creating Text Paths

Lecture 15 Creating Clip Paths

Lecture 16 The Setup

Lecture 17 What Is Data?

Lecture 18 The select() Method

Lecture 19 The append() Method

Lecture 20 Modifying Elements

Lecture 21 The classed() and style() Methods

Lecture 22 The data() and enter() Methods

Lecture 23 Function in Methods

Lecture 24 Loading Data from External Sources – CSV

Lecture 25 Loading Data from External Sources – JSON

Lecture 26 Get Started with Bars

Lecture 27 Upside-Down SVGs

Lecture 28 Reverse the Bar

Lecture 29 Putting a Label

Lecture 30 Circles in Action

Lecture 31 The Scatter Plot

Lecture 32 Breaking Down Scales

Lecture 33 Using the Scale Function

Lecture 34 Working with Arrays

Lecture 35 Visualization with Scales

Lecture 36 Adding the x-axis

Lecture 37 Styling the Axis

Lecture 38 Adding the y-axis

Lecture 39 Setting Up a Line Chart

Lecture 40 Creating the Line

Lecture 41 Adding Visual Information

Lecture 42 What Is a Tree Diagram?

Lecture 43 Coding a Horizontal Tree

Lecture 44 Drawing a Path Between Two Points

Lecture 45 Updating the Nodes

Lecture 46 Making the Tree Collapsible

Lecture 47 What is the GeoJSON Format?

Lecture 48 Creating a Simple Map

Lecture 49 Extended Geographic Projections

Lecture 50 Make It More Functional

Lecture 51 Customize the Map

Section 2: Hands-On Data Visualization with D3.js 5.0

Lecture 52 The Course Overview

Lecture 53 Picking a Text Editor

Lecture 54 Setting Up a Local Server

Lecture 55 Develop Your Inner Researcher

Lecture 56 Design, Code, and Storytelling

Lecture 57 Variables, Data Types, and Visual Encodings

Lecture 58 The Visualization Spectrum

Lecture 59 D3: Data Driven Documents

Lecture 60 Let's Build Blocks

Lecture 61 Selectors and Selections

Lecture 62 Scales: How They Actually Work

Lecture 63 Scales: The Syntax

Lecture 64 Creating a Radius Scale

Lecture 65 Scales: The Ordinal One

Lecture 66 Range versus Band

Lecture 67 Creating a Bar Graph

Lecture 68 The paddingInner() and bandwidth() Function

Lecture 69 The scaleLinear() Function

Lecture 70 The Click Event

Lecture 71 Animations –transition()

Lecture 72 Animations – duration() and ease()

Lecture 73 Animations – delay()

Lecture 74 Updating the Data

Lecture 75 Updating and Scaling

Lecture 76 Adding a Clip-Path

Lecture 77 The Start and End Event

Lecture 78 Multiple Transitions

Lecture 79 Nodes and Links

Lecture 80 Setting Up the Layout

Lecture 81 Force Simulation

Lecture 82 The ‘Tick’ Event

Lecture 83 Discovering Map Charts Types

Lecture 84 Let's Make a Map with GeoJSON

Lecture 85 Working with GeoJSON

Lecture 86 Draw and Map Using Projections

Lecture 87 Choropleth Maps

Lecture 88 Holding the Data

Lecture 89 Adding the Cities

Lecture 90 Buttons and Bootstrap Icons

Lecture 91 Taking Care of the Functionality

Lecture 92 Panning the Map

Lecture 93 Dragging the Map

Lecture 94 Updating the Function’s Offset

Lecture 95 The Zoom Library

Lecture 96 Fixing the Errors

Lecture 97 Adding Zoom Buttons

Section 3: Mastering D3.js 5

Lecture 98 The Course Overview

Lecture 99 Introducing Function-Driven Chart Development

Lecture 100 Functional Data-Fetching

Lecture 101 Create a BuildChart Function

Lecture 102 Create a BuildChart Function for a Pie Chart

Lecture 103 Building Hierarchical Data Structures for D3 Consumption

Lecture 104 Building a Family Tree Using Treemap

Lecture 105 Build a Budget Treemap Using Treemap Layout

Lecture 106 Building a Sunburst Flavor Wheel

Lecture 107 Making Objects Appear with Enter

Lecture 108 Updating Existing Objects with Update

Lecture 109 Removing Elements

Lecture 110 Grouping Elements for the D3 Advantage

Lecture 111 Using Parent Div Dimensions for Initial Rendering

Lecture 112 Using a Resize Function for Chart Updating

Lecture 113 Applying Responsive Patterns to a Bar Chart

Lecture 114 Applying Responsive Patterns to a Pie Chart

Lecture 115 Updating Data on Click

Lecture 116 Introducing a Prepare and Update Pattern

Lecture 117 Introducing Enter, Update, Exit Pattern to a Bar Chart

Lecture 118 Introducing Enter, Update, Exit Pattern to a Pie Chart

Lecture 119 Updating Pie and Bar Charts

Lecture 120 Consuming Bitcoin API Data

Lecture 121 Updating Page Layout

Lecture 122 Collecting World Map Country Data

Lecture 123 Collecting Country Income Data and Merging with Country Data

Lecture 124 Rendering a Map

Lecture 125 Color-Coding a Map

Lecture 126 Adding Interactivity to a Map

Lecture 127 Adding Legend Text to the Screen

Lecture 128 Adding Circles to the Legend

Lecture 129 Updating Legend Items on Click

Lecture 130 Updating Countries on Click

This course is for JavaScript developers, designers, and BI professionals who want to create interactive data visualizations to add business intelligence through visualizations which work on desktop as well as mobile devices with D3 .js.