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.
Everyone collects data, but few ever understand their data. That's because they need a graph or a diagram to force them to notice what they never expected to see. Data is useless without a picture and D3JS is the workhorse of turning data into pictures. Most charting libraries on the Web rely on it.
Mastering D3JS will show you everything that goes into a data visualization from start to finish. You will learn about the details of using D3JS, structuring and debugging your code, and the logic behind data visualization.
You will start the course with some data and a goal. You will then be guided on the quest of turning that data into an interactive picture for the Web. Following the example, you will master D3 layouts, learn about adding animations and user interaction to make your visualization responsive, scrape more data when needed, and learn about making pretty maps. You will learn to use libraries such as Bootstrap, Figue, and Lo-dash to add those extra features. If an obstacle appears, you will conquer it. Finally you'll learn to debug your code and learn the best practices of this trade. You'll also see some interesting examples of good visualization and information design.
When you finish the course, you will have mastered data visualization with D3JS. You will be an expert!
About the Author
Swizec Teller is a digital nomad and full stack web engineer. He travels the world and helps startups win by setting up new teams, training juniors, and fixing spaghetti code or implementing new features. His code has been used by MasterCard, Commerzbank, Google, Mashable, Lyft, and many others. He previously published a book called Data Visualization with D3JS aimed at people learning D3JS from scratch. For the past few years he's also been working on a project to help programmers be more awesome, called Why Programmers Work at Night. Swizec's work has been featured in Business Insider, LifeHacker, Huffington Post, and several dead-tree magazines. He's spoken on BBC Radio, appeared on Slovenian national television, and given talks all over the world.
Not for you? No problem.
30 day money back guarantee.
Learn on the go.
Desktop, iOS and Android.
Certificate of completion.
|Section 1: Layouts|
Layouts look like magic, but they're really not. We will go through what they actually give you.
Creating a pie chart involves a lot of calculation of angles that are error-prone and annoying to get right.
Layouts remove our need to compute positions manually.
|Explore the default layouts, what they're useful for, and how they're organized.|
|Section 2: Creating Layouts|
|Writing specific code is easier than generalized solutions, so we begin with a sketch of our final idea that we're going to turn into a layout later.|
|Once you have a one-off sketch, you can turn it into a reusable layout fairly easily.|
|Once you've turned your sketch into a layout, all you have to do is make the sample visualization look good.|
|Section 3: Data Manipulation|
|Working with remote data will slow you down in the initial stages of the project.|
|HTML isn't a great data format, so we transform it into the cleaner CSV format.|
|Functional style coding is important, but it is time to look at why it is important and how it helps.|
|Section 4: Geography|
|Every geographical visualization begins with a map. We're going to draw the US map in a few easy steps.|
|We've got a nice map, now it just needs some data. We'll use our UFO dataset to show where sightings happen in the US.|
|There's geo data and then there's geo data. We will walk through some different formats while improving our UFO map further.|
|Section 5: Creating Animations|
|Our code has gotten messy and we'll have more fun working with it after some cleanup.|
The basic way to animate is to change the drawing every couple of milliseconds.
|To create a more reliable animation, we have to take into account how long rendering a keyframe takes.|
|When you don't need to control everything about an animation, using a transition is easier.|
|Section 6: Interactivity|
|We want to give users control over the animation, but we have dug a few holes for ourselves.|
|Not everyone's got the patience to wait for our animation; give them the option to explore.|
It would be cool to see which sightings contribute to a particular centroid's size.
|There are a couple of things you should take into account to embrace mobile users.|
|Section 7: Debugging and Best Practices|
|You spend 10 times more time reading code than writing it; you should optimize this.|
|A look at some strategies to debug code that isn't intuitively obvious to understand.|
|D3 is a great base library, but there's a lot that a normal project will use and it makes sense to get some extra help.|
|Section 8: Visualization Design Primer|
To create a great visualization, you have to understand why you're creating one.
|A lot of great visualizations suffer from some pretty basic flaws that make them less shiny than they deserve to be.|
The best way to get good ideas is to see what others have done. We look at some awesome visualizations to find inspiration.
Over the past ten years Packt Publishing has developed an extensive catalogue of over 2000 books, e-books and video courses aimed at keeping IT professionals ahead of the technology curve. From new takes on established technologies through to the latest guides on emerging platforms, topics and trends – Packt's focus has always been on giving our customers the working knowledge they need to get the job done. Our Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.