Mastering data visualization in D3.js from Udemy

Welcome to Mastering data visualization in D3.js.

This course will take you from a beginner level in D3 to the point where you can build virtually any visualization that you can imagine. The course will teach you to program in the latest version of D3 - version 6.x.

Course Outline

In the first phase of the course, I will be building up your knowledge of D3 and introducing you to some of the most foundational topics in data visualization. You will:

Understand what SVGs are and how to they work with D3.
Discover how D3 associates shapes with pieces of data.
Write scales, axes, and labels to make some basic visualizations.
Use the D3 update pattern to shift the position of SVGs as our data changes.
Handle user interactions by adding events to the page.
Add legends, tooltips, and sliders to your visualizations.

The course will also focus on data visualization design, helping you to make better decisions about how to structure your code, and teaching you to justify the decisions that you make to others. You will learn how to select the right visual channels for the data that you're working with to create completely unique visualizations.

In the second phase of the course, I will be taking you on a crash course through 12 new visualizations. You will gain a wide breadth of knowledge in D3, as I will be walking you through pre-written code from members of the D3 community. I'll introduce you to D3 layouts, and I will be showing you how to build each of these visualizations in D3:

Line Charts
Area Charts
Stacked Area Charts
Pie Charts
Donut Charts
Wordclouds
Choropleth Maps
Node-Link Diagrams
Tree Diagrams
Treemaps
Circle Packs
Sunburst Plots

This part of the course will also teach you the skill of finding new visualizations by yourself, adapting open source code to fit with your own data.

In the final phase of the course, I will be showing you the proper file structure to use for managing multiple visualizations on the page at once. You will be able to create visualizations that can communicate with one another, allowing you to link user interactions between multiple different graphs. You'll also learn how to use brushes in D3 to select areas on the chart with the drag of a mouse.

Class Projects

The course will include 4 class projects for you to complete, which will give you the opportunity to practice your D3 skills with real data:

A simple bar chart to display the revenue growth of a small coffee chain.
An updating bubble chart, cloning a famous visualization from Gapminder.
An interactive line chart, showing historical cryptocurrency prices over time.
A data dashboard for a large conglomerate company.

Each of the projects will gradually become more complex as the course progresses.

Should I Take This Course?

D3 is an incredibly powerful library to use, with a strong community of developers which is growing every day. Students should take this class if they want to get a rigorous introduction to D3, which covers a wide range of different topics.

This course is not an introductory course to web development. Students are expected to have had experience coding in JavaScript

What's inside

Learning objectives

Understand the fundamental building blocks of d3
Gain a wide breadth of knowledge, learning how to create 14 different visualizations
Critique existing visualizations and invent better designs for displaying data
Interpret open source code from the d3 community for use in your own projects

Master advanced tools in d3, building choropleth maps, brushes, tooltips, and layouts
Develop substantial web apps, with multiple visualizations on the page at once
Articulate original abstract ideas with compelling sketches

Understand the fundamental building blocks of d3
Gain a wide breadth of knowledge, learning how to create 14 different visualizations
Critique existing visualizations and invent better designs for displaying data
Interpret open source code from the d3 community for use in your own projects
Master advanced tools in d3, building choropleth maps, brushes, tooltips, and layouts
Develop substantial web apps, with multiple visualizations on the page at once
Articulate original abstract ideas with compelling sketches

Syllabus

Find out why you should learn data visualization with D3

Introduction to the course

What is a data visualization?

Activity: Your favorite visualization

The power of D3

How this course is structured

Section Summary

Course GitHub Repository

Set up your D3 environment. Learn what SVGs are, and how they are used by D3. Make your first steps into programming with D3.

Introduction - Getting started with D3

Setting up your environment

Understanding SVGs

Adding SVGs with D3

Activity: Adding SVGs to the screen

Selections and data joins

Loading external data

Activity: Your first visualization!

Understand how to use scales and axes in D3. Learn to build a bar chart.

Introduction - Scales and Axes

Linear Scales

Logarithmic Scales

Time Scales

Ordinal Scales

Band Scales

D3 min, max, and extent

Test your knowledge at working with scales in D3.

Margins and groups

Axes and labels

Making a bar chart

Project 1: StarBreak Coffee

Activity: Project 1

The basics of design

Introduction - The basics of design

Designing for clarity

Subjectivity in design

Activity: Critiquing visualizations

The design toolkit

An introduction to sketching

Activity: Making sketches

The Bootstrap grid system

Update a visualization with changing data. Understand the D3 update pattern. Learn to create a scatter plot. Make a bubble chart.

Introduction - Make it dynamic

Looping with intervals

Adding an update function

The D3 update pattern

Test your knowledge of what you've learned so far about the D3 update pattern.

Making our chart dynamic

D3 Transitions

Scatter plots in D3

Project 2: Gapminder Clone

Activity: Project 2

Explore tools to make visualizations interactive for the user. Bind SVGs to events. Create an interactive line chart.

Introduction - Make it interactive

Adding a legend

Formatting and parsing in D3

Introducing Tooltips

Event listeners and handlers in D3

Adding a jQuery UI slider

Line graphs in D3

Project 3: CoinStats

Activity: Project 3

A crash course in some of the most often-used visualizations in D3. Introduction to layouts. Practice at appropriating other peoples' code.

Introduction - Frequently used visualizations

Using the D3 community

Migrating code to version 5.x

D3 Layouts

Area Charts

Stacked Area Charts

Data structures and D3 nests

Pie and donut charts

Wordclouds

Test your knowledge of how layouts work in D3 to help us build visualizations.

Learn how to render maps with D3. Know how to use D3 forces in different visualizations.

Introduction - Maps and Networks

Visualization around the globe

Loading multiple datasets with D3

Choropleth Maps

Forces in D3

Node-Link Diagrams

Test out what you learned in this lecture about visualizing maps and networks.

Understand how to use D3 to express hierarchical data.

Introduction - Hierarchical Data

Building hierarchies in D3

Tree Diagrams

Treemaps

Circle Packing

Sunburst Plots

Activity: Find your own visualization

Understand how to structure a complex page with multiple visualizations. Create a fully-fledged data dashboard.

Introduction - File structure and linked views

File Separation

Visualizations as Objects

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Explores data visualization techniques, which are used by UX professionals

Teaches version 6.x of D3.js, a widely-used library

Uses D3.js for real-world visualizations

Develops skills in data visualization design

Covers infrequently taught visualizations, such as choropleth maps and treemaps

Builds a foundation for advanced visualization techniques

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Mastering data visualization in D3.js with these activities:

Data Visualization Sketching

Show steps

Sketching data visualizations helps develop your design thinking and allows you to experiment with different visual representations before coding.

Browse courses on Visualization Design

Show steps

Gather data and understand its key features
Sketch out multiple visualization options, exploring various chart types and layouts
Consider the aesthetics, color schemes, and typography to enhance the visual appeal
Present your sketches and receive feedback to refine your design choices

D3 Study Group

Show steps

Joining a study group allows you to engage with peers, discuss concepts, and work collaboratively on projects, fostering a deeper understanding of D3.

Show steps

Form a study group with other students enrolled in the course
Meet regularly to review materials, solve problems, and share insights
Work together on assignments or projects to gain practical experience and learn from each other's perspectives

Interactive Data Visualization Exercises

Show steps

Engaging in practice exercises will reinforce your understanding of D3 concepts and provide hands-on experience in creating interactive data visualizations.

Browse courses on Interactive Data Visualization

Show steps

Find online exercises or create your own dataset to practice with
Use D3 to create visualizations that respond to user interactions, such as zooming, panning, or filtering
Experiment with different visualization techniques and explore how they enhance user engagement

One other activity

Expand to see all activities and additional details

Show all four activities

Interactive Data Visualization Dashboard

Show steps

Creating an interactive data visualization dashboard will challenge you to apply all the concepts learned in the course and showcase your ability to communicate data effectively.

Browse courses on Interactive Visualization

Show steps

Gather and prepare a dataset that aligns with your interests or a specific domain
Design and implement multiple visualizations using D3 to represent different aspects of your data
Make the dashboard interactive, allowing users to filter, sort, and explore the data in meaningful ways
Present your dashboard to others, explaining your design choices and the insights derived from the data

Career center

Learners who complete Mastering data visualization in D3.js will develop knowledge and skills that may be useful to these careers:

Data Analyst

Data Analysts transform raw data into insights that can be used to make informed decisions. As such, they often need to create visualizations to communicate their findings. This course may, therefore, be useful in helping you to create visually appealing and informative charts and graphs using D3, which is a popular JavaScript library for data visualization.

See salaries and explore the career path for Data Analyst

Statistician

Statisticians play a crucial role in analyzing data of all types, and data visualization is a key component in communicating this analysis to stakeholders. This course may be helpful to you as you progress in this field as it will augment you with the skills needed to engage with data in a visual way. Moreover, this course will help optimize your visualizations by adding features that cater to things such as accessibility, responsiveness, and interactivity.

See salaries and explore the career path for Statistician

User Experience Researcher

User Experience Researchers analyze how people interact with products and services, which often requires the use of charts and other graphics. As such, this course may be helpful because it teaches how to create engaging and informative visualizations that can be used to communicate research findings and insights. Specifically, this course can help you build a foundation in D3, which is a popular JavaScript library used for data visualization.

See salaries and explore the career path for User Experience Researcher

Data Visualization Engineer

As a Data Visualization Engineer, it is absolutely essential that you can design and develop visual representations of data. Moreover, you must be skilled in presenting these visualizations in an accessible yet impactful way. This course, therefore, may be of help in your career if you seek to gain a comprehensive grounding in D3, which is a popular JavaScript library that is used for producing data visualizations.

See salaries and explore the career path for Data Visualization Engineer

Data Scientist

Data Scientists use scientific methods, processes, algorithms, and systems to extract knowledge and insights from data in various forms, both structured and unstructured. Since data visualization is an essential part of communicating insights, this course may be helpful to you as it will teach you how to create interactive and visually appealing visualizations using D3, a popular JavaScript library for data visualization.

See salaries and explore the career path for Data Scientist

Software Engineer

Software Engineers design, build, and maintain software applications. In this role, being able to visualize data can be very useful for debugging, performance profiling, and other tasks. This course may, therefore, be helpful in providing you with the skills needed to create clear and concise visualizations using D3, which is a popular JavaScript library for data visualization.

See salaries and explore the career path for Software Engineer

Web Developer

Web Developers design and build websites. Often times, these websites feature data visualizations. Therefore, this course may be helpful to you as it will teach you how to create interactive and visually appealing visualizations using D3, which is a popular JavaScript library for data visualization.

See salaries and explore the career path for Web Developer

Graphic designer

Graphic Designers create visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. As such, data visualization is a key skill for Graphic Designers, and this course may be helpful in providing you with the skills needed to create clear and concise visualizations using D3, which is a popular JavaScript library for data visualization.

See salaries and explore the career path for Graphic designer

Product Manager

Product Managers are responsible for the planning, development, and launch of new products. As such, they often need to be able to visualize data in order to make informed decisions. This course may, therefore, be helpful in providing you with the skills needed to create clear and concise visualizations using D3, which is a popular JavaScript library for data visualization.

See salaries and explore the career path for Product Manager

Business Analyst

Business Analysts analyze an organization's business processes and make recommendations for improvements. Data visualization is often used to communicate these recommendations, and this course can help you create clear and concise visualizations using D3, a popular JavaScript library for data visualization.

See salaries and explore the career path for Business Analyst

Information Architect

Information Architects design and organize the structure and content of websites and applications. As such, they often need to be able to visualize data in order to create information architectures that are both usable and efficient. This course may, therefore, be helpful in providing you with the skills needed to create clear and concise visualizations using D3, which is a popular JavaScript library for data visualization.

See salaries and explore the career path for Information Architect

Financial Analyst

Financial Analysts use data to make investment recommendations. As such, they often need to be able to visualize data in order to make informed decisions. This course may, therefore, be helpful in providing you with the skills needed to create clear and concise visualizations using D3, which is a popular JavaScript library for data visualization.

See salaries and explore the career path for Financial Analyst

Data Journalist

Data Journalists use data to tell stories. As such, they often need to be able to visualize data in order to make their stories more engaging and informative. This course may, therefore, be helpful in providing you with the skills needed to create clear and concise visualizations using D3, which is a popular JavaScript library for data visualization.

See salaries and explore the career path for Data Journalist

User Interface Designer

User Interface Designers design the look and feel of websites and applications. As such, they often need to be able to visualize data in order to create user interfaces that are both visually appealing and easy to use. This course may, therefore, be helpful in providing you with the skills needed to create clear and concise visualizations using D3, which is a popular JavaScript library for data visualization.

See salaries and explore the career path for User Interface Designer

Marketing Analyst

Marketing Analysts collect, analyze, and interpret data to develop marketing strategies. As such, they often need to be able to visualize data in order to make informed decisions. This course may, therefore, be helpful in providing you with the skills needed to create clear and concise visualizations using D3, which is a popular JavaScript library for data visualization.

See salaries and explore the career path for Marketing Analyst