Mastering D3.js

Simpliv

Course

Online

£ 100 + VAT

The best Other programming courses

See all

See all

Description

  • Type

    Course

  • Methodology

    Online

  • Start date

    Different dates available

Master the art of creating interesting and effective data visualizations with D3.JS.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

Facilities

Location

Start date

Online

Start date

Different dates availableEnrolment now open

About this course

Create your own D3.js code that you can use for your future projects
Use functional programming, time formatting, and parsing to transform data from HTML to a cleaner CSV
Scrape and process data from the Web for your app
Delve into the intricacies of D3.js to build geography-based visualizations
Implement animation like transitions, delays, and timers to make things move in a controlled way
Build upon animations to make you react to user input
Get some extra help from libraries built on top of D3.js to implement additional features to your app

Questions & Answers

Add your question

Our advisors and other users will be able to reply to you

Who would you like to address this question to?

Fill in your details to get a reply

We will only publish your name and question

Reviews

This centre's achievements

2021

All courses are up to date

The average rating is higher than 3.7

More than 50 reviews in the last 12 months

This centre has featured on Emagister for 4 years

Subjects

  • Writing
  • Web
  • Magic
  • Layout
  • Works
  • HTML
  • Options
  • Inheritance

Course programme

Layouts 4 lectures 15:34 What Are Layouts? Layouts look like magic, but they're really not. We will go through what they actually give you.
  • Why you need layouts
  • What they do for you
Pie Charting Manually Creating a pie chart involves a lot of calculation of angles that are error-prone and annoying to get right.
  • Set up a basic HTML file and get the dataset
  • Set up the prerequisites and helper functions to draw a pie chart
  • Draw the actual pie chart and add tooltips
Using a Layout Layouts remove our need to compute positions manually.
  • Copy manual code to a new function and add a call
  • Replace all computation code with the use of a pie layout
  • Explore some options for the pie chart layout
Default D3.js Layouts Explore the default layouts, what they're useful for, and how they're organized.
  • Show examples of the non-hierarchical layouts
  • Examples of hierarchical layouts explain they're all based on the same
  • The summary and a peek into the next section
Layouts 4 lectures 15:34 What Are Layouts? Layouts look like magic, but they're really not. We will go through what they actually give you.
  • Why you need layouts
  • What they do for you
Pie Charting Manually Creating a pie chart involves a lot of calculation of angles that are error-prone and annoying to get right.
  • Set up a basic HTML file and get the dataset
  • Set up the prerequisites and helper functions to draw a pie chart
  • Draw the actual pie chart and add tooltips
Using a Layout Layouts remove our need to compute positions manually.
  • Copy manual code to a new function and add a call
  • Replace all computation code with the use of a pie layout
  • Explore some options for the pie chart layout
Default D3.js Layouts Explore the default layouts, what they're useful for, and how they're organized.
  • Show examples of the non-hierarchical layouts
  • Examples of hierarchical layouts explain they're all based on the same
  • The summary and a peek into the next section
What Are Layouts? Layouts look like magic, but they're really not. We will go through what they actually give you.
  • Why you need layouts
  • What they do for you
What Are Layouts? Layouts look like magic, but they're really not. We will go through what they actually give you.
  • Why you need layouts
  • What they do for you
What Are Layouts? Layouts look like magic, but they're really not. We will go through what they actually give you.
  • Why you need layouts
  • What they do for you
What Are Layouts? Layouts look like magic, but they're really not. We will go through what they actually give you.
  • Why you need layouts
  • What they do for you
Layouts look like magic, but they're really not. We will go through what they actually give you.
  • Why you need layouts
  • What they do for you
Layouts look like magic, but they're really not. We will go through what they actually give you.
  • Why you need layouts
  • What they do for you
Pie Charting Manually Creating a pie chart involves a lot of calculation of angles that are error-prone and annoying to get right.
  • Set up a basic HTML file and get the dataset
  • Set up the prerequisites and helper functions to draw a pie chart
  • Draw the actual pie chart and add tooltips
Pie Charting Manually Creating a pie chart involves a lot of calculation of angles that are error-prone and annoying to get right.
  • Set up a basic HTML file and get the dataset
  • Set up the prerequisites and helper functions to draw a pie chart
  • Draw the actual pie chart and add tooltips
Pie Charting Manually Creating a pie chart involves a lot of calculation of angles that are error-prone and annoying to get right.
  • Set up a basic HTML file and get the dataset
  • Set up the prerequisites and helper functions to draw a pie chart
  • Draw the actual pie chart and add tooltips
Pie Charting Manually Creating a pie chart involves a lot of calculation of angles that are error-prone and annoying to get right.
  • Set up a basic HTML file and get the dataset
  • Set up the prerequisites and helper functions to draw a pie chart
  • Draw the actual pie chart and add tooltips
Creating a pie chart involves a lot of calculation of angles that are error-prone and annoying to get right.
  • Set up a basic HTML file and get the dataset
  • Set up the prerequisites and helper functions to draw a pie chart
  • Draw the actual pie chart and add tooltips
Creating a pie chart involves a lot of calculation of angles that are error-prone and annoying to get right.
  • Set up a basic HTML file and get the dataset
  • Set up the prerequisites and helper functions to draw a pie chart
  • Draw the actual pie chart and add tooltips
Using a Layout Layouts remove our need to compute positions manually.
  • Copy manual code to a new function and add a call
  • Replace all computation code with the use of a pie layout
  • Explore some options for the pie chart layout
Using a Layout Layouts remove our need to compute positions manually.
  • Copy manual code to a new function and add a call
  • Replace all computation code with the use of a pie layout
  • Explore some options for the pie chart layout
Using a Layout Layouts remove our need to compute positions manually.
  • Copy manual code to a new function and add a call
  • Replace all computation code with the use of a pie layout
  • Explore some options for the pie chart layout
Using a Layout Layouts remove our need to compute positions manually.
  • Copy manual code to a new function and add a call
  • Replace all computation code with the use of a pie layout
  • Explore some options for the pie chart layout
Layouts remove our need to compute positions manually.
  • Copy manual code to a new function and add a call
  • Replace all computation code with the use of a pie layout
  • Explore some options for the pie chart layout
Layouts remove our need to compute positions manually.
  • Copy manual code to a new function and add a call
  • Replace all computation code with the use of a pie layout
  • Explore some options for the pie chart layout
Default D3.js Layouts Explore the default layouts, what they're useful for, and how they're organized.
  • Show examples of the non-hierarchical layouts
  • Examples of hierarchical layouts explain they're all based on the same
  • The summary and a peek into the next section
Default D3.js Layouts Explore the default layouts, what they're useful for, and how they're organized.
  • Show examples of the non-hierarchical layouts
  • Examples of hierarchical layouts explain they're all based on the same
  • The summary and a peek into the next section
Default D3.js Layouts Explore the default layouts, what they're useful for, and how they're organized.
  • Show examples of the non-hierarchical layouts
  • Examples of hierarchical layouts explain they're all based on the same
  • The summary and a peek into the next section
Default D3.js Layouts Explore the default layouts, what they're useful for, and how they're organized.
  • Show examples of the non-hierarchical layouts
  • Examples of hierarchical layouts explain they're all based on the same
  • The summary and a peek into the next section
Explore the default layouts, what they're useful for, and how they're organized.
  • Show examples of the non-hierarchical layouts
  • Examples of hierarchical layouts explain they're all based on the same
  • The summary and a peek into the next section
Explore the default layouts, what they're useful for, and how they're organized.
  • Show examples of the non-hierarchical layouts
  • Examples of hierarchical layouts explain they're all based on the same
  • The summary and a peek into the next section
Creating Layouts 3 lectures 16:21 Sketching Out the Idea 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.
  • Download dataset, prepare environment, and get data into a regular histogram
  • Update resulting data so that it works in a circle with arcs
  • Copy paste and modify relevant pie chart code to draw the sketch
Making Our Code Reusable Once you have a one-off sketch, you can turn it into a reusable layout fairly easily.
  • Copy the code into a separate layout; take care of inheritance issues
  • Identify which parts should be configurable, and implement the functions
  • This has more of the previous step, but it has other configuration functions as well
Final Tweaks Once you've turned your sketch into a layout, all you have to do is make the sample visualization look good.
  • Try out different versions of configuration parameters until something looks good
  • Label the visualization
  • Make the colors mean something as well
Creating Layouts. 3 lectures 16:21 Sketching Out the Idea 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.
  • Download dataset, prepare environment, and get data into a regular histogram
  • Update resulting data so that it works in a circle with arcs
  • Copy paste and modify relevant pie chart code to draw the sketch
Making Our Code Reusable Once you have a one-off sketch, you can turn it into a reusable layout fairly easily.
  • Copy the code into a separate layout; take care of inheritance issues
  • Identify which parts should be configurable, and implement the functions
  • This has more of the previous step, but it has other configuration functions as well
Final Tweaks Once you've turned your sketch into a layout, all you have to do is make the sample visualization look good.
  • Try out different versions of configuration parameters until something looks good
  • Label the visualization
  • Make the colors mean something as well
Sketching Out the Idea 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.
  • Download dataset, prepare environment, and get data into a regular histogram
  • Update resulting data so that it works in a circle with arcs
  • Copy paste and modify relevant pie chart code to draw the sketch
Sketching Out the Idea 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.
  • Download dataset, prepare environment, and get data into a regular histogram
  • Update resulting data so that it works in a circle with arcs
  • Copy paste and modify relevant pie chart code to draw the sketch
Sketching Out the Idea 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.
  • Download dataset, prepare environment, and get data into a regular histogram
  • Update resulting data so that it works in a circle with arcs
  • Copy paste and modify relevant pie chart code to draw the sketch
Sketching Out the Idea 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.
  • Download dataset, prepare environment, and get data into a regular histogram
  • Update resulting data so that it works in a circle with arcs
  • Copy paste and modify relevant pie chart code to draw the sketch
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.
  • Download dataset, prepare environment, and get data into a regular histogram
  • Update resulting data so that it works in a circle with arcs
  • Copy paste and modify relevant pie chart code to draw the sketch
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.
  • Download dataset, prepare environment, and get data into a regular histogram
  • Update resulting data so that it works in a circle with arcs
  • Copy paste and modify relevant pie chart code to draw the sketch
Making Our Code Reusable Once you have a one-off sketch, you can turn it into a reusable layout fairly easily.
  • Copy the code into a separate layout; take care of inheritance issues
  • Identify which parts should be configurable, and implement the functions
  • This has more of the previous step, but it has other configuration functions as well
Making Our Code Reusable Once you have a one-off sketch, you can turn it into a reusable layout fairly easily.
  • Copy the code into a separate layout; take care of inheritance issues
  • Identify which parts should be configurable, and implement the functions
  • This has more of the previous step, but it has other configuration functions as well
Making Our Code Reusable Once you have a one-off sketch, you can turn it into a reusable layout fairly easily.
  • Copy the code into a separate layout; take care of inheritance issues
  • Identify which parts should be configurable, and implement the functions
  • This has more of the previous step, but it has other configuration functions as well
Making Our Code Reusable Once you have a one-off sketch, you can turn it into a reusable layout fairly easily.
  • Copy the code into a separate layout; take care of inheritance issues
  • Identify which parts should be configurable, and implement the functions
  • This has more of the previous step, but it has other configuration functions as well
Once you have a one-off sketch, you can turn it into a reusable layout fairly easily.
  • Copy the code into a separate layout; take care of inheritance issues
  • Identify which parts should be configurable, and implement the functions
  • This has more of the previous step, but it has other configuration functions as well
Once you have a one-off sketch, you can turn it into a reusable layout fairly easily raw the US map in a few easy...

Additional information

Basic knowledge of D3.js is expected

See related categories

Mastering D3.js

£ 100 + VAT

The best Other programming courses

See all

See all