Brush Functionality in Scatter plot.

[ghost]

Hi,
I tried the given example of brushing in scatter plot. I created the plot with number values on x and y axis and added the brush into that. In this case brushing works properly. Below is the code and gif for the same.

`

<script src="https://d3js.org/d3.v4.js"></script>

<style> .selected { opacity: 1 !important; stroke: red; stroke-width: 1px; } </style> <script> let data = [ { "name": 21, "value": 2 }, { "name": 31, "value": 12 }, { "name": 41, "value": 22 }, ] // set the dimensions and margins of the graph var margin = { top: 10, right: 30, bottom: 30, left: 60 }, width = 460 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; // append the svg object to the body of the page var svg = d3.select("#dataviz_brushZoom") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const x = d3.scaleLinear() .domain([d3.max(data, function (d) { return d.value; }), 0]) .range([width, 0]); svg.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)); // Add Y axis const y = d3.scaleLinear() .domain([0, d3.max(data, function (d) { return d.name; })]) .range([height, 0]); svg.append("g") .call(d3.axisLeft(y)); svg .call(d3.brush() // Add the brush feature using the d3.brush function .extent([[0, 0], [width, height]]) // initialise the brush area: start at 0,0 and finishes at width,height: it means I select the whole graph area .on("start brush", updateChart) // Each time the brush selection changes, trigger the 'updateChart' function ) // Function that is triggered when brushing is performed function updateChart() { extent = d3.event.selection myCircle.classed("selected", function (d) { return isBrushed(extent, x(d.value), y(d.name)) }) } // A function that return TRUE or FALSE according if a dot is in the selection or not function isBrushed(brush_coords, cx, cy) { var x0 = brush_coords[0][0], x1 = brush_coords[1][0], y0 = brush_coords[0][1], y1 = brush_coords[1][1]; return x0 <= cx && cx <= x1 && y0 <= cy && cy <= y1; // This return TRUE or FALSE depending on if the points is in the selected area } let myCircle = svg.append('g') .selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", function (d) { return x(d.value); }) .attr("cy", function (d) { return y(d.name); }) .attr("r", 7) .style("fill", "black") </script>`

After that I created the plot with string data that is on y axis added the string values. But in this case the brushing is not works properly. In the number values plot when we extent the brush in small portion it adds the brush but in the string case when the brush extent to small it will not add brush and when we extent to large portion then it will add. So we get an wrong behavior in string values. Below is the code and gif for the same.

`

<script src="https://d3js.org/d3.v4.js"></script>

<style> .selected { opacity: 1 !important; stroke: red; stroke-width: 1px; } </style> <script> let data = [ { "name": 'one', "value": 2 }, { "name": 'two', "value": 12 }, { "name": 'three', "value": 5 }, { "name": 'four', "value": 10 }, { "name": 'five', "value": 7 }, ] // set the dimensions and margins of the graph var margin = { top: 10, right: 30, bottom: 30, left: 60 }, width = 460 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; // append the svg object to the body of the page var svg = d3.select("#dataviz_brushZoom") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const x = d3.scaleLinear() .domain([d3.max(data, function (d) { return d.value; }), 0]) .range([width, 0]); svg.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)); // Add Y axis const y = d3.scaleBand() .domain(data.map(function (d) { return (d.name); })) .range([height, 0]); svg.append("g") .call(d3.axisLeft(y)); svg .call(d3.brush() // Add the brush feature using the d3.brush function .extent([[0, 0], [width, height]]) // initialise the brush area: start at 0,0 and finishes at width,height: it means I select the whole graph area .on("start brush", updateChart) // Each time the brush selection changes, trigger the 'updateChart' function ) // Function that is triggered when brushing is performed function updateChart() { extent = d3.event.selection myCircle.classed("selected", function (d) { return isBrushed(extent, x(d.value), y(d.name)) }) } // A function that return TRUE or FALSE according if a dot is in the selection or not function isBrushed(brush_coords, cx, cy) { var x0 = brush_coords[0][0], x1 = brush_coords[1][0], y0 = brush_coords[0][1], y1 = brush_coords[1][1]; return x0 <= cx && cx <= x1 && y0 <= cy && cy <= y1; // This return TRUE or FALSE depending on if the points is in the selected area } let myCircle = svg.append('g') .selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", function (d) { return x(d.value); }) .attr("cy", function (d) { return y(d.name) + y.bandwidth() / 2; }) .attr("r", 7) .style("fill", "black") .style("opacity", 0.5) </script>`

So can you please provide an sample example of string values for scatter plot creation with brushing functionality.