D3.Js In Action Build 17 D3.Js Data Visualization Projects

voska89 · Jan 25, 2023

Last updated 6/2021
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 9.11 GB | Duration: 17h 22m
D3.js (V 5) from Scratch! Build Useful D3.js Data Visualization Projects! D3.js for Beginners

What you'll learn
Learn D3 from beginner to professional level
Develop different types of data visualizations
Understand the core of D3 - enter, update and exit selections in depth
Develop 14 unique D3 data visualization projects
Make the best use of available data to represent it visually
Learn D3 scales to adjust the size of the visualizations
Learn how to add an axis for reference
Add life to visualizations using D3 transitions
Requirements
Basic understanding of HTML, CSS and JavaScript
A text editor and web browser
Description
*** 17 hours of content ***-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------"A picture is worth a thousand words". It is true that concepts are easily understood when explained with the help of diagrams. In today's data-driven world, it is very important to make the best use of available data in such a way that useful insights are derived from it. Data visualization is the easiest and fastest way to make it possible. D3.js is a popular JavaScript library for manipulating documents in the context of data data. D3 stands for Data Driven Documents. D3 helps you bring data to life using HTML, SVG, and CSS.D3 allows you to bind data to a Document Object Model, and then apply data-driven transformations to the document. Elements can be added, removed, or modified according to the contents of the data set. For example, you can use D3 to generate an HTML table from an array of numbers or even use the same data to create a horizontal bar chart using SVG. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation."D3.js in Action: Build 17 D3.js Data Visualization Projects" is a 100% practical hands-on course that teaches you D3.js from scratch using the latest available version V5. All concepts are explained in a very detailed and easily understandable manner. The instructor codes along instead of explaining the concepts with already prepared code samples. By completing this course, you will be confident enough to develop D3.js Data Visualizations on your own from scratch.As of now, there are 17 projects included in this course that are developed from scratch. This will help you really boost your confidence in applying your D3.js knowledge to develop real-world data visualization projects. The projects developed as part of this course are:Horizontal Bar ChartVertical Bar ChartVertical Bar Chart with AxesScatterplotLine ChartArea ChartStacked Area ChartPie Chart with LegendAnimated Bar ChartMoving StarsMake Me LaughFamily TreeClassic Family TreeTree with ImagesComplete Family TreeZoomable Family TreeAncestry ChartSo join this wonderful D3.js course and have a great time learning D3.js (V5).
Overview
Section 1: Be Familiar with D3.js (Introduction to D3.js)
Lecture 1 What is D3.js?
Lecture 2 General Instructions to Follow
Lecture 3 What Software You Need?
Section 2: Primer on Technology Fundamentals (D3.js Prerequisites)
Lecture 4 CSS Selectors - Part 1
Lecture 5 Source Code: CSS Selectors - Part 1
Lecture 6 CSS Selectors - Part 2
Lecture 7 Source Code: CSS Selectors - Part 2
Lecture 8 SVG Basics - Part 1
Lecture 9 Source Code: SVG Basics - Part 1
Lecture 10 SVG Basics - Part 2
Lecture 11 Source Code: SVG Basics - Part 2
Lecture 12 SVG Basics - Part 3
Lecture 13 Source Code: SVG Basics - Part 3
Section 3: Be Ready to Start (Basics of D3.js)
Lecture 14 Set Up D3.js Development Environment
Lecture 15 Source Code: Set Up D3.js Development Environment
Lecture 16 Select the Required Elements - Part 1
Lecture 17 Source Code: Select the Required Elements - Part 1
Lecture 18 Select the Required Elements - Part 2
Lecture 19 Source Code: Select the Required Elements - Part 2
Lecture 20 Style the Selected Elements
Lecture 21 Source Code: Style the Selected Elements
Lecture 22 Add Class to the Selected Elements
Lecture 23 Source Code: Add Class to the Selected Elements
Lecture 24 Set Attributes to the Selected Elements
Lecture 25 Source Code: Set Attributes to the Selected Elements
Lecture 26 Set Content for the Selected Elements
Lecture 27 Source Code: Set Content for the Selected Elements
Lecture 28 Add New Elements
Lecture 29 Source Code: Add New Elements
Lecture 30 Hands-On: Create SVG on the Fly
Lecture 31 Source Code: Hands-On - Create SVG on the Fly
Section 4: D3.js Data Joins (The Core of D3.js)
Lecture 32 Join an Array of Data with Selected Elements
Lecture 33 Source Code: Join an Array of Data with Selected Elements
Lecture 34 Join an Array of Objects with Selected Elements
Lecture 35 Source Code: Join an Array of Objects with Selected Elements
Lecture 36 Introduction to Data Joins: The Core of D3.js
Lecture 37 Enter, Update and Exit Selections in Version 3
Lecture 38 Source Code: Enter, Update and Exit Selections in Version 3
Lecture 39 Enter, Update and Exit Selections in Version 5
Lecture 40 Source Code: Enter, Update and Exit Selections in Version 5
Lecture 41 The Real Magic of D3
Lecture 42 Source Code: The Real Magic of D3
Lecture 43 Project 1: Horizontal Bar Chart
Lecture 44 Project 2: Vertical Bar Chart
Section 5: Adjust the Size Up or Down (D3.js Scales)
Lecture 45 Introduction to Scales in D3.js
Lecture 46 Linear Scales
Lecture 47 Source Code : Linear Scales
Lecture 48 Avoid Hardcoding with min and max
Lecture 49 Source Code : Avoid Hardcoding with min and max
Lecture 50 Color Scales
Lecture 51 Source Code: Color Scales
Lecture 52 Power and Logarithmic Scales
Lecture 53 Source Code: Power and Logarithmic Scales
Lecture 54 Time Scales: Part 1
Lecture 55 Time Scales: Part 2
Lecture 56 Source Code: Time Scales
Lecture 57 Sequential Scales
Lecture 58 Source Code: Sequential Scales
Lecture 59 Quantize Scales
Lecture 60 Quantile & Threshold Scales
Lecture 61 Source Code: Quantize, Quantile & Threshold Scales
Lecture 62 Ordinal Scales
Lecture 63 Source Code: Ordinal Scales
Section 6: Have an Axis for Reference (D3.js Axes)
Lecture 64 Add X and Y Axis
Lecture 65 Source Code: Add X and Y Axis
Lecture 66 Style the Axis as You Want - Part 1
Lecture 67 Style the Axis as You Want - Part 2 (Update to Part 1)
Lecture 68 Source Code: Style the Axis as You Want
Lecture 69 Hands-On: Display 4 Axes Based on User Input - Part 1
Lecture 70 Hands-On: Display 4 Axes Based on User Input - Part 2
Lecture 71 Hands-On: Display 4 Axes Based on User Input - Part 3 (Update Lecture)
Lecture 72 Source Code - Hands-On: Display 4 Axes Based on User Input
Lecture 73 Project 3: Vertical Bar Chart with Axes - Part 1
Lecture 74 Project 3: Vertical Bar Chart with Axes - Part 2 (Update to Part 1)
Lecture 75 Project 4: Scatterplot
Section 7: Draw Different Shapes (D3.js Shapes)
Lecture 76 Line Generator - Part 1
Lecture 77 Line Generator - Part 2
Lecture 78 Source Code: Line Generator
Lecture 79 Project 5: Line Chart - Part 1
Lecture 80 Project 5: Line Chart - Part 2 (Update to Part 1)
Lecture 81 Area Generator
Lecture 82 Source Code: Area Generator
Lecture 83 Project 6: Area Chart - Part 1
Lecture 84 Project 6: Area Chart - Part 2
Lecture 85 Stack Generator
Lecture 86 Source Code: Stack Generator
Lecture 87 Project 7: Stacked Area Chart - Part 1
Lecture 88 Project 7: Stacked Area Chart - Part 2
Lecture 89 Project 7: Stacked Area Chart - Part 3
Lecture 90 Arc Generator - Part 1
Lecture 91 Source Code: Arc Generator - Part 1
Lecture 92 Arc Generator - Part 2
Lecture 93 Source Code: Arc Generator - Part 2
Lecture 94 Arc Generator - Part 3
Lecture 95 Source Code: Arc Generator - Part 3
Lecture 96 Pie Generator
Lecture 97 Source Code: Pie Generator
Lecture 98 Symbol Generator
Lecture 99 Source Code: Symbol Generator
Lecture 100 Project 8: Pie Chart with Legend - Part 1
Lecture 101 Project 8: Pie Chart with Legend - Part 2
Section 8: Animate Your Visualizations (D3.js Transitions)
Lecture 102 Introduction to Transitions
Lecture 103 Source Code: Introduction to Transitions
Lecture 104 Control the Speed of Your Animations
Lecture 105 Source Code: Control the Speed of Your Animations
Lecture 106 Project 9: Animated Bar Chart
Lecture 107 Transition Chaining
Lecture 108 Source Code: Transition Chaining
Lecture 109 Tweening
Lecture 110 Source Code: Tweening
Lecture 111 Project 10: Moving Stars
Lecture 112 Project 11: Make Me Laugh - Part 1
Lecture 113 Project 11: Make Me Laugh - Part 2
Section 9: Make Your Visualizations Interactive (Dragging and Zooming)
Lecture 114 Interact using Mouse - Part 1
Lecture 115 Interact using Mouse - Part 2
Lecture 116 Source Code: Interact using Mouse
Lecture 117 Make Visualizations Draggable
Lecture 118 Source Code: Make Visualizations Draggable
Lecture 119 Zoom In and Zoom Out Visualization at Individual Level
Lecture 120 Source Code: Zoom In and Zoom Out Visualization at Individual Level
Lecture 121 Zoom In and Zoom Out Visualization as a Whole
Lecture 122 Source Code: Zoom In and Zoom Out Visualization as a Whole
Section 10: Deal with External Data in Different Formats
Lecture 123 How to Fetch and Process CSV Data?
Lecture 124 How to Fetch and Process JSON Data?
Lecture 125 How to Fetch and Process XML Data?
Section 11: Create More Advanced Visualisations (D3.js Layouts)
Lecture 126 Introduction to Tree Layout - Part 1
Lecture 127 Introduction to Tree Layout - Part 2
Lecture 128 Source Code: Introduction to Tree Layout
Lecture 129 Tree in a Different Direction
Lecture 130 Source Code: Tree in a Different Direction
Lecture 131 Project 12: Family Tree - Part 1
Lecture 132 Project 12: Family Tree - Part 2
Lecture 133 Solution to Name Conflict in Family Tree
Lecture 134 Source Code: Solution to Name Conflict in Family Tree
Lecture 135 Project 13: Classic Family Tree - Part 1
Lecture 136 Project 13: Classic Family Tree - Part 2
Lecture 137 Project 13: Classic Family Tree - Part 3
Lecture 138 Project 14: Tree with Images
Lecture 139 Project 15: Complete Family Tree
Lecture 140 Project 16: Zoomable Family Tree
Lecture 141 Project 17: Ancestry Chart - Part 1
Lecture 142 Project 17: Ancestry Chart - Part 2
Lecture 143 Project 17: Ancestry Chart - Part 3
Lecture 144 Project 17: Ancestry Chart - Part 4
Section 12: BONUS Section
Lecture 145 BONUS Lecture: Special OFFER on Our Other Course
Anyone who wants to perform data visualization,Anyone who wants to learn D3 library from scratch,Anyone who wants to explain data with charts and diagrams

Homepage

Code:

https://www.udemy.com/course/d3js-data-visualization-projects/

Search

Search

D3.Js In Action Build 17 D3.Js Data Visualization Projects

voska89

Moderator

Users who are viewing this thread