SVG and Interactive Visualization in D3
3.3 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
18 students enrolled
Wishlisted Wishlist

Please confirm that you want to add SVG and Interactive Visualization in D3 to your Wishlist.

Add to Wishlist

SVG and Interactive Visualization in D3

Create breathtaking data visualizations using the latest features of D3
3.3 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
18 students enrolled
Created by Packt Publishing
Last updated 7/2017
Curiosity Sale
Current price: $10 Original price: $125 Discount: 92% off
30-Day Money-Back Guarantee
  • 1.5 hours on-demand video
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn about Scalable Vector Graphic (SVG), a mature World Wide Web Consortium (W3C) standard widely used in visualization projects
  • Explore Charts and generate some of the most complex and interesting visualizations
  • Add steering capability to your visualization
  • Use force simulation to create awe-inspiring effects
  • Implement a fully functional geographic visualization in D3
  • Implement your visualization like a pro with Test-Driven Development (TDD)
View Curriculum
  • This course is designed to provide you with all the guidance you need to get to grips with data visualization with D3. With this course, you will create breathtaking data visualization with professional efficiency and precision with the help of practical illustrations, and code samples.

D3.js is a JavaScript library designed to display digital data in dynamic graphical form. It helps you bring data to life using HTML, SVG, and CSS. D3 allows greater control over the final visual result, and it is the hottest and most powerful web-based data visualization technology on the market today. In this course, you will learn how to map values in your data domain to the visual domain using scales, and use the various shape functions supported by D3 to create SVG shapes in visualizations. Moving on, you’ll see how to use and customize various D3 axes and master transition to add bells and whistles to otherwise dry visualizations.

About the Author 

Nick Zhu is a professional programmer and data engineer with more than a decade experience in software development, big data, and machine learning. Currently, he is one of the founders and CTO of Yroo - meta search engine for online shopping. He is also the creator of dc.js—a popular multidimensional charting library built on D3.

Who is the target audience?
  • If you are a developer or an analyst familiar with HTML, CSS, and JavaScript, and you wish to get the most out of D3, then this course is for you. This course can also serve as a quick-reference for experienced data visualization developers.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
33 Lectures
Getting into Shapes
10 Lectures 22:49

This video gives an overview of the entire course.

Preview 02:08

Learn the basic concept of SVG and D3's support forSVG shape generation.

What Is SVG?

Simple shapes are quite easy to generate and are usually created manually using D3. In this video, we will create four different shapes.
Creating Simple Shapes

D3 line generator is probably one of the most versatile generators. It is implemented using the svg: pathelement. In this video, we will draw multiple lines using the d3.svg.line generator.

Using a Line Generator

By default, the D3 line generator uses the linear curve mode.D3 supports a number of different curve factories. The curve function determines how data points will be connected.

Using a Line Curve

If Cardinal interpolation mode is used, then the line can be further modified using tension settings. This video shows how tension is modified and its effect on line interpolation.
Changing Line Tension

D3 also provides a separate shape generator function specifically designed for drawing area. In this video, we will add a filled area to a pseudo line chart.
Using an Area Generator

Area generator also supports identical interpolation mode,and hence, it can be used in combination with the line generator in every mode. In this video, we will show how interpolation mode is configured.

Using Area Curve

D3 also provides the arc generator. The D3 arc generator is capable of creating not only circles but also annulus (donut), circular sector, and annulus sector, all of which we will learn in this video.

Using an Arc Generator

One area where arc differs significantly from other shapes, such as line and area, is its transition. In this video, we will explore the arc transition technique.

Implementing Arc Transition
Chart Them Up
5 Lectures 14:24
Line chart is a common, basic chart type that is widely used in many fields. This chart consists of a series of data points connected by straight line segments. In this video, we will take a look at how this basic chart can be implemented using D3.
Preview 04:40

An area chart or an area graph is very similar to a line chart and largely implemented based on the line chart. Let’s explore techniques of implementing a type of area chart known as Layered Area Chart.
Creating an Area Chart

A scatterplot or scattergraph is another common type of diagram used to display data points on Cartesian coordinates with two different variables. In this video, we will learn how to implement a multi-series scatterplot chart in D3.

Creating a Scatter Plot Chart

A bubble chart is a typical visualization capable of displaying three data dimensions. Let’s take a look at ways of implementing a typical bubble chart using D3.
Creating a Bubble Chart

A bar chart is a visualization that uses either horizontal (row charts) or vertical (column charts) rectangular bars with length proportional to the values that they represent. In this video, we will implement a column chart using D3.
Creating a Bar Chart
Lay Them Out
5 Lectures 21:28
A pie chart is a circular graph that contains multiple sectors. In this video, we will implement a fully functional pie chart.
Preview 03:31

Stacked area chart is a variation of the standard area chart. In this video, we will build a stacked area chart.
Building a Stacked Area Chart

A treemap displays hierarchical tree-structured data. In this video, we will explore different hierarchical data visualization techniques.
Building a Treemap

Tree is an undirected graph in which two nodes are connected with one simple path. In this video, we will implement a tree visualization using a D3 tree layout.
Building a Tree

An enclosure diagram is a visualization that uses recursive circle packing algorithm. In this video, we will implement this visualization using the D3 pack layout.

Building an Enclosure Diagram
Interacting with Visualization
3 Lectures 10:07
The mouse is the most common and popular human-computer interaction control found on most desktop and laptop computers. In this video, we will learn how to handle standard mouse events in D3.
Preview 02:57

Zooming and panning are common and useful techniques in data visualization, which work particularly well with SVG-based visualization, since vector graphic does not suffer from pixilation as its bitmap counterpart. Let’s explore D3's built-in support for both zooming and panning.

Implementing Zoom and Pan Behavior

Another common behavior in interactive visualization that we will cover in this video is dragging. Drag is useful to provide capabilities in visualization that allow graphical rearrangement or even user input through force. Let’s see how the drag behavior is supported in D3
Implementing Drag Behavior
Using Force
5 Lectures 18:43

One objective of force layout's design is to loosely simulate the motion of particles, and one major feature of this simulation is the force of charge.In this video, we will introduce you to the first two fundamental forces: gravity and charge.

Preview 06:40

We have touched upon force simulation node object and its {x, y} attributes, which determine the location of a node on the layout. In this video, we will discuss another interesting aspect of physical motion simulation: velocity.
Customizing Velocity

So far, we have covered some important aspects of the force layout, such as gravity, charge, friction, and velocity. In this video, we will discuss another critical functionality: links.
Setting the Link Constraint

We learned to use force simulation visualizing particles and links similar to how you would use force in its classic application: the forced-directed graph. This kind of visualization is what force simulation was designed for in the first place. Let’s explore techniques,called force-assisted visualization

Using Force to Assist Visualization

Finally, we will see how to implement a force-directed graph, the classic application of D3 force. However, we believe with all the techniques and knowledge you have gained so far from this section, implementing force-directed graph should feel quite straightforward.

Building a Force-Directed Graph
Knowing Your Map
3 Lectures 08:10
In this video, we are going to start with projecting the US map using D3 GEO API, while also getting familiar with a few different JSON data formats for describing geographic data.
Preview 03:39

What if our visualization project is not just about US, but rather concerns the whole world? No worries, D3 comes with various built-in projection modes that work well with the world map that we will explore in this video.
Projecting the World Map

Choropleth map is a thematic map, in other words, a specially designed map not a general purpose one, which is designed to show measurement of statistical variable on the map using different color, shades, or patterns. Let’s explore this feature in geo-projection and implement a Choropleth map in this video.
Building a Choropleth Map
Test Drive Your Visualization
2 Lectures 06:58

Before we start writing our unit test cases, we need to set up an environment where our test cases can be executed to verify our implementation. In this video, we will show how this environment and necessary libraries can be set up for a visualization project.

Preview 02:17

With test environment ready, we can move on and develop a simple bar chart in a test-driven fashion. Let’s see the basic skeleton of our bar chart object and generate the svg:svg element and bars.
Chart Creation, SVG Rendering,and Pixel-Perfect Bar Rendering
About the Instructor
Packt Publishing
3.9 Average rating
7,297 Reviews
52,231 Students
616 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.