The d3.contourDensity() function is used to construct a new density estimator function with the default settings. A density estimator function estimates the density for the given set of data.
Syntax:
d3.contourDensity();
Parameters: This function does not take any parameters.
Return Value: This function returns a function.
Below given are a few examples of the function given above.
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> </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 densityData = d3.contourDensity() .y(function(d) { return y(d.y); }) .x(function(d) { return x(d.x); })(data) svg.selectAll("path") .data(densityData) .enter() .append("path") .attr("d", d3.geoPath()) .attr("fill", "none") .attr("stroke", "green") }); // Data for csv file // x, y, group // 11.45, 14.2, H // 11.1, 14.2, H // 11.9, 9.9, H // 11.6, 14.5, H // 11.1, 11.7, H // 14.7, 9.5, H // 7.9, 11.6, H // 14.7, 11.7, H // 11.45, 14.2, H // 12.1, 9.2, H // 7.5, 11, H // 14.5, 14.5, H // 11.45, 9.7, H // 14.45, 11.6, H // 11.5, 7.6, H // 11, 11.45, H // 14.7, 12, H // 11.7, 9.7, H // 9.6, 9, H // 12, 11, H // 11.45, 14.5, H // 11.11, 14.6, H // 12.7, 11.11, H // 11, 12.2, H // 11, 14.9, H // 9.5, 11.7, H // 11.7, 14.7, H // 11.9, 14.5, H // 14, 14.5, H // 7.11, 11, H // 11.11, 11.45, H // 11, 14.2, H // 14.7, 11.7, H // 14.5, 11.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> </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 densityData = d3.contourDensity() .y(function(d) { return y(d.y); }) .bandwidth(44) .x(function(d) { return x(d.x); })(data) svg.selectAll("path") .data(densityData) .enter() .append("path") .attr("d", d3.geoPath()) .attr("fill", "green") .attr("stroke", "black") }); // Data for csv file // x, y, group // 11.45, 14.2, H // 11.1, 14.2, H // 11.9, 9.9, H // 11.6, 14.5, H // 11.1, 11.7, H // 14.7, 9.5, H // 7.9, 11.6, H // 14.7, 11.7, H // 11.45, 14.2, H // 12.1, 9.2, H // 7.5, 11, H // 14.5, 14.5, H // 11.45, 9.7, H // 14.45, 11.6, H // 11.5, 7.6, H // 11, 11.45, H // 14.7, 12, H // 11.7, 9.7, H // 9.6, 9, H // 12, 11, H // 11.45, 14.5, H // 11.11, 14.6, H // 12.7, 11.11, H // 11, 12.2, H // 11, 14.9, H // 9.5, 11.7, H // 11.7, 14.7, H // 11.9, 14.5, H // 14, 14.5, H // 7.11, 11, H // 11.11, 11.45, H // 11, 14.2, H // 14.7, 11.7, H // 14.5, 11.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!
