Skip to content

Instantly share code, notes, and snippets.

@pnavarrc

pnavarrc/README.md

Last active September 17, 2017 12:40
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pnavarrc/6275777 to your computer and use it in GitHub Desktop.
Save pnavarrc/6275777 to your computer and use it in GitHub Desktop.
Download ZIP
Bee Anatomy
Raw
README.md

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.

Display the source blob
Display the rendered blob
Raw
anatomy.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="1024"
height="684"
id="svg2"
version="1.1"
inkscape:version="0.48.2 r9819"
sodipodi:docname="anatomy.svg">
<defs
id="defs4">
<marker
inkscape:stockid="DotS"
orient="auto"
refY="0.0"
refX="0.0"
id="DotS"
style="overflow:visible">
<path
id="path4009"
d="M -2.5,-1.0 C -2.5,1.7600000 -4.7400000,4.0 -7.5,4.0 C -10.260000,4.0 -12.5,1.7600000 -12.5,-1.0 C -12.5,-3.7600000 -10.260000,-6.0 -7.5,-6.0 C -4.7400000,-6.0 -2.5,-3.7600000 -2.5,-1.0 z "
style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none;marker-end:none"
transform="scale(0.2) translate(7.4, 1)" />
</marker>
<marker
inkscape:stockid="DotM"
orient="auto"
refY="0.0"
refX="0.0"
id="DotM"
style="overflow:visible">
<path
id="path4006"
d="M -2.5,-1.0 C -2.5,1.7600000 -4.7400000,4.0 -7.5,4.0 C -10.260000,4.0 -12.5,1.7600000 -12.5,-1.0 C -12.5,-3.7600000 -10.260000,-6.0 -7.5,-6.0 C -4.7400000,-6.0 -2.5,-3.7600000 -2.5,-1.0 z "
style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none;marker-end:none"
transform="scale(0.4) translate(7.4, 1)" />
</marker>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.83967785"
inkscape:cx="327.82495"
inkscape:cy="229.28509"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1362"
inkscape:window-height="724"
inkscape:window-x="4"
inkscape:window-y="0"
inkscape:window-maximized="1"
showguides="true"
inkscape:guide-bbox="true"
inkscape:snap-global="true">
<sodipodi:guide
orientation="1,0"
position="855.59921,351.53309"
id="guide3876" />
<sodipodi:guide
orientation="1,0"
position="201.02036,460.62956"
id="guide3888" />
<sodipodi:guide
orientation="0,1"
position="588.91893,454.56865"
id="guide3904" />
<sodipodi:guide
orientation="0,1"
position="611.14229,387.89858"
id="guide3906" />
<sodipodi:guide
orientation="0,1"
position="603.06107,315.16759"
id="guide3908" />
<sodipodi:guide
orientation="0,1"
position="644.47732,239.40615"
id="guide3910" />
<sodipodi:guide
orientation="0,1"
position="704.28572,174.28571"
id="guide3912" />
<sodipodi:guide
orientation="0,1"
position="725.28953,109.09647"
id="guide3914" />
<sodipodi:guide
orientation="1,0"
position="41.416254,647.50778"
id="guide3920" />
<sodipodi:guide
orientation="0,1"
position="86.873119,46.467017"
id="guide3922" />
<inkscape:grid
type="xygrid"
id="grid3930" />
</sodipodi:namedview>
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-53.714287,-113.21932)">
<path
style="opacity:0.80000000000000004;fill:#cccccc;stroke:#666666;stroke-width:2.50000000000000000;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;marker-end:none;marker-start:none"
d="M 392.85714,423.28571 C 386.11974,397.74394 425.47772,402.04425 417.5,424 c 12.84412,15.70528 11.63854,31.41055 9.44897,47.11583 -7.88549,24.43154 9.14486,24.5913 17.69388,38.12778 -3.63654,-0.0367 -17.89609,-0.007 -11.4633,7.93109 5.21307,4.79064 3.74464,13.34304 4.32045,20.39673 5.61801,9.15652 3.60258,13.73297 5,20.35714 l -14.28571,9.64286 c -5.71109,-8.80193 -12.92255,-6.14944 -16.42858,-31.78572 -4.29128,-9.30806 -14.07721,-16.37841 -12.5,-43.57142 -5.80175,-20.64781 -10.91474,-41.73391 -6.42857,-68.92858 z"
id="foreleg-main"
inkscape:connector-curvature="0"
transform="translate(53.714287,113.21932)"
sodipodi:nodetypes="ccccccccccc"
inkscape:label="#path3926" />
<path
style="opacity:0.80000000000000004;fill:#cccccc;stroke:#666666;stroke-width:2.50000000000000000;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;marker-end:none;marker-start:none"
d="m 493.21428,444.59385 -7.49999,-19.87957 c 10.87674,-21.0933 38.58968,-29.94352 42.12203,5.92379 21.86055,30.40255 -8.99682,21.21761 -8.24633,41.73657 -0.64576,21.02092 -12.4069,34.69917 -24.94713,47.69679 -6.84247,23.38934 -16.7442,34.8481 -30,45.35714 -22.52214,-0.0215 -45.76044,29.50907 -39.28571,44.64286 -6.46883,-3.34021 -11.25511,-0.41845 -18.57143,-13.92858 -0.9907,-3.83535 -0.19835,-6.99269 3.1986,-12.58616 5.67409,-9.34307 16.97944,-23.00088 30.37283,-33.8424 3.87869,-13.49023 9.07554,-26.98045 21.42856,-40.47068 7.34778,-29.31574 14.41278,-41.61342 31.42857,-64.64976 z"
id="middleleg-main"
inkscape:connector-curvature="0"
transform="translate(53.714287,113.21932)"
sodipodi:nodetypes="ccccccccsccc"
inkscape:label="#path3924" />
<path
style="opacity:0.80000000000000004;fill:#cccccc;stroke:#666666;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;marker-end:none;marker-start:none"
d="m 511.42857,396.14286 c 5.20191,-5.1901 10.37339,-10.59325 14.64286,-22.31045 31.61493,5.61745 74.96518,6.7958 113.92857,8.73902 66.79553,66.53701 56.00803,102.26238 65,130.24361 10.955,18.58133 30.30616,59.45872 18.57143,77.97067 l 4.28571,11.78572 c 1.45282,7.59958 8.05745,10.44245 11.75474,16.35869 5.86811,9.38989 9.83765,21.09657 15.38812,30.72469 -9.0374,-5.74602 -20.93194,-24.48888 -24.96934,-11.75986 -5.4839,-7.32363 -13.11065,-22.38269 -18.59455,-22.88832 -11.6949,-0.99429 -11.03569,-13.23356 -15.72182,-18.50663 -23.41871,-17.21418 -40.26742,-50.90228 -46.78572,-81.5421 -3.0506,-13.39725 -9.42357,-15.52081 -11.60811,-50.56947 1.43027,-14.85401 -3.99899,-35.65474 -10.1776,-51.45986 -44.6564,18.35783 -84.80821,-0.43913 -115.71429,-16.78571 z"
id="hindleg-main"
inkscape:connector-curvature="0"
transform="translate(53.714287,113.21932)"
sodipodi:nodetypes="ccccccscccccccc"
inkscape:label="#path3928" />
<path
style="fill:#cccccc;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;opacity:0.80000000000000004;marker-end:none;marker-start:none"
d="M 383.02401,449.72684 C 368.66594,371.80797 485.87018,309.29395 532.5266,348.7116 c 38.53242,38.53713 57.2255,79.2589 50.50762,122.22845 0.37704,30.0213 -50.59674,84.6994 -86.87312,70.71068 -44.21036,-5.06944 -99.51469,-38.20504 -113.13709,-91.92389 z"
id="thorax-main"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc"
inkscape:label="#path3058" />
<path
style="opacity:0.80000000000000004;fill:#cccccc;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:none;marker-start:none"
d="m 707.28572,627.93362 c 16.11983,11.42257 30.68325,9.69261 46.78571,1.07142 19.24732,24.11328 21.1484,46.89249 21.78572,68.21428 -4.72105,4.1592 -9.87183,8.14651 -23.92857,8.57143 -25.12889,-19.75233 -39.95195,-52.24095 -44.64286,-77.85713 z"
id="metatharsus-main"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc"
inkscape:label="#path3066" />
<path
style="opacity:0.80000000000000004;fill:#cccccc;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:none;marker-start:none"
d="m 483.57143,236.5 c 112.8175,-105.11561 408.8933,-28.58957 293.57142,73.57143 -42.55777,32.75791 -176.51644,56.4388 -244.28571,41.42857 0.54591,-47.7206 -12.16289,-75.25645 -49.28571,-115 z"
id="abdomen-main"
inkscape:connector-curvature="0"
transform="translate(53.714287,113.21932)"
sodipodi:nodetypes="cccc"
inkscape:label="#path3092" />
<path
style="opacity:0.80000000000000004;fill:#cccccc;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:none;marker-start:none"
d="m 455.65783,388.1942 c 51.60456,-55.63997 78.8782,-82.22071 138.45217,-125.34557 127.28749,-88.52457 105.33114,-1.77576 67.17515,35.86041 -64.96154,51.74305 -137.55703,46.83163 -198.26038,95.12766 -0.28132,-3.56323 -1.71002,-4.76707 -7.36694,-5.6425 z"
id="hindwing-r"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc"
inkscape:label="#path3089" />
<path
style="opacity:0.80000000000000004;fill:#cccccc;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:none;marker-start:none"
d="m 334.44715,360.27149 c -26.2447,-23.00051 -55.27117,-21.33248 -71.80749,-1.54061 -24.55238,26.68778 -20.00441,48.41391 -5.82632,67.08849 20.51655,31.06508 44.09526,49.1606 65.9304,65.72119 70.19991,48.68178 68.58027,-24.17856 63.63961,-79.27159 -28.80369,-15.57856 -39.97971,-35.12298 -51.9362,-51.99748 z"
id="head-main"
inkscape:connector-curvature="0"
transform="translate(53.714287,113.21932)"
sodipodi:nodetypes="cccccc"
inkscape:label="#path3098" />
<path
style="opacity:0.80000000000000004;fill:#cccccc;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:none;marker-start:none"
d="m 381.63876,504.72632 c 28.82519,-3.63882 60.32415,66.27059 36.99313,79.09828 -33.03815,16.34936 -72.18716,-73.86066 -36.99313,-79.09828 z"
id="eye-main"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc"
inkscape:label="#path3056" />
<path
style="fill:#cccccc;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;opacity:0.80000000000000004;marker-end:none;marker-start:none"
d="m 699.6608,594.20921 c 7.38434,0.81223 14.1656,-2.29251 18.19634,-4.16316 8.94582,8.96206 4.50672,14.56412 7.94645,19.69996 2.15889,3.22343 6.24891,4.88613 8.58189,8.74686 3.70043,6.00526 8.34343,14.92999 12.75738,20.50713 -7.14533,-6.36566 -19.88565,-23.96576 -17.35207,-7.93637 -2.62668,-4.04901 -3.49981,-8.9748 -8.52151,-11.8263 -4.13103,-13.73116 -9.62209,-1.58168 -15.10562,-13.41528 -0.86675,-4.62164 -3.63197,-8.49363 -6.50286,-11.61284 z"
id="tharsus-main"
inkscape:connector-curvature="0"
transform="translate(53.714287,113.21932)"
sodipodi:nodetypes="ccscccccc"
inkscape:label="#path3096" />
<path
style="opacity:0.80000000000000004;fill:#cccccc;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:none;marker-start:none"
d="m 332.51639,552.50986 c -13.58251,-8.85271 -28.2444,-18.75612 -42.42641,-22.47589 -29.23648,-0.13119 -57.80099,0.31958 -86.36804,3.53553 -9.27239,0.75926 -18.55822,2.10848 -30.80965,-1.01015 -7.69243,0.39965 -4.05801,6.16179 -4.29315,10.10153 9.42809,2.46309 18.85618,2.39851 28.28427,1.51522 29.28117,-3.8835 58.72664,-6.59842 90.15612,-6.06091 16.96011,5.1636 26.42533,10.37891 41.41624,18.94036 11.25409,4.86011 8.65535,-5.63136 4.04062,-4.54569 z"
id="antennae-r"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc"
inkscape:label="#path3103" />
<path
style="opacity:0.80000000000000004;fill:#cccccc;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:none;marker-start:none"
d="m 302.54069,457.22075 c -8.58629,5.05077 -13.30035,12.03765 -11.36422,22.4759 0.86049,6.24797 0.83845,8.83548 -0.75761,15.40482 -2.61457,39.00964 -4.11953,50.64178 -5.80838,76.01398 0.98025,4.70777 1.40892,10.33484 4.29315,11.8693 2.27728,1.27602 4.26442,1.68161 4.54568,-3.03046 -0.84179,-2.55046 -1.68359,-5.87868 -2.52538,-11.11168 -0.5565,-23.8446 2.76125,-47.74666 6.56599,-73.23606 -2.25175,-5.85205 -0.93915,-11.28333 1.76777,-14.89975 -0.8613,-9.17555 2.18275,-13.30034 6.81853,-19.95051 0.44919,-3.21314 -1.31931,-3.65417 -3.53553,-3.53554 z"
id="antennae-l"
inkscape:connector-curvature="0"
transform="translate(53.714287,113.21932)"
sodipodi:nodetypes="ccccccccccc"
inkscape:label="#path3101" />
<path
style="opacity:0.80000000000000004;fill:#cccccc;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:none;marker-start:none"
d="M 465,341.5 C 523.60804,299.20146 543.6288,239.7553 599.28571,199 726.96828,118.80128 737.22744,175.15728 654.27492,242.39111 610.79026,277.63586 532.12972,319.33208 475.35715,351.85715 474.89307,347.40866 471.05649,344.08434 465,341.5 z"
id="hindwing-l"
inkscape:connector-curvature="0"
transform="translate(53.714287,113.21932)"
sodipodi:nodetypes="ccscc"
inkscape:label="#path3094" />
<path
style="fill:none;stroke:#666666;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-end:none"
d="m 640,149 205,0 0,65 -150,0"
id="hindwing-arrow-r"
inkscape:connector-curvature="0"
transform="translate(53.714287,113.21932)"
sodipodi:nodetypes="cccc"
inkscape:label="#path3872" />
<path
style="fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-end:none"
d="m 923.71429,297.21932 -25,0"
id="hindwing-arrow-l"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc"
inkscape:label="#path3874" />
<path
style="fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-end:none"
d="m 810,269 60,0"
id="abdomen-arrow"
inkscape:connector-curvature="0"
transform="translate(53.714287,113.21932)"
sodipodi:nodetypes="cc"
inkscape:label="#path3878" />
<path
style="fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-end:none"
d="m 720,539 145,0"
id="metatharsus-arrow"
inkscape:connector-curvature="0"
transform="translate(53.714287,113.21932)"
sodipodi:nodetypes="cc"
inkscape:label="#path3884" />
<path
style="fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-end:none"
d="m 730,604 135,0"
id="tharsus-arrow"
inkscape:connector-curvature="0"
transform="translate(53.714287,113.21932)"
sodipodi:nodetypes="cc"
inkscape:label="#path3886" />
<path
style="fill:none;fill-opacity:1;stroke:#666666;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-end:none"
d="M 201.02036,219 365,219 l 0,25"
id="thorax-arrow"
inkscape:connector-curvature="0"
transform="translate(53.714287,113.21932)"
sodipodi:nodetypes="ccc"
inkscape:label="#path3890" />
<path
style="fill:none;fill-opacity:1;stroke:#666666;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-end:none"
d="M 201.02036,324 295,324 l 0,15"
id="head-arrow"
inkscape:connector-curvature="0"
transform="translate(53.714287,113.21932)"
sodipodi:nodetypes="ccc"
inkscape:label="#path3892" />
<path
style="fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-end:none"
d="m 200,404 106.07622,-0.82241"
id="eye-arrow"
inkscape:connector-curvature="0"
transform="translate(53.714287,113.21932)"
sodipodi:nodetypes="cc"
inkscape:label="#path3894" />
<path
style="fill:none;fill-opacity:1;stroke:#666666;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-end:none"
d="m 235,434 -15,0 0,110 50,0"
id="antennae-arrow-r"
inkscape:connector-curvature="0"
transform="translate(53.714287,113.21932)"
sodipodi:nodetypes="cccc"
inkscape:label="#path3896" />
<path
style="fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-end:none"
d="m 254.73465,602.21932 18.97964,0"
id="antennae-arrow-l"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc"
inkscape:label="#path3898" />
<text
xml:space="preserve"
style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#cccccc;fill-opacity:1;stroke:#666666;font-family:Sans;stroke-opacity:1"
x="95.130539"
y="190.42223"
id="text3916"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan3918"
x="95.130539"
y="190.42223">Bee Anatomy</tspan></text>
<path
style="fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-end:none"
d="m 200,534 200,0"
id="foreleg-arrow"
inkscape:connector-curvature="0"
transform="translate(53.714287,113.21932)"
sodipodi:nodetypes="cc"
inkscape:label="#path3932" />
<path
style="fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-end:none"
d="m 201.02036,594 200.0102,0.0964"
id="middleleg-arrow"
inkscape:connector-curvature="0"
transform="translate(53.714287,113.21932)"
sodipodi:nodetypes="cc"
inkscape:label="#path3934" />
<path
style="fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-end:none"
d="m 708.71429,667.21932 0,100"
id="hindleg-arrow"
inkscape:connector-curvature="0"
inkscape:label="#path3936"
sodipodi:nodetypes="cc" />
<text
xml:space="preserve"
style="font-size:24px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-opacity:1;font-family:Sans"
x="928.71429"
y="307.21933"
id="hindwing-label"
sodipodi:linespacing="125%"
inkscape:label="#text4756"><tspan
sodipodi:role="line"
id="tspan4758"
x="928.71429"
y="307.21933">Hind wings</tspan></text>
<text
xml:space="preserve"
style="font-size:24px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-opacity:1;font-family:Sans"
x="928.71429"
y="387.21933"
id="abdomen-label"
sodipodi:linespacing="125%"
inkscape:label="#text4760"><tspan
sodipodi:role="line"
id="tspan4762"
x="928.71429"
y="387.21933">Abdomen</tspan></text>
<path
style="opacity:0.80000000000000004;fill:#cccccc;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:none;marker-end:none"
d="m 580.7942,491.66304 c -1.39225,6.21477 -5.23495,11.99955 -9.58159,16.31038 20.59937,10.92664 58.57924,25.05039 88.5932,18.01994 l 23.50399,-6.12219 c 4.95151,-0.41095 20.16034,-15.40352 3.6222,-21.06527 -32.76226,0.30097 -73.08608,-4.09187 -106.1378,-7.14286 z"
id="femur-main"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccc"
inkscape:label="#path3052" />
<path
style="fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-end:none"
d="m 698.71429,502.21932 220,0"
id="femur-arrow"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc"
inkscape:label="#path3880" />
<text
xml:space="preserve"
style="font-size:24px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-opacity:1;font-family:Sans"
x="923.71429"
y="507.21933"
id="femur-label"
sodipodi:linespacing="125%"
inkscape:label="#text4764"><tspan
sodipodi:role="line"
id="tspan4766"
x="923.71429"
y="507.21933">Femur</tspan></text>
<path
style="opacity:0.80000000000000004;fill:#cccccc;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:none;marker-end:none"
d="m 707.78806,625.99846 c 14.63367,8.50962 28.99856,11.94839 43.94164,0 -0.20862,-23.84639 -9.1342,-41.88098 -16.27213,-60.88897 -8.12129,-21.62664 -18.84369,-42.24659 -37.77104,-59.31918 -1.72762,6.02981 -4.5296,13.63356 -11.61675,15.65736 8.25484,23.68685 11.93561,42.13093 12.12183,59.09393 0.55681,16.47329 1.14857,32.9291 9.59645,45.45686 z"
id="tibia-main"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccscccc"
inkscape:label="#path3054" />
<path
style="fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-end:none"
d="m 743.71429,572.21932 175,0"
id="tibia-arrow"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc"
inkscape:label="#path3882" />
<text
xml:space="preserve"
style="font-size:24px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-opacity:1;font-family:Sans"
x="923.71429"
y="577.2193"
id="tibia-label"
sodipodi:linespacing="125%"
inkscape:label="#text4768"><tspan
sodipodi:role="line"
id="tspan4770"
x="923.71429"
y="577.2193">Tibia</tspan></text>
<text
xml:space="preserve"
style="font-size:24px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-opacity:1;font-family:Sans"
x="923.71429"
y="657.2193"
id="metatharsus-label"
sodipodi:linespacing="125%"
inkscape:label="#text4772"><tspan
sodipodi:role="line"
id="tspan4774"
x="923.71429"
y="657.2193">Metatharsus</tspan></text>
<text
xml:space="preserve"
style="font-size:24px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-opacity:1;font-family:Sans"
x="923.71429"
y="722.2193"
id="tharsus-label"
sodipodi:linespacing="125%"
inkscape:label="#text4776"><tspan
sodipodi:role="line"
id="tspan4778"
x="923.71429"
y="722.2193">Tharsus</tspan></text>
<text
xml:space="preserve"
style="font-size:24px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-opacity:1;font-family:Sans"
x="658.71429"
y="787.2193"
id="hindleg-label"
sodipodi:linespacing="125%"
inkscape:label="#text4780"><tspan
sodipodi:role="line"
id="tspan4782"
x="658.71429"
y="787.2193">Hind leg</tspan></text>
<text
xml:space="preserve"
style="font-size:24px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-opacity:1;font-family:Sans"
x="123.71429"
y="712.2193"
id="middleleg-label"
sodipodi:linespacing="125%"
inkscape:label="#text4784"><tspan
sodipodi:role="line"
id="tspan4786"
x="123.71429"
y="712.2193">Middle leg</tspan></text>
<text
xml:space="preserve"
style="font-size:24px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-opacity:1;font-family:Sans;-inkscape-font-specification:Sans;font-stretch:normal;font-variant:normal;text-anchor:start;text-align:start;writing-mode:lr"
x="148.71429"
y="652.2193"
id="foreleg-label"
sodipodi:linespacing="125%"
inkscape:label="#text4788"><tspan
sodipodi:role="line"
id="tspan4790"
x="148.71429"
y="652.2193">Fore leg</tspan></text>
<text
xml:space="preserve"
style="font-size:24px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-opacity:1;font-family:Sans"
x="128.71429"
y="607.2193"
id="antennae-label"
sodipodi:linespacing="125%"
inkscape:label="#text4792"><tspan
sodipodi:role="line"
id="tspan4794"
x="128.71429"
y="607.2193">Antennae</tspan></text>
<text
xml:space="preserve"
style="font-size:24px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-opacity:1;font-family:Sans"
x="63.714287"
y="522.2193"
id="eye-label"
sodipodi:linespacing="125%"
inkscape:label="#text4796"><tspan
sodipodi:role="line"
id="tspan4798"
x="63.714287"
y="522.2193">Compound Eye</tspan></text>
<text
xml:space="preserve"
style="font-size:24px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-opacity:1;font-family:Sans"
x="178.71429"
y="442.21933"
id="head-label"
sodipodi:linespacing="125%"
inkscape:label="#text4800"><tspan
sodipodi:role="line"
id="tspan4802"
x="178.71429"
y="442.21933">Head</tspan></text>
<text
xml:space="preserve"
style="font-size:24px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#cccccc;fill-opacity:1;stroke:#666666;font-family:Sans;stroke-opacity:1"
x="163.20232"
y="338.26346"
id="thorax-label"
sodipodi:linespacing="125%"
inkscape:label="#text4804"><tspan
sodipodi:role="line"
id="tspan4806"
x="163.20232"
y="338.26346">Thorax</tspan></text>
<path
style="fill:none;stroke:#666666;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-end:none"
d="m 728.71429,182.21932 170,0 0,130 -10,0"
id="forewing-arrow-r"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccc"
inkscape:label="#path3868" />
<path
style="fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-end:none"
d="m 898.71429,242.21932 25,0"
id="forewing-arrow-l"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc"
inkscape:label="#path3870" />
<text
xml:space="preserve"
style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.8;fill:#cccccc;fill-opacity:1;stroke:#666666;stroke-opacity:1;font-family:Sans"
x="928.71429"
y="247.21931"
id="forewing-label"
sodipodi:linespacing="125%"
inkscape:label="#text4752"><tspan
sodipodi:role="line"
id="tspan4754"
x="928.71429"
y="247.21931"
style="font-size:24px;fill:#cccccc;stroke:#666666;stroke-opacity:1">Fore wings</tspan></text>
<path
style="opacity:0.8;fill:#cccccc;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:none;marker-end:none"
d="m 455.71909,388.19419 c 41.26567,-73.0289 123.53294,-152.59593 190.08816,-194.71434 122.84188,-68.08057 72.02309,12.63862 4.57543,63.89959 -79.36195,58.47429 -131.89443,98.3045 -187.20998,135.65631 z"
id="forewing-left"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc"
inkscape:label="#path3091" />
<path
style="opacity:0.8;fill:#cccccc;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:none;marker-end:none"
d="M 529.07143,465.79075 C 582.95139,443.59235 588.19188,429.88478 728,392.21932 c 101.27161,-25.2776 148.93162,-55.91637 155.00001,-90.71429 -68.04698,-26.63295 -135.04776,-30.26409 -198.57143,6.42858 -53.74022,35.60899 -77.86171,80.42976 -165,147.14285 8.0043,3.33333 8.22419,7.38095 9.64285,10.71429 z"
id="forewing-right"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccc"
inkscape:label="#path3087"><title
id="title4730">forewing</title>
</path>
</g>
</svg>
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.active {
fill-opacity: 0.0;
stroke: #fff;
stroke-width: 1.5;
stroke-opacity: 0.75;
}
.hidden {
fill-opacity: 0.0;
stroke-opacity: 0.0;
}
text.label {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14pt;
}
text.hidden {
fill-opacity: 0.0;
}
text.active {
fill: #fff;
fill-opacity: 1.0;
}
</style>
<body>
<div id="chart"></div>
</body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var img = {
width: 1024,
height: 684,
scale: 0.8
}
var div = d3.select('#chart'),
svg = div.append('svg');
svg
.attr('width', img.width * img.scale)
.attr('height', img.height * img.scale);
var grp = svg.append('g')
.attr('transform', 'scale(' + img.scale + ')');
grp.append('image')
.attr('xlink:href', 'bee.jpg')
.attr('width', img.width)
.attr('height', img.height);
d3.xml('anatomy.svg', 'image/svg+xml', function(error, xml) {
grp.node().appendChild(document.importNode(xml.documentElement, true));
grp.selectAll('path')
.each(function() {
// Remove any existing styles
d3.select(this)
.attr('style', '')
.classed('hidden', true)
.classed('active', false);
// Split the id in the '-', and store the first part in the _class attribute
var t = d3.select(this).attr('id').split('-');
if (t.length > 1) {
d3.select(this)
.attr('_class', t[0])
.classed(t[0], true);
}
});
grp.selectAll('text')
.each(function() {
// Get the content of the tspan element
var label = d3.select(this).select('tspan').node().textContent;
// Remove the syles and add the text
d3.select(this)
.attr('style', '')
.classed('hidden', true)
.classed('active', false)
.classed('label', true)
.text(label);
// Remove the tspan element
d3.select(this).select('tspan').remove();
var t = d3.select(this).attr('id').split('-');
if (t.length > 1) {
d3.select(this)
.attr('_class', t[0])
.classed(t[0], true);
}
});
grp.selectAll('path')
.on('mouseover', function() {
// Highlight the elements belonging to the class of the
// selected element
var _class = d3.select(this).attr('_class');
if (_class) {
grp.selectAll('.' + _class)
.classed('hidden', false)
.classed('active', true);
}
})
.on('mouseout', function() {
// Hide the elements with the same class of the
// mouseout element
var _class = d3.select(this).attr('_class');
if (_class) {
grp.selectAll('.' + _class)
.classed('hidden', true)
.classed('active', false);
}
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment