Monday, November 18, 2024
Google search engine
HomeLanguagesJavascriptD3.js density.weight() Function

D3.js density.weight() Function

The density.weight() function is used to set the weight accessor of the density contour estimator function. If the weight is given then this function sets the accessor for the point weights else it sets the accessor to the default value of 1.

Syntax:

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

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

  • weight: It takes a number that is used to set the accessor for the point weights.

Return Value: This function does not return anything.

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

Example1:




<!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=
     </script>
</head
  
<body
    <h1 style="color:green">neveropen</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); })
            .bandwidth(15)
            // Use of weight function 
            .weight(0.007)
            .x(function(d) { return x(d.x); })(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:

Example2:




<!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=
    </script>
</head
  
<body
    <h1 style="color:green">neveropen</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); })
            .bandwidth(15)
            // Use of weight function 
            .weight(48888)
            .x(function(d) { return x(d.x); })(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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

RELATED ARTICLES

Most Popular

Recent Comments