Packt Publishing – Rapid D3.js

Packt Publishing – Rapid D3.js

Conjure up some mind-boggling dynamic visualizations with the flick of a mouse and a bit of code using D3.js

Conjure up some mind-boggling dynamic visualizations with the flick of a mouse and a bit of code using D3.jsAbout This Video

Harness the magic of D3.js to generate a website of informative, interactive, and animated visualizations

Transform data into graphs, charts, legends, and sunbursts by merging, mapping, and sorting it

Learn how to bind the data from various sources to visualizations and let the data drive the output

In Detail

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 D3.js.

Rapid D3.js 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.

Get Packt Publishing – Rapid D3.js At tenco.pro

Course Curriculum

Introducing Data-Driven Documents – D3.js

• Author and Course Introduction (2:17)
• Setting Up a Development Environment (3:58)t
• Setting Up a Development Environment (5:28)

Driving an HTML Table

• Creating an HTML Table from the Spreadsheet Data (5:27)
• Filtering Data in an HTML Table (5:41)
• Sorting by Columns (2:43)
• Striping the Table (3:20)rt

Graphing the Data

• Creating a Bar Chart (4:42)
• Scaling the Graph (2:58)
• Adding the X and Y Axes (3:24)
• Animating the Graph (2:00)

Dealing with Dates and Interacting with Charts for Detail

• Transforming Data (6:18)
• Drawing Lines (7:32)t
• Formatting the Date Axis (2:44)
• Adding a Legend (6:45)
• Ranking Teams (3:22)
• Viewing Details (4:41)

Collating Everything Together

• Navigating the Site (5:48)

Partying with Third-party Layouts

• Creating a Word Cloud (9:18)
• Adding a Sunburst (9:28)
• Displaying Details (5:33)
• Labeling Sunburst Arcs (6:02)

Get Packt Publishing – Rapid D3.js At tenco.pro