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!
