Rapid D3 JS

Conjure up some mind-boggling dynamic visualizations with the flick of a mouse and a bit of code using D3JS
3.7 (10 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.
210 students enrolled
Take This Course
  • Lectures 22
  • Length 2 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2015 English

Course Description

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.

What are the requirements?

  • Knowledge of HTML, the DOM, and JavaScript is necessary. Some understanding of SVG is useful, but not required.

What am I going to get from this course?

  • 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

Who is the target audience?

  • If you are a web developer who is interested in starting out with D3JS, this course is for you.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introducing Data-Driven Documents - D3JS

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


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


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.

Section 2: Driving an HTML Table

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


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


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


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

Section 3: Graphing the Data

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.


Show how to map data values to actual pixels.


Demonstrates D3's axis-drawing functionality.


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

Section 4: Dealing with Dates and Interacting with Charts for Detail

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.


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


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


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.


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.


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.

Section 5: Collating Everything Together

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

Section 6: Partying with Third-party Layouts

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.


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.


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.)


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.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, 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.

Ready to start learning?
Take This Course