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