Data Visualization With D3.Js: Step-By-Step Tutorial

Leverage the power of D3.js to create beautiful and stunning illustrations of data

What you'll learn

Learn how D3 .js works to declaratively define visualizations

Create charts from scratch by using SVG and the D3 .js APIs

See how to prepare data for easy visualization using D3 .js

Visualize hierarchical data using chart types provided by D3 .js

Explore the different options provided by D3 .js to visualize linked data such as graphs

Spice up your visualizations by adding interactivity and animations

Learn how to use D3 .js to visualize and interact with Geo- and Gis-related information sources

Create visualization by streaming data over WebSockets

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. D3.js, where D3 stands for data-driven documents, is an amazing JavaScript library which is known among data analysts, engineers, mathematicians, and developers worldwide as an advanced data visualization tool. Its ability to bring data to life in the form of graphics is what has made it so widespread in its use, scope, and popularity. 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 V4. This course includes a number of extensive examples to help you hone your skills with data visualization using D3.js. Throughout the course these examples will help you acquire a clear practical understanding of the various techniques, tools, and functionality provided by D3.js. You will first setup your D3.js development environment and learn the basic patterns needed to visualize your data. You will then learn techniques to optimize different processes such as working with selections, animating data transitions, creating graphs and charts, integrating external resources (static as well as streaming),  visualizing information on maps, working with colors and scales, utilizing the different D3.js APIs, and more. This course will also guide you through creating custom graphs and visualizations, and show you how to go from the raw data to beautiful visualizations. The extensive examples will include working with complex and real time data streams, such as seismic data, geospatial data, scientific data, and more. Finally, you will build five unique data visualization projects to get a complete hold of the topic.Contents and OverviewThis training program includes 3 complete courses, carefully chosen to give you the most comprehensive training possible. The first course, Creating Data Visualization with D3, will help you acquire a clear practical understanding of the various techniques, tools and functionality provided by D3.js. You will first setup your D3.JS development environment and learn the basic patterns needed to visualize your data. After that you will learn techniques to optimize different processes such animating data transitions, creating charts, and much more. You will also learn how to create custom graphs and visualizations, and how to go from the raw data to beautiful visualizations.In the second course, Applied Data Visualization with D3, you will learn techniques to optimize different processes such as animating data transitions, creating graphs and charts, integrating external resources (static as well as streaming), visualizing information on maps, working with colors and scales, utilizing the different D3.js APIs, and more. The extensive examples will include working with complex and real time data streams. You will also learn to add custom shapes and paths using various D3 functionality. In the third course, D3.js Data Visualization Projects, you will build two complete applications with D3.js. While you create apps from scratch, you will learn to implement the various features of D3.js. The projects start with a simple chart app, then move on to creating scalable data-intensive apps, typically dedicated to the big data domain. You will also create a complex business app that lets you feed your data and create interactive real time visualizations with various export options. By the end of this course, you will have developed a strong foundation in 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:Jos Dirksen has worked as a software developer and architect for more than a decade. He has a lot of experience in a large range of technologies, ranging from backend technologies, such as Java and Scala, to frontend development using HTML5, CSS, and JavaScript. Besides working with these technologies, Jos also regularly speaks at conferences and likes to write about new and interesting technologies on his blog. He also likes to experiment with new technologies and see how they can best be used to create beautiful data visualizations. Jos is currently working as a full stack engineer for Philips Lighting working, on a large IoT and Scala project. Previously, Jos has worked in many different roles in the private and public sectors, ranging from private companies such as ING, ASML, Malmberg, and ASML to organizations in the public sector, such as the Department of Defence.Michael Heydt is an independent consultant, programmer, educator, and trainer. He has a passion for learning and sharing his knowledge of new technologies. Michael has worked in multiple industry verticals, including media, finance, energy, and healthcare. Over the last decade, he worked extensively with web, cloud, and mobile technologies and managed user experiences, interface design, and data visualization for major consulting firms and their clients. Michael's current company, Seamless Thingies , focuses on IoT development and connecting everything with everything. He is also a frequent speaker at .NET user groups and various mobile, cloud, and IoT conferences and delivers webinars on advanced technologies.

Overview

Section 1: Creating Data Visualization with D3

Lecture 1 The Course Overview

Lecture 2 What Is D3?

Lecture 3 Setting Up the Local Web Server

Lecture 4 Basic HTML Template

Lecture 5 How Does D3 Work?

Lecture 6 Visualizing Our First Data

Lecture 7 Visualizing with Donut Chart

Lecture 8 Line Charts That Show Income Growth

Lecture 9 Population Growth Estimates Using a Stacked Graph

Lecture 10 Normal Tree Visualization

Lecture 11 Radial Tree Visualization

Lecture 12 Treemap and Partition

Lecture 13 Elections 2016 Choropleth

Lecture 14 Earthquake Data on a Flat Map

Lecture 15 Rotating the World Globe

Lecture 16 Using D3 with ES6

Lecture 17 External Charting Libraries

Section 2: Applied Data Visualization with D3

Lecture 18 The Course Overview

Lecture 19 Force Layout

Lecture 20 Bubble Chart

Lecture 21 Chord Diagram

Lecture 22 Matrix Diagram

Lecture 23 Simple Streaming Line

Lecture 24 Heart Rate and Respiratory Monitoring

Lecture 25 Creating the Visualization

Lecture 26 Random Data-Driven Streamgraph

Lecture 27 Visualizing Meetup.com RSVP Data on a Map

Lecture 28 Simple Voronoi Diagram

Lecture 29 Voronoi Based on a List of Airports

Lecture 30 Generative Art with Nested Voronoi Diagrams

Lecture 31 Heatmap Showing Swearword Usage in Movies

Lecture 32 Symbols Supported in D3

Lecture 33 Using d3.path to Draw Paths

Lecture 34 Exporting Visualizations

Lecture 35 Exporting Visualizations as SVG and Importing Them in an External Program

Lecture 36 Using Brushes to Select Elements

Section 3: D3.js Data Visualization Projects

Lecture 37 The Course Overview

Lecture 38 Getting the Code Samples

Lecture 39 Installing VS Code

Lecture 40 Installing Live Server

Lecture 41 Developing a Simple D3.js App

Lecture 42 Overview of the Data

Lecture 43 Loading the Data from a Web Server

Lecture 44 Examining the Data in the Browser

Lecture 45 Creating SVG Graphics

Lecture 46 Creating Visuals with Data

Lecture 47 Visual Styling Using Data

Lecture 48 Overview of Scales

Lecture 49 Using Linear Scales

Lecture 50 Using Scales for Color

Lecture 51 Drawing Axes

Lecture 52 Positioning for Axes

Lecture 53 Styling Axes

Lecture 54 Axes’ Titles

Lecture 55 Custom Tick Labels

Lecture 56 Legends

Lecture 57 Gridlines

Lecture 58 Selecting Data for a Given Year

Lecture 59 Creating a Reusable Renderer

Lecture 60 Basic Animation with Timers

Lecture 61 The General Update Pattern

Lecture 62 Applying GUP

Lecture 63 Navigation Using Buttons

Lecture 64 Navigation Using Slider

Lecture 65 Basics of Transitions

Lecture 66 Animating New Visuals

Lecture 67 Animating Updates

Lecture 68 Animating Exiting Updates

Lecture 69 Capturing Mouse Events

Lecture 70 Creating Tool Tips

Lecture 71 Highlighting a Visual

Lecture 72 Displaying Details

This course is for JavaScript developers, designers, and visual artists who have some basic JavaScript programming knowledge and who now want to master pro-level techniques to create interactive data visualizations using web standards which work on desktop as well as mobile devices.