# Click-on feature on Observablehq Notebook **URL:** \ **Category:** Help\ **Created:** [August 1, 2022, 5:39pm UTC](https://talk.observablehq.com/t/click-on-feature-on-observablehq-notebook/6887 "2022-08-01T17:39:19Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![joyaircel2016](https://avatars.discourse-cdn.com/v4/letter/j/e56c9b/32.png) [@joyaircel2016](https://talk.observablehq.com/u/joyaircel2016)\ **Post date:** [August 1, 2022, 5:39pm UTC](https://talk.observablehq.com/t/click-on-feature-on-observablehq-notebook/6887/1 "2022-08-01T17:39:19Z")
Hello folks, Thank you so much for your assistance and suggestions in my previous inquiries. This time, I’m using the same notebook for a different problem. Currently, the code can compute the centroid point within the circle. **Now I want to create an algorithm that allows me to select and/or deselect circles by clicking on each one.** Finally, the selected circles will be cropped and saved on the local machine. **I’m not sure how to implement the click-on feature in Observablehq**. Any hints/guides/codes will be greatly appreciated. For your convenience, I’ve included the [link](https://observablehq.com/@1ac24a43f3551250/select-and-deselect-circles) to my notebook. ---
**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\ **Post date:** [August 1, 2022, 9:41pm UTC](https://talk.observablehq.com/t/click-on-feature-on-observablehq-notebook/6887/2 "2022-08-01T21:41:20Z")
If you want individual objects in your image to react to pointer events (like a mouse click), then it’s generally much easier to work with an SVG than with a canvas. With an SVG, you can tie events directly to the individual elements. Here’s a nice notebook that illustrates pointer interaction with an SVG: > **[Day 12 - Interactions 1 - Click and Hover](https://observablehq.com/@thetylerwolf/day-12-interactions-1-click-and-hover)** > > We can build charts and we can animate them, so now let's make them interactive! Today, we'll cover the simplest interactions - click and hover. 25 days of D3 This notebook is part of 25 Days of D3.js, a series of 25 lessons that will take you from... * * * When working with a canvas, you need to infer from the mouse coordinates which object you’re hovering over. Of course, that’s not so bad with circles but still much trickier than with SVG. Here’s a notebook that illustrates that: > **[Drag (Canvas View)](https://observablehq.com/@d3/hello-d3-drag)** > > A quick demo of d3-drag in Canvas. The circle positions are exposed as a view so that other cells in the notebook can react to dragging. ---
**Author:** ![joyaircel2016](https://avatars.discourse-cdn.com/v4/letter/j/e56c9b/32.png) [@joyaircel2016](https://talk.observablehq.com/u/joyaircel2016)\ **Post date:** [August 1, 2022, 10:41pm UTC](https://talk.observablehq.com/t/click-on-feature-on-observablehq-notebook/6887/3 "2022-08-01T22:41:24Z")
@mcmcclur Thanks for sharing the links. I’ll try to implement and update here. ---
**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\ **Post date:** [August 2, 2022, 12:26pm UTC](https://talk.observablehq.com/t/click-on-feature-on-observablehq-notebook/6887/4 "2022-08-02T12:26:48Z")
I had a quick play. The openCV mouse event doesn’t seem to be in the JS version as it’s part of the advanced UI or something like that. You could make an array containing the X Y width height of the area the circles are in and then compare where the mouse is on the image. I used the **center** of the circles to build and x y array but didn’t use that to make the array described above ( it maybe of use to you) I added id’s to the html so the img and canvas can be selected via D3 and attached a click event that returns the x,y position the mouse clicked on. I took off the html size styles as the html img/canvas are different sizes to those processed by openCV. If you used the styles then you would have to take the scale difference of the mouse positions over the image to the reference position on the openCV image. I hope that can help get you started. > **[Select and deselect circles](https://observablehq.com/d/747d788682529482)** ---
**Author:** ![joyaircel2016](https://avatars.discourse-cdn.com/v4/letter/j/e56c9b/32.png) [@joyaircel2016](https://talk.observablehq.com/u/joyaircel2016)\ **Post date:** [August 2, 2022, 8:01pm UTC](https://talk.observablehq.com/t/click-on-feature-on-observablehq-notebook/6887/5 "2022-08-02T20:01:54Z")
@hellonearthis Thanks for sharing the details. I’ll try to implement and update here. ---
**Author:** ![joyaircel2016](https://avatars.discourse-cdn.com/v4/letter/j/e56c9b/32.png) [@joyaircel2016](https://talk.observablehq.com/u/joyaircel2016)\ **Post date:** [September 20, 2022, 7:34pm UTC](https://talk.observablehq.com/t/click-on-feature-on-observablehq-notebook/6887/6 "2022-09-20T19:34:31Z")
@mcmcclur @hellonearthis I would like to say a big thank you to all of you for your valuable suggestions and sharing links. It took me a while to solve the issue. But I partially solved it now. If you click on any position of the image, you will get coordinate points. See my latest notebook [here](https://observablehq.com/@1ac24a43f3551250/select-and-deselect-circles). Now I am trying to add the new coordinate points based on clicks with the existing array, ie., final\_result[1]. Any help will be highly appreciated. Thanks a lot!