by Eleftheria Batsou | Released October 2018 | ISBN: 9781789346275

Learn to use D3.js 5.0 for visualizing data modelsAbout This VideoUnderstand the uses and benefits of data visualizationCreate stunning visualizations with D3.jsLearn by coding several examples and using the best practicesIn DetailD3 (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.The code bundle for this course is available at https://github.com/PacktPublishing/Learning-D3.JS-5.0 Show and hide more

1. Chapter 1 : Setting Up to Success
   • The Course Overview 00:04:00
   • What Is Data Visualization? 00:04:39
   • What Is D3.js? 00:02:57
   • Picking a Text Editor 00:04:17
   • Setting Up a Local Server 00:07:13
2. Chapter 2 : Understanding SVGs
   • What Is an SVG? 00:03:14
   • Creating Your First SVG 00:02:21
   • Creating Rectangles 00:03:51
   • Creating Circles and Ellipses 00:02:57
   • Creating Lines 00:02:07
3. Chapter 3 : Advanced Concepts in SVG
   • Creating Polygons and Polylines 00:02:42
   • Creating Paths 00:04:18
   • Creating Texts 00:03:06
   • Creating Text Paths 00:03:23
   • Creating Clip Paths 00:03:21
4. Chapter 4 : Selecting Elements in D3.js V5
   • The Setup 00:03:11
   • What Is Data? 00:01:38
   • The select() Method 00:02:55
   • The append() Method 00:02:28
   • Modifying Elements 00:03:44
   • The classed() and style() Methods 00:03:50
5. Chapter 5 : Joining Data in D3.js V5
   • The data() and enter() Methods 00:05:00
   • Function in Methods 00:03:19
   • Loading Data from External Sources – CSV 00:06:02
   • Loading Data from External Sources – JSON 00:02:58
6. Chapter 6 : Creating a Bar Graph
   • Get Started with Bars 00:05:36
   • Upside-Down SVGs 00:07:21
   • Reverse the Bar 00:03:31
   • Putting a Label 00:04:37
7. Chapter 7 : Creating a Scatter Plot
   • Circles in Action 00:07:11
   • The Scatter Plot 00:02:47
   • Breaking Down Scales 00:03:33
   • Using the Scale Function 00:03:15
   • Working with Arrays 00:02:51
   • Visualization with Scales 00:04:56
8. Chapter 8 : Creating a Line Chart and an Area Chart
   • Adding the x-axis 00:07:02
   • Styling the Axis 00:02:36
   • Adding the y-axis 00:04:11
   • Setting Up a Line Chart 00:06:18
   • Creating the Line 00:04:28
   • Adding Visual Information 00:03:42
9. Chapter 9 : The Collapsible Tree Diagram
   • What Is a Tree Diagram? 00:01:56
   • Coding a Horizontal Tree 00:05:07
   • Drawing a Path Between Two Points 00:08:44
   • Updating the Nodes 00:04:59
   • Making the Tree Collapsible 00:06:04
10. Chapter 10 : Have Fun with Maps and GeoJSON
    • What is the GeoJSON Format? 00:03:43
    • Creating a Simple Map 00:03:29
    • Extended Geographic Projections 00:03:30
    • Make It More Functional 00:03:56
    • Customize the Map 00:01:52
Show and hide more