This is a section of code that I'm writing for a talk next week (the post meant as a preview), so I'll have a fully working version up and running before too long. You can check my personal Github (rhgeek) but I'll also be sure to come back and post a direct link for you once it's ready to let you know.
From right clicking and inspecting (combined with a little googling of class names) it looks like they specifically using a tool called image map pro for wordpress. Now, with that said, you could recreate that functionality yourself. How it is done from a technical level is they load an image, based on if you want skull, muscles, etc and then overlay and SVG on top of it. If you inspect, you’ll see a lot of polygons. What it creates is shapes over the image to define the area you want to show a div with more information, like a tooltip. So they draw a shape over the image to represent what is the frontal bone and when you hover they show the div with all the text about it.
You could create something like this yourself with D3 or with SVG directly. D3 can give you the code to create those pieces and interaction. It would depend on the overall goals that it might be more of a hybrid solution, or maybe on that doesn’t even need D3. The most difficult part in this particular example would be defining the regions to match your region, since it’s over top of a fixed image. That is something their tool obviously does, and I think you could likely google and fine tools to help you define that as well to then be used by other code.
Authored Comments
JJ,
This is a section of code that I'm writing for a talk next week (the post meant as a preview), so I'll have a fully working version up and running before too long. You can check my personal Github (rhgeek) but I'll also be sure to come back and post a direct link for you once it's ready to let you know.
From right clicking and inspecting (combined with a little googling of class names) it looks like they specifically using a tool called image map pro for wordpress. Now, with that said, you could recreate that functionality yourself. How it is done from a technical level is they load an image, based on if you want skull, muscles, etc and then overlay and SVG on top of it. If you inspect, you’ll see a lot of polygons. What it creates is shapes over the image to define the area you want to show a div with more information, like a tooltip. So they draw a shape over the image to represent what is the frontal bone and when you hover they show the div with all the text about it.
You could create something like this yourself with D3 or with SVG directly. D3 can give you the code to create those pieces and interaction. It would depend on the overall goals that it might be more of a hybrid solution, or maybe on that doesn’t even need D3. The most difficult part in this particular example would be defining the regions to match your region, since it’s over top of a fixed image. That is something their tool obviously does, and I think you could likely google and fine tools to help you define that as well to then be used by other code.
Hope that helps put you down the right path.