D3.js density.bandwidth() Function

Last Updated : 30 Sep, 2020

The density.bandwidth() function is used to set the bandwidth of the density estimator function. If the bandwidth is not specified then it sets the default bandwidth which is equal to 20.4939. If the bandwidth is specified then it sets the bandwidth of the gaussian kernel and returns the estimate.

Syntax:

d3.contourDensity.x().y().bandwidth([bandwidth]);

Parameters: This function takes one parameter as given above and described below.

bandwidth: This function takes a number that defines the bandwidth of the density estimator function.

Return Value: This function does not return anything.

Below given are a few examples of the density.bandwidth() function.

Example 1:

HTML

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="  
        width=device-width, initial-scale=1.0">  
  
    <script type="text/javascript"
        src="https://d3js.org/d3.v4.min.js">  
    </script>  
    <script src="https://d3js.org/d3-contour.v1.min.js"> 
    </script> 
</head>  
  
<body>  
    <h1 style="color:green">GeeksforGeeks</h1> 
      
    <script>  
        // append the svg object to the body. 
        var svg = d3.select("body") 
        .append("svg") 
            .attr("width", 500) 
            .attr("height", 500) 
        .append("g") 
            .attr("transform", 
                "translate(" + 20 + ", " + -80 + ")"); 
  
        // read data 
        d3.csv("./data.csv", function(data) { 
              
        var y = d3.scaleLinear() 
            .domain([-5, 30]) 
            .range([ 400, 100 ]); 
  
        var x = d3.scaleLinear() 
            .domain([0, 22]) 
            .range([ 0, 300]); 
  
  
        svg.append("g") 
        .call(d3.axisLeft(y)); 
          
        svg.append("g") 
            .attr("transform", "translate(0, " + 400 + ")") 
            .call(d3.axisBottom(x)); 
  
        var density= d3.contourDensity() 
            .y(function(d) { return y(d.y); }) 
            .x(function(d) { return x(d.x); }) 
            // Use of bandwidth() Function 
            .bandwidth(40) 
            (data) 
  
        svg.selectAll("path") 
            .data(density) 
            .enter() 
            .append("path") 
            .attr("d", d3.geoPath()) 
            .attr("fill", "none") 
            .attr("stroke", "green") 
        }); 
  
        // Data for csv file 
        // x, y, group 
        // 9.45, 4.4, H 
        // 9.1, 4.4, H 
        // 9.9, 9.9, H 
        // 9.6, 4.5, H 
        // 9.1, 9.7, H 
        // 4.7, 9.5, H 
        // 7.9, 9.6, H 
        // 4.7, 9.7, H 
        // 9.45, 4.4, H 
        // 12.1, 9.4, H 
        // 7.5, 9, H 
        // 4.5, 4.5, H 
        // 9.45, 9.7, H 
        // 4.45, 9.6, H 
        // 9.5, 7.6, H 
        // 9, 9.45, H 
        // 4.7, 12, H 
        // 9.7, 9.7, H 
        // 9.6, 9, H 
        // 12, 9, H 
        // 9.45, 4.5, H 
        // 9.9, 4.6, H 
        // 12.7, 9.9, H 
        // 9, 12.4, H 
        // 9, 4.9, H 
        // 9.5, 9.7, H 
        // 9.7, 4.7, H 
        // 9.9, 4.5, H 
        // 4, 4.5, H 
        // 7.9, 9, H 
        // 9.9, 9.45, H 
        // 9, 4.4, H 
        // 4.7, 9.7, H 
        // 4.5, 9.9, H 
    </script>  
</body> 
</html>  

Output:

Example 2:

HTML

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="  
        width=device-width, initial-scale=1.0">  
  
    <script type="text/javascript"
        src="https://d3js.org/d3.v4.min.js">  
    </script>  
    <script src="https://d3js.org/d3-contour.v1.min.js"> 
    </script> 
</head>  
  
<body>  
    <h1 style="color:green">GeeksforGeeks</h1> 
      
    <script>  
  
        // append the svg object to the body. 
        var svg = d3.select("body") 
        .append("svg") 
            .attr("width", 500) 
            .attr("height", 500) 
        .append("g") 
            .attr("transform", 
                "translate(" + 20 + ", " + -80 + ")"); 
  
        // read data 
        d3.csv("./data.csv", function(data) { 
              
        var y = d3.scaleLinear() 
            .domain([-5, 30]) 
            .range([ 400, 100 ]); 
  
        var x = d3.scaleLinear() 
            .domain([0, 22]) 
            .range([ 0, 300]); 
  
  
        svg.append("g") 
        .call(d3.axisLeft(y)); 
          
        svg.append("g") 
            .attr("transform", "translate(0, " + 400 + ")") 
            .call(d3.axisBottom(x)); 
  
        var density= d3.contourDensity() 
            .y(function(d) { return y(d.y); }) 
            .x(function(d) { return x(d.x); }) 
            // Use of bandwidth() Function 
            .bandwidth(10) 
            (data) 
  
        svg.selectAll("path") 
            .data(density) 
            .enter() 
            .append("path") 
            .attr("d", d3.geoPath()) 
            .attr("fill", "none") 
            .attr("stroke", "green") 
        }); 
  
        // Data for csv file 
        // x, y, group 
        // 9.45, 4.4, H 
        // 9.1, 4.4, H 
        // 9.9, 9.9, H 
        // 9.6, 4.5, H 
        // 9.1, 9.7, H 
        // 4.7, 9.5, H 
        // 7.9, 9.6, H 
        // 4.7, 9.7, H 
        // 9.45, 4.4, H 
        // 12.1, 9.4, H 
        // 7.5, 9, H 
        // 4.5, 4.5, H 
        // 9.45, 9.7, H 
        // 4.45, 9.6, H 
        // 9.5, 7.6, H 
        // 9, 9.45, H 
        // 4.7, 12, H 
        // 9.7, 9.7, H 
        // 9.6, 9, H 
        // 12, 9, H 
        // 9.45, 4.5, H 
        // 9.9, 4.6, H 
        // 12.7, 9.9, H 
        // 9, 12.4, H 
        // 9, 4.9, H 
        // 9.5, 9.7, H 
        // 9.7, 4.7, H 
        // 9.9, 4.5, H 
        // 4, 4.5, H 
        // 7.9, 9, H 
        // 9.9, 9.45, H 
        // 9, 4.4, H 
        // 4.7, 9.7, H 
        // 4.5, 9.9, H 
    </script>  
</body> 
</html>  