Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 10.5 hours on-demand video
  • 2 articles
  • Full lifetime access
  • Access on mobile and TV
Development Web Development D3.js

Build Data Visualizations with D3.js & Firebase

Learn how to use D3 (v5) & Firebase (Firestore) to create dynamic SVG data visualizations. Bar charts, pie charts...
Highest Rated
Rating: 4.7 out of 54.7 (1,208 ratings)
14,279 students
Created by The Net Ninja (Shaun Pelling)
Last updated 12/2020
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • Learn D3 JS & Firebase (Firestore) from the ground up
  • Create data-driven visualizations (graphs, charts, diagrams) with D3 JS
  • Store (and retrieve) data in a real-time database called Firestore (from Firebase)
  • Updata data visualizations in real-time with Firestore
  • Create 3 projects with D3 and Firebase (Firestore)
Curated for the Udemy for Business collection

Course content

15 sections • 107 lectures • 10h 21m total length

  • Preview03:23
  • Preview03:13
  • Text Editor & Packages
    02:26
  • Course Files
    00:46
  • Preview00:46

  • What are SVG's?
    03:47
  • Simple SVG Shapes
    07:25
  • SVG Paths
    10:23
  • Setting up D3.js
    01:46
  • Selecting Elements
    04:09
  • Appending Elements
    03:19
  • Method Chaining & Attributes
    06:40
  • Text SVG's
    02:46
  • Groups
    04:06
  • Section Summary
    00:59

  • Joining Data to an Element
    09:16
  • Using Arrow Functions
    05:34
  • Joining Data to Multiple Elements
    04:54
  • The Enter Selection
    07:40
  • External Data ( JSON )
    08:44

  • Why We Need Linear Scales
    04:17
  • Creating a Linear Scale
    09:30
  • Band Scales
    10:37
  • Min, Max & Extent
    05:54
  • Creating a Bar Chart ( Groups & Margins )
    11:09
  • Creating a Bar Chart ( Axes )
    06:23
  • Inverting Scales
    07:16
  • Tick Formatting
    06:01

  • What is a Firestore Database?
    03:01
  • Creating a Firestore Database
    04:11
  • Setting up the Firebase Config
    03:31
  • Getting Data from Firestore
    05:49

  • Updating Visualizations
    01:48
  • Enter & Exit Groups
    06:59
  • The Update Pattern at a Glance
    05:13
  • Creating an Update Function
    10:18
  • D3 Interval Function
    06:15
  • The Exit Selection
    03:40
  • Firestore Realtime Data Updates
    06:10
  • Updating Our Data
    12:22

  • D3 Transitions Introduction
    01:12
  • Enter Transitions
    06:36
  • Update Transitions
    03:50
  • Merge and Refactor
    04:16
  • Tweens and Interpolation
    10:13

  • Preview03:57
  • HTML Template & Matetrialize
    13:13
  • Firestore Setup
    04:03
  • Adding Data to Firestore
    11:15
  • Pie Charts & Arcs
    03:46
  • Setting up a Pie Chart
    11:21
  • Arc Path Generator
    05:44
  • Realtime Data Setup
    06:53
  • Drawing the Enter Selection
    06:33
  • Ordinal Scales
    07:25
  • Project Challenge
    02:01
  • Project Solution
    03:48
  • Arc Enter Tween
    09:57
  • Arc Exit Tween
    02:38
  • Arc Update Tween
    14:17
  • Legends
    07:27

  • Interactive D3 Visuals
    01:41
  • Event Listeners
    01:52
  • Mouseover Events
    07:23
  • Named Transitions (bug fix)
    02:13
  • Click Events
    04:35
  • Tooltips
    11:25

  • Preview02:25
  • HTML Template Setup
    10:05
  • Adding DOM Events
    09:06
  • Adding Data to Firestore
    07:55
  • Realtime Data Setup
    08:33
  • Graph Setup & Margins
    06:11
  • Time Scales & Axes Groups
    07:34
  • Domains & Axes
    06:06
  • Formatting Times & Axes
    06:34
  • Enter & Exit Selections
    07:25
  • Adding Dummy Data
    03:19
  • Filtering Data
    05:07
  • Line Path Generator
    09:11
  • Data Point Hover Effect
    03:56
  • Project Challenge (SVG Lines)
    03:15
  • Challenge Solution
    07:14
  • Project Summary
    01:15

Requirements

  • A basic to moderate level of JavaScript
  • A basic to moderate level of HTML
  • A basic to moderate level of CSS

Description

Learn how to create great-looking data visualizations with D3.js

D3.js is a powerful JavaScript library used to create data visualizations easily. In this course I'll teach you how to harness the power of D3 to create a variety of different data-driven visualizations such as bar charts, pie charts, line graphs,  bubble packs and tree diagrams.

We'll learn about D3 select, changing SVG attributes & styles, scales, axes, transitions, hierarchial data and much more...

Use Firebase Firestore to update your D3.js diagrams in real-time

I'll also teach you how to use Firestore (from Google Firebase) - a real-time NoSQL database in which we can store our data. We'll use this to power our D3.js visualizations in real-time (without updating the browser) and to make them interactive, fun & dynamic.

We'll also be creating 3 projects to put our D3 & Firebase skills to the test - first of all a money planner called Ninja Wonga, then a fitness tracker called The Dojo and finally a company employee tree diagram called Ninja Corp.

...Why all the ninjas?

I'm also known as the Net Ninja on YouTube, with over 200,000 subscribers and nearly 1000 free development tutorials. Feel free to check out my teaching style there before you a buy my course :).


Who this course is for:

  • Developers wanting to build data-driven UI diagrams with JavaScript
  • Developers wanting to learn d3 and firebase
  • Developers wanting to learn about data visualization
  • Developers wanting to create SVG diagrams with d3
  • Developers wanting to use firebase to drive their d3 diagrams

Featured review

Koray Dündar
Koray Dündar
25 courses
6 reviews
Rating: 5.0 out of 510 months ago
I enjoyed every single second of this course! The net ninja explains everything very clearly and his projects are really fun! During the course I asked 6-7 questions and all of them were answered within very short time! I highly recommend this course whoever is interested in data visualisation! Thanks !

Instructor

The Net Ninja (Shaun Pelling)
Online Coding Tutor & Net Ninja
The Net Ninja (Shaun Pelling)
  • 4.8 Instructor Rating
  • 11,006 Reviews
  • 43,504 Students
  • 3 Courses

A Little About Me...

Hey gang, my name's Shaun and since a young age I've had an obsession for nearly anything tech-related. I've been coding since about the age of 15 (half of my life, now...phew!) and work as a full-stack web developer and online instructor.

I also run a well-known development tutorial YouTube channel called The Net Ninja with nearly 500,000 subscribers. So feel free to browse some of my latest free tutorials on there if you want to check out my teaching style :).

My specialities mainly gravitate around one central language (and my first love) - JavaScript. I've been programming with it for around 12 years and - as with any long-term relationship - have had the pleasure of seeing it's ugly side as well as it's beautiful side. So I know the pitfalls to avoid when using it, and pass these on when appropriate in my tutorials.

As well as teaching, I've also helped to create many very popular, UK-based eCommerce websites, as well as a large amount of smaller, independent websites as well.

Other languages & technologies I use and teach are - Node.js, Vue, React, Python, Ruby, PHP, HTML & CSS.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.