Course info

Rating

(616)

Level

Intermediate

Updated

Apr 23, 2014

Duration

4h 35m

Description

This course teaches you how to use D3.js (data-driven documents) specifically version 3 to make stunning data visualizations. You will learn all of the core concepts of D3.js version 3, as well as go through functional examples of building data visualizations and business dashboards. Watch this course to get up to speed quickly using D3.js version 3 and start seeing what your data has been trying to tell you. This is a beginner course, but it is assumed you are familiar with the basics of HTML, CSS, and JavaScript.

About the author

I work as a feedback mechanism for organizations and teams to help them understand what’s going on with their products and processes. I do this by collecting and organizing their data, visually exploring it, enriching it with other data and metrics, then presenting my findings using creative information design techniques. This leads to improved business performance and often sparks a data-driven culture throughout my clients organizations.

Section Introduction Transcripts

The BasicsHi, this is Ben Sullins and welcome to D3. js Data Visualization Fundamentals. D3 is a JavaScript library that is exploding on the web right now as the most powerful and stunning way to build data visualizations, and in this course, I want to start by talking about the basics of D3. We'll get into some charting, we'll look at how to work with our data and that's to say work with our data using JavaScript. We'll look at how to enhance our visualization once we have some basic stuff and we have some data to power it, then we'll get into mapping and all the cool things you can do with maps, and lastly, we'll pull it all together taking everything that we have learned from this course to create stunning visualizations. First, in this module, we're going to talk about D3 origins and where did come from and what is it. We'll look at SVG objects, what are they and how do they relate to D3. We'll take a look at actually drawing some shapes using SVG and D3, just the basics of how to actually put something on an HTML. Then we'll take a look at the principles behind how that works. Lastly, we'll bring in some data and we'll actually draw some stuff. So it's going to be very hands on and very foundational in this first module. Let's get started.

Basic ChartingHi this is Ben Sullins and welcome to this module Basic Charting using D3js. This is the second module in our course and in this one, we're going to look at basic charting. We're going to start with building a bar chart. Now we built a bar chart in the previous module, so we'll continue from there and we'll revisit that example, so if you didn't catch all that you won't be left out. Then we'll look at coloring the bar chart. How do we actually use data to change the color of the bars? We'll talk about adding labels and how do we do that? Then we'll get building a line chart. Line charts are a bit different than bars in how the shapes are rendered and how we place them on the page and then we'll look at a scatter plot. Scatter plots are a real great way of comparing multiple measures, profit versus sales for example and seeing how things cluster together and where the outliers might be.

Working with Data Part 1 - External Data SourcesHi, this is Ben Sullins and welcome to this module on working with your data, this is a two part module and the first part we're going to look at external data sources. Checking in on the course, we're right about midway where we talk about working with actual data getting into the very practical uses of D3. To start we're going to look at external data sources, just the overview of it and what the different types are. Then we'll look at CSV data actually doing demos of working with this, and then we'll move onto JSON data. CSV and JSON are probably the two most common formats you're going to come across when you deal with data in JavaScript and so I wanted to cover those in depth and then in the second part of this module we're going to go into calling APIs, Application Programming Interface to get real live data from the web. Let's get started.

Working with Data Part 2 - Getting Data from Web APIsHi, this is Ben Sullins with Pluralsight and welcome to the second part on this module of Working with your Data in D3. In this part of the module, we're going to look at getting data from a web API. We're smack dab in the middle of the course and the real tactical part of actually pulling the data into D3 and doing something with it so we can then visualize it. We're going to start by looking at a web API overview. I'm just going to give you a 50, 000 foot view of what web APIs and how you can interact with them and some of the ones that are out there on the web. We'll take a look at calling the web API for data and actually retrieving that and visualizing it. I'll look at decoding data a lot of times when you transfer data over the web it gets encoded and we have to look at how to decode that all using JavaScript and then I'll share some of the public data APIs that are out there for reference. Let's get started.

Enhancing Your Viz Part 1 - Scales and AxisHi, this is Ben Sullins and welcome to this module on Enhancing Your Visualizations using D3. This is a two-part module and the first part we're going to talk about scale and axes. We're trucking along here getting towards the second half of the course and this is where we're going to really try to fine tune our visualizations and make them presentable to our end users. First we're going to talk about scaling. What are we talking about when we say scaling and what does that mean in D3? We'll actually go into an example of it. We'll talk about adding axes and referencing those in D3 and how we create them, and then we'll going to through a functional example of actually doing it. Let's get started.

Enhancing Your Viz Part 2 - InteractivityHi this is Ben Sullins with Pluralsight and welcome to the second part of this module on Enhancing Your Visualizations using D3 on interactivity. We're getting towards the end of our middle section here on Enhancing your visualization a and we're going to start by looking at adding a filter. We'll look at how to animate things, animations usually detract from visualizations, but in some cases when we're adding a filter or changing the data it's really important to make that smooth and feel natural to our uses so that way the overall experience is positive and lastly we'll look at adding some tooltips, ways that users can hover over things and see some more detials. Let's get started.

MappingHi. This is Ben Sullins with Pluralsight, and welcome to this module on Mapping using D3. js. We're heading in the home stretch here, and we're getting into some really fun stuff where we can draw maps using all kinds of interesting new stuff built into D3. We'll take a look at the first part of that, which is called GeoJSON. Then we'll get into some demos actually drawing maps, show you how to add color to the map or what's also know as a choropleth, and we'll talk about adding points as in cities on states. Let's get started.