Learn D3.JS Hands-on And The Simple Way

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

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.

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

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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

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.

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.

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

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

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

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.