The density.x() function is used to set the x-coordinate accessor. If the x is not specified then this function returns the current x-coordinate accessor.
Syntax:
d3.contourDensity.x([x]);
Parameters: This function takes one parameter as given above and described below:
- x: It is the value for the x-coordinate accessor.
Return Value: This function returns a number.
Below given are a few examples of the density.x() function.
Example 1:
<!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"    </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 + ", " + 0 + ")");           // Read data         d3.csv("./data.csv", function(data) {                       var y = d3.scaleLinear()             .domain([5, 30])             .range([ 450, 10 ]);           var x = d3.scaleLinear()             .domain([5, 22])             .range([ 0, 460]);             svg.append("g")         .call(d3.axisLeft(y));                   svg.append("g")             .attr("transform",                   "translate(0, " + 450 + ")")             .call(d3.axisBottom(x));           var density= d3.contourDensity()             .y(function(d) { return y(d.y); })             .bandwidth(25)               // Use of density.x() function             .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:
Example 2:
<!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"    </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 + ", " + 0 + ")");           // Read data         d3.csv("./data.csv", function(data) {                       var y = d3.scaleLinear()             .domain([5, 30])             .range([ 450, 10 ]);           var x = d3.scaleLinear()             .domain([5, 22])             .range([ 0, 460]);             svg.append("g")         .call(d3.axisLeft(y));                   svg.append("g")             .attr("transform", "translate(0, " + 450 + ")")             .call(d3.axisBottom(x));           var density= d3.contourDensity()             .y(function(d) { return y(d.y); })             .bandwidth(25)               // Use of density.x() function             .x(function(d) { return x(d.x); })(data)           svg.selectAll("path")             .data(density)             .enter()             .append("path")             .attr("d", d3.geoPath())             .attr("fill", "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!
