Learn D3.js for free

This course contains ten tutorials on how to create data visualizations with D3. It's perfect for anyone who wants to learn to build charts for the web.

    <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')
Sohaib Nehal1:5111 months 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]);
             
Sohaib Nehal2:2011 months 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")
    // 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); })

Learn to visualize data and build charts like a pro


D3js is the most popular data visualization library for the web. 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 API:

  • 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 people are saying about Scrimba: