English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 3h 26m | 688 MB
Learn to use D3.js 5.0 for visualizing data models
D3 (or D3.js) is a JavaScript library for visualizing data using web standards. It helps you bring data to life using SVG, Canvas, and HTML by combining powerful visualization and interaction techniques.
In this course, 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 load data internally or externally while creating stunning data visualizations using D3 and SVG. You’ll build line graphs, scatter plots, area charts, interactive tree diagrams, and customize your own map. You’ll also 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.
By the end of this course, you’ll have learned some exciting tips, best practices, and techniques for your data representation and data analysis and will be able to build your own data models with D3.js much faster and with ease.
This course is a step-by-step tutorial with a focus on practical examples for you to implement on your own. As you work through the videos, you’ll progressively learn the necessary skills to become a pro D3.js developer. This will help you not only make sense of huge amounts of data, but also represent it in an aesthetic and sleek manner.
What You Will Learn
- Get to know what data, data visualization, and D3.js are
- Know how to set up a local server in a few easy steps
- Discover what SVG is and see how to create simple or complex shapes with it
- Use methods and write functions in D3.js
- Load data using JavaScript or external sources (CSV and JSON)
- Build a bar graph and code a more complex and dynamic SVG bar graph
- See how to build a scatter plot
- Build a line and an area chart and refine the outcome of your SVG shapes
Table of Contents
Setting Up to Success
1 The Course Overview
2 What Is Data Visualization
3 What Is D3.js
4 Picking a Text Editor
5 Setting Up a Local Server
Understanding SVGs
6 What Is an SVG
7 Creating Your First SVG
8 Creating Rectangles
9 Creating Circles and Ellipses
10 Creating Lines
Advanced Concepts in SVG
11 Creating Polygons and Polylines
12 Creating Paths
13 Creating Texts
14 Creating Text Paths
15 Creating Clip Paths
Selecting Elements in D3.js V5
16 The Setup
17 What Is Data
18 The select() Method
19 The append() Method
20 Modifying Elements
21 The classed() and style() Methods
Joining Data in D3.js V5
22 The data() and enter() Methods
23 Function in Methods
24 Loading Data from External Sources – CSV
25 Loading Data from External Sources – JSON
Creating a Bar Graph
26 Get Started with Bars
27 Upside-Down SVGs
28 Reverse the Bar
29 Putting a Label
Creating a Scatter Plot
30 Circles in Action
31 The Scatter Plot
32 Breaking Down Scales
33 Using the Scale Function
34 Working with Arrays
35 Visualization with Scales
Creating a Line Chart and an Area Chart
36 Adding the x-axis
37 Styling the Axis
38 Adding the y-axis
39 Setting Up a Line Chart
40 Creating the Line
41 Adding Visual Information
The Collapsible Tree Diagram
42 What Is a Tree Diagram
43 Coding a Horizontal Tree
44 Drawing a Path Between Two Points
45 Updating the Nodes
46 Making the Tree Collapsible
Have Fun with Maps and GeoJSON
47 What is the GeoJSON Format
48 Creating a Simple Map
49 Extended Geographic Projections
50 Make It More Functional
51 Customize the Map
Resolve the captcha to access the links!