Rapid D3 JS
3.8 (13 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.
242 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Rapid D3 JS to your Wishlist.

Add to Wishlist

Rapid D3 JS

Conjure up some mind-boggling dynamic visualizations with the flick of a mouse and a bit of code using D3JS
3.8 (13 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.
242 students enrolled
Created by Packt Publishing
Last updated 2/2016
Curiosity Sale
Current price: $10 Original price: $50 Discount: 80% off
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn about virtual data binding, the true power behind D3JS
  • Understand how D3 imports CSV/TSV table formats and JSON data and display it nicely
  • Harness the power of D3's drawing and tweaking tools to transform the imported data for multiple uses
  • Master the methods of creating axes, graphs, charts, lines, and shapes in SVG to effectively present your data
  • Combine Bootstrap with D3, and use it to drive a web page architecture
  • Discover how to add interaction to visualizations, from simple HTML selectors to arcs in a sunburst
View Curriculum
  • Knowledge of HTML, the DOM, and JavaScript is necessary. Some understanding of SVG is useful, but not required.

Most of the available data we have access to is in the form of numbers, tables, and Excel spreadsheets. Wouldn't it be great if all this data magically sprung up colorful charts, graphs, and clouds? The D3 JavaScript library is that magic wand to get all the work done with a wave of your hand or a few lines of code. Everything you require to make your data display in aesthetic awe can be achieved using D3JS.

Rapid D3JS begins with setting up your development environment, and then dives into how data binding works and how it's similar to jQuery. We'll take a look at building a football fan site and using spreadsheet data (TSV) to build a team roster, and learn about scaling, drawing axes, data manipulation, and even how to animate bars in five amazingly simple lines of code.

Driving HTML tables is nice, but what we really want to see is graphics. So next, we'll build a histogram from a CSV file of goals scored over the season. But D3 isn't just for building tables or creating graphs. You can also build a website framework driven from a CSV file. We'll also be creating a simple Bootstrap menu, and the possibilities demonstrated by this quick mini project are limitless.

Finally, we'll take a couple of sample D3 visualizations such as Word Cloud and Sunburst and incorporate our data into them. Last but not least, we'll see how to build a website menu framework and techniques on how to utilize third-party visualizations within it.

This video course will take you from the foundational bindings of Data-driven Documents to understanding strategies to create and extend amazing visualizations.

About the Author

Michael Westbay graduated from San Diego State University with a BS degree in computer science and a minor in Japanese studies. Upon graduation, he moved to Japan to work for a software company mainly dealing with databases. After 15 years at that company, he branched out and started working independently connecting databases and web technologies.

Most of what Michael has written about has been about Japanese baseball, having started a blog (before blogs existed) in 1995. That eventually led to writing a column for a Japanese baseball magazine for a couple of years, relying heavily on his own baseball database for the article.

He was an early adopter of Netscape Navigator 2.0's JavaScript, seeing the potential of dynamic pages early on. Unfortunately, his experience dealing with IE 4 on a time card system in 1997 soured him on JavaScript for a number of years. He then concentrated on server-side technologies and had a number of articles published in Japanese web and database periodicals.

As third-party JavaScript frameworks conquered the incompatibilities Microsoft built into their own version of ECMAScript, Michael slowly came back to the dynamic scripting scene. jQuery and its ecosystem of plug-ins won him back full time, but it doesn't compare to the power and elegance of D3Js. Crossfilter and dcJS look to be the next step in his never-ending pursuit of knowledge.

Who is the target audience?
  • If you are a web developer who is interested in starting out with D3JS, this course is for you.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
22 Lectures
Introducing Data-Driven Documents - D3JS
3 Lectures 11:43

Allow the viewer to know what he/she is getting into from the start.

Author and Course Introduction

Get everything necessary for a web developer to get up and running as well as to develop for D3JS.

Setting Up a Development Environment

In order to fully understand how D3JS works, one needs to understand the relationship between data and D3 selectors. Rather than letting a script run and the viewer see the results, the viewer manually manipulates the DOM via the data, gaining a fundamental understanding of the core functionality of D3JS.

Driving a Document with Data – Manually
Driving an HTML Table
4 Lectures 17:11

Demonstrates how easy it is to read in a standard comma or tab-separated value file and display it as an HTML table.

Preview 05:27

Shows how to display a subset of the data based on user interaction.

Filtering Data in an HTML Table

Demonstrates how to add the interactivity functionality in just a few lines of code.

Sorting by Columns

Demonstrates how to add zebra striping to the table using the index parameter to D3JS's "select" functions.

Striping the Table
Graphing the Data
4 Lectures 13:05

Demonstrates how easy it is to switch to CSV files for data. Also introduces how to draw a graph on the SVG (Scalar Vector Graphics) canvas.

Preview 04:43

Show how to map data values to actual pixels.

Scaling the Graph

Demonstrates D3's axis-drawing functionality.

Adding the X and Y Axes

Demonstrates how simple it is to animate a RECT element (or any other elements) with just a few lines of code.

Animating the Graph
Dealing with Dates and Interacting with Charts for Detail
6 Lectures 31:22

Data feeds that one gets for fantasy sports or booking sites are not necessarily in a structure that is useful for plotting ranking over the course of a season. Using various data manipulation tools and structures in D3, let's convert the data to something we can use.

Preview 06:18

With the data now converted into a list of teams with an array of games, it's time to draw our line graphs.

Drawing Lines

The X axis displays the dates listed monthly. We'd rather have the dates listed weekly, with the date in the format "Aug 4."

Formatting the Date Axis

It's still impossible to determine which line goes with which team. To help distinguish one team from the other, add a different color to each line and display the corresponding team name in a legend.

Adding a Legend

The legend helped a great deal with telling the teams apart. However, let's have the teams listed in the order of their final rankings so that both the legend and graphed lines can be read from top down by rank.

Ranking Teams

Game details are trapped inside each point of our line. Reveal these details by hovering over (or tapping on) the point for each game in the line chart.

Viewing Details
Collating Everything Together
1 Lecture 05:48

The pages we've made so far are related, but disconnected. Let's use a CSV file to drive a sitewide menu system.

Preview 05:48
Partying with Third-party Layouts
4 Lectures 30:21

Word clouds are generally used on sites to convey how popular a given topic or word is by the frequency at which it is used in the site's text or comments. Let's adapt a word cloud to show the top goal getters in the league.

Preview 09:18

Many visualizations are more proof-of-concept than well-defined components such as the word cloud. Creating a sunburst chart, for example, utilizes a layout engine that handles much of the calculations for where individual arcs go, but it's up to the programmer to actually draw them. Let's see how such a layout engine can be used to create a compelling sunburst chart, complete with animation. Of particular interest is the partition layout that allows you to use your own hierarchic structure rather than convert your data to the format that the partition layout expects by default.

Adding a Sunburst

We now have a sunburst chart that toggles between the number of top players on a team by position and the number of goals they've scored, but shows none of these details in text. We'll add 'interacting with mouseovers' to display detailed information about the arc, when the mouse is over the arc. (Do the same for mouse clicks on arcs to support touch devices.)

Displaying Details

While we can now view data contained in the sunburst by hovering the mouse over the arcs, there is plenty of room for team and position labels.

Labeling Sunburst Arcs
Frequently Bought Together
About the Instructor
Packt Publishing
3.9 Average rating
7,349 Reviews
52,590 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.