Open In App

D3.js density.thresholds() Function

Improve
Improve
Like Article
Like
Save
Share
Report

The density.thresholds() function is used to set the thresholds of the density estimator function. If the threshold is given then this sets the threshold generator to the specified function or array. If the thresholds are not given then this function returns the default threshold to the contour generator function.

Syntax:

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

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

  • thresholds: This parameter takes an array or function.

Return Value: This function does not return anything.

Below given are a few examples of the density.thresholds() 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>
</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 thresholds() Function
            .thresholds(3)
            (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>
</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 thresholds() Function
            .thresholds(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


Output:



Last Updated : 30 Sep, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads