Learn D3.js for free

    <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.js

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

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

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

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

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

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

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

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

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

Sohaib Nehal5:14a year ago

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.

Learn to visualize data and build charts like a pro

What people are saying about Scrimba:

Learn to visualize data and build charts like a pro

What people are saying about Scrimba:

Related courses