block by pnavarrc 6275777

Bee Anatomy

Full Screen

Bee Anatomy

This gist is to show how to integrate a raster image and a svg overlay to create images that show the parts of an object. In this case, I show the main parts of the bee anatomy.

The svg image was created with Inkscape. First, the raster image is inserted in the svg file to draw the shapes. Then, each path is given an id to allow its identification in the web version. For instance, the forewings, the lines and the corresponding text are given ids to allow its identification and assignment of a class in the page.

WIth D3, we use mouseover and mouseout to show and hide the elements of the same class that the selected element.

Thanks to Joost Witteveen for sharing the photo of the bee with cc Attribution license.

index.html