This course starts with the very basics of frontend web development showing the challenges of incorporating dynamic graphics without using D3. Users learn to combine data with visual elements on the page to create informative visualizations. By the end of this section, viewers will be comfortable with using the D3 library to create their own custom concept of data-driven visualizations.
We'll see how to use real datasets via APIs to create custom visualizations. By leveraging the interactive nature of web programming we'll look at how to incorporate user input to add interactivity to our visualization. We'll start with basic scatter plots and slowly build upon this foundation to create more complicated forms of dynamic data visualizations. Eventually we'll end the video course by walking through the process of creating a completely novel form of visualization merging concepts of both a scatter plot and a geographic map.
Building Interactive Data Visualization with D3JS provides one with the foundation to continue on their journey of creating novel and highly impactful data visualizations.
About The Authors
Alex Simoes is a co-founder of the data visualization company Datawheel. He is a graduate at the MIT Media Lab where he worked to develop data decision making tools using visual techniques to explore big datasets. As part of his Master's thesis he developed The Observatory of Economic Development, a website used to visualize world trade flows with 50 years' worth of data from more than 200 countries and 2000 products. Alex is focused on using and contributing to open source projects including D3plus, an extension to the D3 library that allows for fast and easy creation of online data visualizations. He is focused on developing novel visualization techniques to aid decision-making in all fields.
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 started working independently, connecting databases and web technologies.
Most of what Michael has written has been about Japanese baseball. He started a blog (before blogs were common) in 1995. That eventually led to writing a column for a Japanese baseball magazine for a couple of years. He relied heavily on his own baseball database for the article.
For much of D3's functionality, a web server is necessary for both developing and serving. We will get a simple HTTP server running to test and serve D3JS pages.
Debugging web applications can be complicated as one often needs to know the values of variables at certain times of execution. We can use console.log() to print statements to the browser's console to explore the changing state of our programs.
It's important to plan out how you expect your page to look and behave before you start to code it. We'll take a look at what our intentions are and plan accordingly.
It's a good practice to use static data before appending new elements to the page to help understand how your page will look. We do this by pasting multiple copies of the same static elements to test our design.
Color is an effective means of quickly representing data. We apply this to our dataset by color-coding our "ease of use" variable.
SVG can be used in all modern browsers. We take a look at how to create SVGs by hand.
SVG graphics are powerful but take a bit of learning to understand how they work. We will look at how to use some of these advanced features.
Oftentimes, we will need to add an undisclosed number of elements to a page. This section teaches us how to make our visualizations ready for dynamic datasets.
We want our visualization to take up as much room as we have available. We set our height and width dynamically based on the page's attributes.
Adding new data to a current chart can lead to wasted computation when only a few elements are actually changed. We use D3's enter/update paradigm to update our chart with new data.
We need to better separate the bars in our bar chart and devise a method to remove the leftover items that no longer exist in our dataset. We can do this using a dynamic padding between bars and using D3's .exit() function.
Large datasets will often require you to make a background request to a server to fetch data. Using D3's AJAX methods, we can easily request data to use in our visualizations.
Comparing two values is a common task when analyzing datasets. Using a scatter-plot, we can easily spot differences and correlations between two values.
In order to read our scatter plot visualization, we need to create axes to correspond to our data values. We can use D3's built-in axis method that works with our scales to easily create axes for our chart.
Having the country codes displayed alongside their data points is useful, but it can be distracting. In this video, we will attach an event listener to a button to toggle the country code visibility on and off.
Having the data of the scatter-plot displayed relative to each other is a good representation of relative data but is light on the details. By presenting detailed information in a pop-up tooltip when moving the mouse over a data point, one can reveal relevant data when needed.
Our graph is currently restricted to displaying exports for 2010 and 2011. Using a form, we will update our visualization to specify which year each axis represents.
We now have a form to select the year each axis represents. We will implement the fetching of only the requested data and display it in our scatter-plot graph.
Animations can help draw the eye of the user to specific data in a visualization that one wants to highlight. We will learn the basics of creating animations that can later be incorporated into our scatter-plot visualization.
Our scatter-plot allows users to change the dataset applied to the x and y axes, but each submission results in a flash change of the visualization. In this video, we will smoothly transition the dots and axes between old and new data.
Functionally, our scatter-plot is complete. However, there are still some lingering issues that can be addressed with some additional transitions that will be demonstrated.
Geographic maps tend to be encoded such that the shape, size, and position are fixed, but these variables are crucial to creating a good visualization. In this video, we shall convert raw geographic data to GeoJSON, a format that D3JS can then manipulate to our liking.
A choropleth allows one to take in information at a glance, being able to compare countries' values by how dark they are shaded relative to each other. In this video, we will display a map assigning a color scale based on a given country's export for a given product.
Our map is currently very static and displays only a hardcoded year's exports for a hardcoded product. While an advanced user could tweak the values in the console and call for a redraw, we shall create a slider to select the year and a pull-down list to select the product.
Our map is now very functional, allowing the user to change the year and product being displayed. In this video, we shall implement zooming in on a given country, displaying details about the country the curser is over and showing a legend to complete the visualization.
For the final visualization, merge the scatter-plot that you learned about in Section 7 with drawing maps, as learned in Section 8, to create a Geo-scatter.
Countries are currently displayed relative to each other in a two-dimensional plane according to their respective sizes. We want to use the shapes of the countries as points in our scatter-plot, so we will reduce each country to a single shape, all shrunken or enlarged to a uniform size and able to be placed anywhere on our scatter-plot grid.
We now have our Geo-scatter functioning, but it still lacks some finishing touches. Add the X and Y axes to the display, reinstall the tooltip functionality, and add the ability to select countries to be displayed, both independently and by continent.
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.