Voronoi based point picker style body min height 500 style script type text javascript src https d3js org d3 v7 min js script script type text javascript src https notebook xbdev net var scripts d3 geom js script div id chart div script type text javascript let w 700 let h 500 let vertices d3 range 100 map function d return Math random w Math random h let svg d3 select chart append svg svg attr width w attr height h let clips svg append svg g attr id point clips let points svg append svg g attr id points let paths svg append svg g attr id point paths clips selectAll clipPath data vertices enter append svg clipPath attr id function d i return clip i append svg circle attr cx function d return d 0 attr cy function d return d 1 attr r 20 paths selectAll path data d3 geom voronoi vertices enter append svg path attr d function d return M d join Z attr id function d i return path i attr clip path function d i return url clip i style fill d3 rgb 230 230 230 style fill opacity 0 4 style stroke d3 rgb 200 200 200 paths selectAll path on mouseover function n d i d3 select this style fill d3 rgb 31 120 180 svg select circle point i style fill d3 rgb 31 120 180 on mouseout function n d i d3 select this style fill d3 rgb 230 230 230 svg select circle point i style fill black points selectAll circle data vertices enter append svg circle attr id function d i return point i attr transform function d return translate d attr r 2 attr stroke none console log ready script
a d3 geom voronoi vertices enter append svg path attr d function d return M d join Z attr id function d i return path i attr clip path function d i return url clip i style fill d3 rgb 230 230 230 style fill opacity 0 4 style stroke d3 rgb 200 200 200 paths selectAll path on mouseover function n d i d3 select this style fill d3 rgb 31 120 180 svg select circle point i style fill d3 rgb 31 120 180 on mouseout function n d i d3 select this style fill d3 rgb 230 230 230 svg select circle point i style fill black points selectAll circle data vertices enter append svg circle attr id function d i return point i attr transform function d return translate d attr r 2 attr stroke none console log ready script