D3.js density.cellSize() Function

Last Updated : 30 Sep, 2020

The density.cellSize() function is used to set the cell size of the density estimator function. If the cell size is given that this function sets the size of the individual cell. If the size of the cell is not given then it returns the current cell size which is equal to 4. Please note that, smaller the cell then more details are present in the contour polygon.

Syntax:

d3.contourDensity.cellSize([cellSize]);

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

cellSize: It takes a number that defines the cell size.

Return Value: This function does not return anything.

Note: Please create a file “data.csv” before going through the code.

Below given are a few examples of the density.cellSize() 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", 530) 
            .attr("height", 480) 
        .append("g") 
            .attr("transform", 
                "translate(" + 40 + ", " + -80 + ")"); 
  
        // read data 
        d3.csv("./data.csv", function(data) { 
              
        var y = d3.scaleLinear() 
            .domain([2, 30]) 
            .range([ 300, 100 ]); 
  
        var x = d3.scaleLinear() 
            .domain([2, 22]) 
            .range([ 0, 200]); 
  
  
        svg.append("g") 
        .call(d3.axisLeft(y)); 
          
        svg.append("g") 
            .attr("transform", "translate(0, " + 300 + ")") 
            .call(d3.axisBottom(x)); 
  
        var density= d3.contourDensity() 
            .y(function(d) { return y(d.y); }) 
            .x(function(d) { return x(d.x); }) 
            // Use of cellSize() Function 
            .cellSize(100) 
            (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, 14.14, H 
        // 9.1, 14.14, H 
        // 9.9, 9.9, H 
        // 9.6, 14.5, H 
        // 9.1, 9.7, H 
        // 14.7, 9.5, H 
        // 7.9, 9.6, H 
        // 14.7, 9.7, H 
        // 9.45, 14.14, H 
        // 12.1, 9.14, H 
        // 7.5, 9, H 
        // 14.5, 14.5, H 
        // 9.45, 9.7, H 
        // 14.45, 9.6, H 
        // 9.5, 7.6, H 
        // 9, 9.45, H 
        // 14.7, 12, H 
        // 9.7, 9.7, H 
        // 9.6, 9, H 
        // 12, 9, H 
        // 9.45, 14.5, H 
        // 9.9, 14.6, H 
        // 12.7, 9.9, H 
        // 9, 12.14, H 
        // 9, 14.9, H 
        // 9.5, 9.7, H 
        // 9.7, 14.7, H 
        // 9.9, 14.5, H 
        // 14, 14.5, H 
        // 7.9, 9, H 
        // 9.9, 9.45, H 
        // 9, 14.14, H 
        // 14.7, 9.7, H 
        // 14.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", 530) 
            .attr("height", 480) 
        .append("g") 
            .attr("transform", 
                "translate(" + 40 + ", " + -80 + ")"); 
  
        // read data 
        d3.csv("./data.csv", function(data) { 
              
        var y = d3.scaleLinear() 
            .domain([2, 30]) 
            .range([ 300, 100 ]); 
  
        var x = d3.scaleLinear() 
            .domain([2, 22]) 
            .range([ 0, 200]); 
  
  
        svg.append("g") 
        .call(d3.axisLeft(y)); 
          
        svg.append("g") 
            .attr("transform", "translate(0, " + 300 + ")") 
            .call(d3.axisBottom(x)); 
  
        var density= d3.contourDensity() 
            .y(function(d) { return y(d.y); }) 
            .x(function(d) { return x(d.x); }) 
            .bandwidth(15) 
            // Use of cellSize() Function 
            .cellSize(50) 
            (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, 14.14, H 
        // 9.1, 14.14, H 
        // 9.9, 9.9, H 
        // 9.6, 14.5, H 
        // 9.1, 9.7, H 
        // 14.7, 9.5, H 
        // 7.9, 9.6, H 
        // 14.7, 9.7, H 
        // 9.45, 14.14, H 
        // 12.1, 9.14, H 
        // 7.5, 9, H 
        // 14.5, 14.5, H 
        // 9.45, 9.7, H 
        // 14.45, 9.6, H 
        // 9.5, 7.6, H 
        // 9, 9.45, H 
        // 14.7, 12, H 
        // 9.7, 9.7, H 
        // 9.6, 9, H 
        // 12, 9, H 
        // 9.45, 14.5, H 
        // 9.9, 14.6, H 
        // 12.7, 9.9, H 
        // 9, 12.14, H 
        // 9, 14.9, H 
        // 9.5, 9.7, H 
        // 9.7, 14.7, H 
        // 9.9, 14.5, H 
        // 14, 14.5, H 
        // 7.9, 9, H 
        // 9.9, 9.45, H 
        // 9, 14.14, H 
        // 14.7, 9.7, H 
        // 14.5, 9.9, H 
    </script>  
</body>  
  
</html>  