D3 js Scatter Plot with Brush Welection region block from mouse or coords style body min height 600px margin 0 style script type text javascript src https d3js org d3 v7 min js script script Set Dimensions const xSize 600 const ySize 600 const margin 40 const xMax xSize margin 2 const yMax ySize margin 2 Create Random Points const numPoints 100 const data for let i 0 i numPoints i data push Math random xMax Math random yMax Append SVG Object to the Page const svg d3 select body append svg attr width xSize attr height ySize append g attr transform translate margin margin X Axis const x d3 scaleLinear domain 0 500 range 0 xMax bottom svg append g attr transform translate 0 yMax call d3 axisBottom x attr color green make bottom axis green top svg append g call d3 axisTop x Y Axis const y d3 scaleLinear domain 0 500 range yMax 0 left y axis svg append g call d3 axisLeft y right y axis svg append g attr transform translate yMax 0 call d3 axisRight y Dots svg append g selectAll dot data data enter append circle attr cx function d return d 0 attr cy function d return d 1 attr r 3 style fill blue Selection part of the code click and drag the mouse to see const brush d3 brush on start brush end brushed svg call brush function brushed selection console log selection selection console log ready script D3 js Scatter Plot with Brush Welection region block from mouse or coords style body min height 600px margin 0 style script type text javascript src https d3js org d3 v7 min js script script Set Dimensions const xSize 600 const ySize 600 const margin 40 const xMax xSize margin 2 const yMax ySize margin 2 Create Random Points const numPoints 100 const data for let i 0 i numPoints i data push x Math random xMax y Math random yMax Append SVG Object to the Page const svg d3 select body append svg attr width xSize attr height ySize append g attr transform translate margin margin X Axis const x d3 scaleLinear domain 0 500 range 0 xMax bottom svg append g attr transform translate 0 yMax call d3 axisBottom x attr color green make bottom axis green top svg append g call d3 axisTop x Y Axis const y d3 scaleLinear domain 0 500 range yMax 0 left y axis svg append g call d3 axisLeft y right y axis svg append g attr transform translate yMax 0 call d3 axisRight y Dots svg append g selectAll dot data data enter append circle attr class dot attr cx function d return d x attr cy function d return d y attr r 3 style fill blue const brush d3 brush on start brush end brushed svg call brush function brushed selection let dot svg selectAll dot let value if selection const x0 y0 x1 y1 selection value dot style fill gray filter d return x0 d x d x x1 y0 d y d y y1 style fill red else dot style fill blue selected items are in value uncomment to test value style fill purple console log ready script
Size 600 const margin 40 const xMax xSize margin 2 const yMax ySize margin 2 Create Random Points const numPoints 100 const data for let i 0 i numPoints i data push x Math random xMax y Math random yMax Append SVG Object to the Page const svg d3 select body append svg attr width xSize attr height ySize append g attr transform translate margin margin X Axis const x d3 scaleLinear domain 0 500 range 0 xMax bottom svg append g attr transform translate 0 yMax call d3 axisBottom x attr color green make bottom axis green top svg append g call d3 axisTop x Y Axis const y d3 scaleLinear domain 0 500 range yMax 0 left y axis svg append g call d3 axisLeft y right y axis svg append g attr transform translate yMax 0 call d3 axisRight y Dots svg append g selectAll dot data data enter append circle attr class dot attr cx function d return d x attr cy function d return d y attr r 3 style fill blue const brush d3 brush on start brush end brushed svg call brush function brushed selection let dot svg selectAll dot let value if selection const x0 y0 x1 y1 selection value dot style fill gray filter d return x0 d x d x x1 y0 d y d y y1 style fill red else dot style fill blue selected items are in value uncomment to test value style fill purple console log ready script