Learn D3.JS Hands-on And The Simple Way
3.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.
146 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn D3.JS Hands-on And The Simple Way to your Wishlist.

Add to Wishlist

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
3.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.
146 students enrolled
Last updated 11/2016
English
Current price: $10 Original price: $95 Discount: 89% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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.
View Curriculum
Requirements
  • Student must have a basic understanding of web terminologies.
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. 
Who 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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 36 Lectures Collapse All 36 Lectures 04:02:18
+
Introduction to D3 and Course Breakdown
2 Lectures 05:48

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.

Preview 04:13

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

Preview 01:35
+
Using SVG in HTML5 and D3
3 Lectures 08:18
All Development Code and Repository
00:11

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.

Preview 03:00

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

Using D3 to create SVG elements
05:07

Introduction to D3JS
2 questions
+
Essential D3 Properties
3 Lectures 17:03

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.

How to select and operate on elements using D3
07:39

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.

How to add styles to D3 elements
05:12

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

How to draw basic geometrical objects using D3
04:12

Essential D3 Properties
3 questions
+
Use of Internal and External Data With D3
2 Lectures 15:48

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.

How to Use data to draw D3 elements
10:12

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.

How to load data from external files
05:36

Use of Internal and External Data With D3
2 questions
+
Use of Scale and Axis in D3
4 Lectures 31:00

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.

Part 1 : How to add Scales in D3 charts
05:31

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.

Part 2 : How to add Scales in D3 charts
07:35

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.

Part 1 : How to add Axis in D3 charts
01:52

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.

Part 2 : How to add Axis in D3 charts
16:02

Use of Scale and Axis in D3
2 questions
+
Adding Events For Interactivity
1 Lecture 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.

How to add events to D3 charts for user interaction
11:28

Adding Events For Interactivity
1 question
+
Drawing Different Types of Charts Using D3JS
9 Lectures 01:18:02

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.

Part 1 : How to create Bubble chart with D3
12:56

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.

Part 2 : How to create Bubble chart with D3
02:35

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.

Part 1 : How to create Pie chart and Donut chart with D3
01:27

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.

Part 2 : How to create Pie chart and Donut chart with D3
18:26

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.

Part 3 : How to create Pie chart and Donut chart with D3
06:38

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.

Part 4 : How to create Pie chart and Donut chart with D3
02:11

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.

How to create Line chart with D3
16:08

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.

Part 1 : How to create Maps with D3
04:43

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.

Part 2 : How to create Maps with D3
12:58

Drawing Different Types of Charts Using D3JS
4 questions
+
Final Project Using D3
11 Lectures 01:13:14

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

What we are going to build in final D3 Project
00:41

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

What is the Usecase for the final D3 Project
04:00

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.

Preview 01:23

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.

Part 1 : Rendering US map for our final project
06:11

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.

Part 2 : Defining properties for our State vs Population Bar chart
09:36

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

Part 3 : Drawing our state vs population Bar chart
12:29

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.

Part 4 : Defining properties for our individual State vs Year Bar chart
11:39

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.

Part 5 : Drawing our individual State vs Year Bar chart
12:56

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

Part 6 : Defining and drawing KPI numbers
05:43

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

Part 7 : CSS and other small changes
06:48

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

Summary of the course
01:48
+
About UI5CN and Your Instructor
1 Lecture 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.

Preview 01:41
About the Instructor
UI5 Community Network
4.1 Average rating
789 Reviews
14,835 Students
8 Courses
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.

CTO at UI5CN Ajay Nayak
4.1 Average rating
622 Reviews
10,078 Students
6 Courses

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.