Learn D3 for free

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.

10 lessons | 27 minutes

    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1>index.html</h1>
            <script src="index.pack.js"></script>
        </body>
    </html>

Introduction to D3

Sohaib Nehal1:52a year ago

    <html>
        <head>
            <link rel="stylesheet" href="index.css">
            <title>Learn D3.js</title>
        </head>
        <body>
            
            <h1>First heading</h1>
            
            <script src="https://d3js.org/d3.v4.min.js"></script>
            <script src="index.js"></script>
        </body>
    </html>

Selection and manipulation - D3 tutorial

Sohaib Nehal3:33a year ago

    // javascript
    var dataset = [1, 2, 3, 4, 5];
    
    d3.select('body')
        .selectAll('p')
        .data(dataset)
        .enter()
        .append('p') // appends paragraph for each data element
        .text('D3 is awesome!!');
        //.text(function(d) { return d; });

Data Loading and binding - D3 tutorial

Sohaib Nehal2:05a year ago

     // javascript
    var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];
    
    var svgWidth = 500, svgHeight = 300, barPadding = 5;
    var barWidth = (svgWidth / dataset.length);
    
    
    var svg = d3.select('svg')
        .attr("width", svgWidth)
        .attr("height", svgHeight);
        
    var barChart = svg.selectAll("rect")
        .data(dataset)
        .enter()

Creating a simple bar chart - D3 tutorial

Sohaib Nehal3:29a year ago

     // javascript
    var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];
    
    var svgWidth = 500, svgHeight = 300, barPadding = 5;
    var barWidth = svgWidth / dataset.length;
    var svg = d3.select('svg')
        .attr("width", svgWidth)
        .attr("height", svgHeight);
        
    var barChart = svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("y", function(d) {

Creating labels - D3 tutorial

Sohaib Nehal2:04a year ago

     // javascript
    var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];
    
    var svgWidth = 500, svgHeight = 400, barPadding = 5;
    
    var xScale = d3.scaleLinear()
    	.domain([0, dataset.length])
        .range([0, svgWidth]);
        
    var yScale = d3.scaleLinear()
    	.domain([0, d3.max(dataset)])
        .range([svgHeight, 0]);
    
    var svg = d3.select('svg')

Scales - D3 tutorial

Sohaib Nehal1:51a year ago

     // javascript
     
    var data= [80, 100, 56, 120, 180, 30, 40, 120, 160];
    
    var svgWidth = 500, svgHeight = 300;
    
    var svg = d3.select('svg')
        .attr("width", svgWidth)
        .attr("height", svgHeight);
    
    var xScale = d3.scaleLinear()
        .domain([0, d3.max(data)])
        .range([0, svgWidth]);

Axes - D3 tutorial

Sohaib Nehal2:20a year ago

     // javascript
    
    var svgWidth = 600, svgHeight = 500;
    var svg = d3.select("svg")
        .attr("width", svgWidth)
        .attr("height", svgHeight)
        .attr("class", "svg-container");
        
    var line = svg.append("line")
        .attr("x1", 100)
        .attr("x2", 500)
        .attr("y1", 50)
        .attr("y2", 50)
        .attr("stroke", "red")

Creating SVG elements - D3 tutorial

Sohaib Nehal2:49a year ago

    // javascript
    var data = [
        {"platform": "Android", "percentage": 40.11}, 
        {"platform": "Windows", "percentage": 36.69},
        {"platform": "iOS", "percentage": 13.06}
    ];
    
    var svgWidth = 500, svgHeight = 300, radius =  Math.min(svgWidth, svgHeight) / 2;
    var svg = d3.select('svg')
        .attr("width", svgWidth)
        .attr("height", svgHeight);
        
    var g = svg.append("g")
        .attr("transform", "translate(" + svgWidth / 2 + "," + svgHeight / 2 + ")");

Creating a pie chart - D3 tutorial

Sohaib Nehal1:18a year ago

    //API to fetch historical data of Bitcoin Price Index
    const api = 'https://api.coindesk.com/v1/bpi/historical/close.json?start=2017-12-31&end=2018-04-01';
    
    /**
     * Loading data from API when DOM Content has been loaded'.
     */
    document.addEventListener("DOMContentLoaded", function(event) {
    fetch(api)
        .then(function(response) { return response.json(); })
        .then(function(data) {
            var parsedData = parseData(data);
            drawChart(parsedData);
        })
        .catch(function(err) { console.log(err); })

Create a line chart - D3 tutorial

Sohaib Nehal5:14a year ago

Learn most popular data visualization library for the web 📈

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. It 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 JS while building four different data visualizations. You'll be able to play around with the code whenever you want, so that you can be sure that you'll 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 the D3js:

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!

And remember, 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 rech out to him via Twitter @Sohaub_Nehal if you have feedback or questions.

people love this course 😍

And we think you will as well.

why you'll learn faster 🔥

Scrimba is the ultimate code learning experience. Don't believe us? See what people say at Twitter or watch the screencast below and judge for yourself.

Hi, I'm your teacher 👋

Sohaib Nehal

Sohaib is a full-stack developer based i 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.

Thank Sohaib for the course

secure your free spot

Enroll to ensure that you'll have free life-time access to this course.

100,000 people can't be wrong

Well over one hundred thousand people have enrolled in Scrimba courses. And as you can see below, quite a few of them have had their minds blown.

Learn most popular data visualization library for the web 📈

Sohaib Nehal

Other courses