Learn D3.JS Hands-on And The Simple Way

Learn how to work with D3 Javascript libraries in step-by-step and most simple manner with lots of hands-on examples
4.5 (16 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
120 students enrolled
$95
Take This Course
  • Lectures 36
  • Length 4 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2016 English

Course Description

  • D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3 stands for Data Driven Documents and is currently the number one choice for web-based analytics and visualization projects when it comes to interactivity, flexibility and features.
  • D3.js is open source and have a huge set of powerful libraries to take advantage from. The possibility with D3 are endless but the main challenge for learning D3 is it's steep learning curve. The video contents and shared repositories in the course are designed in such a way that it provides a step-by-step and hands-on methodology to get a solid grasp on the concept and get working knowledge of the technology.
  • All the major elements and functionalities one might use in D3 projects are covered and explained very well, so students will have no problem in implementing the learning into practice.
  • There is also a working data visualization project which is explained in this course and build from scratch so students can understand the details of implementation and problem-solving approach with D3.js.
  • Basic and Advance concepts are covered in a logical sequence, so students will know why a concept is required and when to use it in visualization or analytics project.
  • All the learning in this course are kept hands-on basis and the development codes and repositories are shared via the cloud, so students will have access to the code snippets anytime from anywhere for free.
  • The course not only covers the libraries, elements and features but also provides knowledge and understanding of when to use them so students can make the transition from a newcomer in D3.js development to professional with ease in less time.
  • This course also covers the debugging aspect of development with D3.js and explains what tools to use and how to use it to identify errors, bugs and fix them fast. 

What are the requirements?

  • Student must have a basic understanding of web terminologies.

What am I going to get from this course?

  • Get ready to work in Analytics or Visualization projects involving D3.js to create awesome visualizations.
  • Know how to use D3.js libraries and work with it.
  • Work with external data source and create awesome analytics out of it.

What is the target audience?

  • Developers interested to work with D3.js for analytics and visualization application.
  • Data Analyst and Scientists who are looking for a great technological option for web-based data visualization.
  • Students who want to complete analytics and visualization project using D3.js.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction to D3 and Course Breakdown
04:13

In this section, we will understand what is D3 and why it is one of the best options to consider for building analytics and visualization applications.

01:35

In this section, we will see how the course is structured and what is the sequence in which we are going to learn D3.

Section 2: Using SVG in HTML5 and D3
All Development Code and Repository
Article
03:00

SVG stands for Scalable Vector Graphics (SVG) and is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. In this section, we will create basic SVG objects using HTML5 in our  cloud IDE.

05:07

In this section, we will create simple SVG object with the help of D3 libraries in our cloud IDE.

Introduction to D3JS
2 questions
Section 3: Essential D3 Properties
07:39

d3.select() and d3.selectAll() are two functions which can be used to select an element or object, just like jQuery and in this section we are going to see how to use them.

05:12

In this section, we are going to see how to add CSS style properties to our SVG and HTML5 elements using inline, internal and external stylesheet.

04:12

In this section, we are going to create basic geometrical elements like circle and rectangle which help of D3 libraries

Essential D3 Properties
3 questions
Section 4: Use of Internal and External Data With D3
10:12

In this section, we are going to use a data array to create simple rectangles which will later become the foundation to draw Bar chart using D3.

05:36

In this section, we are going to see how to use external CSV/TSV data files and read our data to draw meaningful chart out-out it. For this example, we will load an array of data from a CSV file and create simple Bar chart out of it.

Use of Internal and External Data With D3
2 questions
Section 5: Use of Scale and Axis in D3
05:31

This is the Part 1 of the section, where we are going to understand how D3 Scale works and what are different types of scale which we can use in D3. Mainly there are Linear and Ordinal scale and we will see where these scales are typically used and Why.

07:35

This is the Part 2 of the section, where we are going to understand how D3 Scale works and what are different types of scale which we can use in D3. Mainly there are Linear and Ordinal scale and we will see where these scales are typically used and Why.

01:52

This is the Part 1 of the section, where we will continue with our simple Bar chart example and add X and Y axis to it using D3 functions and CSS.

16:02

This is the Part 2 of the section, where we will continue with our simple Bar chart example and add X and Y axis to it using D3 functions and CSS.

Use of Scale and Axis in D3
2 questions
Section 6: Adding Events For Interactivity
11:28

We use D3 events to facilitates interactivity and animations. We will create a simple tooltip with the help of D3 events to demonstrate the functionality and use of events in D3.

Adding Events For Interactivity
1 question
Section 7: Drawing Different Types of Charts Using D3JS
12:56

This is the Part 1 of the section, where we will create a Bubble chart using D3 libraries and will show 2-D and 3-D data using the Bubble chart.

02:35

This is the Part 2 of the section, where we will create a Bubble chart using D3 libraries and will show 2-D and 3-D data using the Bubble chart.

01:27

This is the Part 1 of the section, where we will create a Donut chart out of our 2-D data array and convert this Donut chart and see how to create the Donut chart into Pie chart. Pie chart and Donut chart are an excellent way to show comparison among data points on the percentage basis.

18:26

This is the Part 2 of the section, where we will create a Donut chart out of our 2-D data array and convert this Donut chart and see how to create the Donut chart into Pie chart. Pie chart and Donut chart are an excellent way to show comparison among data points on the percentage basis.

06:38

This is the Part 3 of the section, where we will create a Donut chart out of our 2-D data array and convert this Donut chart and see how to create the Donut chart into Pie chart. Pie chart and Donut chart are an excellent way to show comparison among data points on the percentage basis.

02:11

This is the Part 4 of the section, where we will create a Donut chart out of our 2-D data array and convert this Donut chart and see how to create the Donut chart into Pie chart. Pie chart and Donut chart are an excellent way to show comparison among data points on the percentage basis.

16:08

In this section, we will create a simple line chart from our 1-D data set and even see how to apply events to calculate and show data when user hover over the line. The Line chart is  an excellent way to represent trends over time.

04:43

This is the Part 1 of the section, where we will look into advanced data representation format like Map. We will use Geo-JSON format to draw a USA country map and represent population data over it.

12:58

This is the Part 2 of the section, where we will look into advanced Data representation format like Map. We will use Geo-JSON format to draw a USA country map and represent population data over it.

Drawing Different Types of Charts Using D3JS
4 questions
Section 8: Final Project Using D3
00:41

In this section, we will see what we are going to build in our visualization project using D3.

04:00

In this section, we will see the usecase on which our final project is going to be based on and the wireframe for it.

01:23

In this section, we are going to see how the code structure will be and what are the different modules which are going to come together to solve it.

06:11

Here we will start to build our final project by first building the US Map and adding the data to the project. Data here will be hard coded for the purpose to reduce complexity and to provide a single point of reference in future projects.

09:36

Next Step after drawing the map and adding data to the project will be to create the State vs Population Chart. We are going to build the project in modular and reusable fashion with the help of custom and reusable functions.In this section, we are going to define the basic properties of padding, scales and axis for this Bar chart.

12:29

In this section, we are going to use properties created in Part 2 to drawing the State vs Population Bar chart.

11:39

Here we are going to define the properties for our individual State vs Year Bar chart which we will generate once we click over any individual state present in US Map.

12:56

In this section, we are going to draw the State vs Year Bar chart  for individual state with properties we have defined in part 4.

05:43

In this section ,we are going to complete the Usecase by adding the KPI numbers to the final project.

06:48

And finally in this section, we are going to improve the alignment and look of the visualization with the help of CSS.

01:48

In this section, we are going to summarize the entire course and topics covered in it.

Section 9: About UI5CN and Your Instructor
01:41

Your instructor Ajay Nayak is CTO of UI5CN.

About Ajay:

"Ajay is very passionate and enthusiastic about technology and teaching online. From a very small age he started coding. Before working with UI5CN, he had worked with many big names like Capgemini®, Statoil®, SAP® and Skybuffer in wide range of portfolios. "

About UI5CN

UI5CN platform is a learning platform for technical and tech-design related video courses and online coding exercises to help student master new and upcoming technical skills most fast and simple way.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

UI5 Community Network, Experts in Services, Consulting and Education

30+ Years of combined experience in Services, Consulting and Education. With more than a decade of experience in enhancing and implementing cutting edge technology for major European industries, some of them includes big Fortune 500 names.

Deep knowledge on the functional side, as well, in Logistics, PLM, SRM Procurement, Supply Chain and Plant Maintenance.

We work extensively in SAP® UI5 and Fiori with SAP® and non SAP® ERPs and also have a complete understanding and first hand working experience with SAP® HANA and the new UI.

We believe that sharing makes the World a better place.

Instructor Biography

Tell me and I forget, teach me and I may remember, involve me and I learn.” 

-Benjamin Franklin

I am a passionate technology enthusiast, always learning new things and like to building stuff which impact people's life and help them.After working in the corporate setup as a consultant, architect and external contractor for Capgemini®, SAP®, Skybuffer and Statoil®.I started my own venture UI5CN with my friends.

We at UI5CN, create software and training materials which help people learn these new upcoming technologies and help our customer to leverage maximum benefits out of it.

We are more aligned to enterprise software UX design and development, IoT and front-end design and development.

Ready to start learning?
Take This Course