Force Layout Graphs in D3

This quick and informative course packed with hands-on demos using D3.js and SVG will teach you everything you need to know to visualize data with modern force layout graphs.
Course info
Level
Beginner
Updated
Aug 13, 2019
Duration
2h 16m
Table of contents
Description
Course info
Level
Beginner
Updated
Aug 13, 2019
Duration
2h 16m
Description

In this course, Force Layout Graphs in D3, you’ll gain the ability to visualize data from scratch using D3 and SVG. First, you’ll learn how to construct a force layout graph with Node.js, CSS and D3. Next, you’ll learn how to encode data into the graph by adding and styling shapes or images for each data point, and adding styled lines between them. Finally, you’ll explore how to customize the look of force layout graphs by tweaking the variables of gravity, charge, distance and strength. When you’re finished this course, you’ll have the skills and knowledge of D3.js needed to independently graph data in at least one format and facilitate executive conclusions about data. Software required: Text editor (WebStorm or Sublime recommended), Node.js (optional).

About the author
About the author

Daniel Stern is a freelance web developer from Toronto, Ontario who specializes in Angular, ES6, TypeScript and React. His work has been featured in CSS Weekly, JavaScript Weekly and at Full Stack Conf in England.

More from the author
Vue.js: Big Picture
Beginner
1h 7m
Aug 31, 2018
More courses by Daniel Stern
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello, my name is Daniel Stern, and welcome to my course Force Layout Graphs with D3. I'm a freelance developer focused on open source libraries. D3.js is the most popular data library in JavaScript with roughly 100, 000 stars in GitHub. This course is both a quick introduction to D3 and a deep dive into how to use just one of D3's countless features, namely making force layout graphs. Some of the major topics we will cover in this course include setting up a D3 application with node, displaying complex data as a force layout graph with D3, styling each component of a force layout graph to encode some kind of important information, and working with the variables gravity, charge, distance, and more to customize how our graph looks. By the end of this course, you'll know the basics of data visualization in D3 and be able to use force layout graphs to discover important insights about data. From here, continue your learning by diving into more advanced D3 courses on graphing data with bars, lines, and more, or creating map-based graphs using D3 and GeoJSON. It's going to be a great course, I hope you join us.