Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Learn D3

Enroll for freeGet started!

Join 16110 other students

Log in to get

Access to all our free courses
Interactive hands-on content
100s of code challenges
Join a friendly community
Enroll for free
Subscribe to access!Subscribe to access!

Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.

Subscription includes

All courses and career paths
100s of coding challenges
Certificates of completion
Exclusive Pro members chat
The course creator Sohaib Nehal

with Sohaib Nehal

Course level: Intermediate

This D3 tutorial teaches you how to create powerful data visualizations for the web. It gives you a fast introduction to the key concepts of D3.js, like selections, data, axes, scales, bar charts, pie charts, SVG elements, and more.

You'll learn

D3 Basics

Selection and manipulation

Data loading

Data joins

Attributes

Axes

Scales

Elements

Labels

Paths

Creating SVG elements

Creating bar charts

Creating pie charts

Creating line charts

man

Prerequisites

Before taking this course, you should have a basic understanding of HTML, CSS, and JavaScript. Here’s our suggested resources to get you up to speed.

Meet your teacher

The course creator

Sohaib Nehal

Sohaib is a full-stack developer based in Karachi. He's passionate about travelling, meeting new people, trying new food, and discussing unique ideas. Sohaib has helped tens of thousands developers learn D3.js with his course and articles.

Follow me on twitter

Why this course rocks

D3.js is the most popular data visualization library for the web. It's written in JavaScript and it allows you to make sense of your data through a powerful API.

D3 uses HTML, CSS, and SVG to create visualizations which can be viewed on any modern browser.

Throughout this course you'll learn the most important features of D3 while building four different data visualizations. You'll play around with the code whenever you want, so that you can be sure that you understand how it works.

What you'll learn:- Selection, Data loading, Data joins, Attributes, Axes, Scales, Elements, Labels, Paths, Creating SVG elements, Creating bar charts, Creating pie charts, Creating line charts.

If you complete this course, you'll know how to use the following features of D3: select(), selectAll(), append(), text(), attr()- data(), enter()- d3.max(), d3.min()- height, width, x, y, transform, fill- rect, line, circle- axisBottom(), axisTop(), axisRight(), axisLeft(),scale(),scaleLinear(), domain(), range()...and much more!

This isn't a regular video course, it's a Scrimba course! This means you can interact with the code inside the tutorials whenever you want, which makes learning much more fun!

The instructor behind the course is the eminent Sohaib Nehal. Feel free to reach out to him via Twitter @Sohaib_Nehal if you have feedback or questions.

Join the Scrimba community chat!

Learning alone can be lonely. Click here to join our Discord server and connect with other Scrimba learners!

F to the A oracle to the Q
What is D3.js?

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’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Is D3.js easy to learn?

D3.js is a very powerful, yet simple, JavaScript library that allows you to play with and bring life to documents based on data using HTML, CSS, and SVG. There are a lot of good resources available online to learn D3.js. There is a free course on D3.js which we have created on Scrimba and is available for free here.

What is D3.js used for?

D3.js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of the widely implemented Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standards.