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.

    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1>index.html</h1>
            <script src="index.pack.js"></script>
        </body>
    </html>
    <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>
    // 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; });
    
     // 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()
     // 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) {
     // 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')
     // 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]);
             
     // 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")
    // 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 + ")");
    //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); })

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.

what other people say

the ultimate code learning experience

MEET YOUR TEACHER

The course creator

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