Interactive SVG/JQuery Graph

Developer
Jonas Bjork
Size
8,374 Kb
Views
14,168
  1. Interactive SVG/JQuery Graph Previews
  2. Interactive SVG/JQuery Graph HTML Codes
  3. Interactive SVG/JQuery Graph CSS Codes
  4. Interactive SVG/JQuery Graph JS Codes

How do I make an interactive svg/jquery graph?

An interactive Sankey flow chart which highlights a specific flow on hover. Hover over any of the partners/developers/affiliates names and see the flow from data asset to customer touch point.. What is a interactive svg/jquery graph? How do you make a interactive svg/jquery graph? This script and codes were developed by Jonas Bjork on 16 October 2022, Sunday.

Interactive SVG/JQuery Graph Previews
IQ Test

Interactive SVG/JQuery Graph - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Interactive SVG/JQuery Graph</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>Hover over underlined Partners/Developers/Affiliates name to see specific flow</p>
<div>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1952 1080" enable-background="new 0 0 1952 1080" xml:space="preserve">
<g id="Layer_3">
<!-- Top Labels -->	<text class="static" transform="matrix(1 0 0 1 108.0852 86.1745)" font-family="'AvenirNext-Bold'" font-size="21">ASSETS</text>	<text class="static" transform="matrix(1 0 0 1 491.3861 86.1745)" font-family="'AvenirNext-Bold'" font-size="21">API PLATFORM</text>	<text class="static" transform="matrix(1 0 0 1 1053.9843 86.1746)" font-family="'AvenirNext-Bold'" font-size="21">PARTNERS/DEVELOPERS/AFFILIATES</text>	<text class="static" transform="matrix(1 0 0 1 1532.3583 86.1743)" font-family="'AvenirNext-Bold'" font-size="21">CUSTOMER TOUCH POINTS</text>	<line class="static" fill="none" stroke="#000000" stroke-miterlimit="10" x1="142.2" y1="113.9" x2="142.2" y2="415.2"/>	<line class="static"fill="none" stroke="#000000" stroke-miterlimit="10" x1="569.7" y1="113.9" x2="569.7" y2="346.2"/>	<line class="static" fill="none" stroke="#000000" stroke-miterlimit="10" x1="1245" y1="113.9" x2="1245" y2="201.3"/>	<line class="static" fill="none" stroke="#000000" stroke-miterlimit="10" x1="1684.4" y1="113.9" x2="1684.4" y2="344.8"/>
<!-- End Top Labels -->
<!-- Data Assets Labels -->	<text class="fact hack" transform="matrix(1 0 0 1 107.2083 454.1566)" font-family="'AvenirNext-Regular'" font-size="17.5701">STORES</text>	<text class="marketPath exact cty eby ifttt pg find cnet bbye cow hack" transform="matrix(1 0 0 1 91.5007 525.9017)" font-family="'AvenirNext-Regular'" font-size="17.5701">DOTCOM</text>	<text class="hack" transform="matrix(1 0 0 1 69.6087 597.6449)" font-family="'AvenirNext-Regular'" font-size="17.5701">LIFE EVENTS</text>	<text class="marketPath exact cty eby ifttt pg find cnet bbye cow hack" transform="matrix(1 0 0 1 118.031 669.392)" font-family="'AvenirNext-Regular'" font-size="17.5701">DEALS</text>	<text class="marketPath exact cty eby ifttt pg find cnet bbye cow hack" transform="matrix(1 0 0 1 69.2923 741.1342)" font-family="'AvenirNext-Regular'" font-size="17.5701">CLEARANCE</text>	<text class="marketPath exact cty eby ifttt pg find cnet bbye cow hack" transform="matrix(1 0 0 1 139.8181 812.9518)" font-family="'AvenirNext-Regular'" font-size="17.5701">SDF</text>
<!-- End Data Assets Labels -->
<!-- Data Blocks Right -->	<rect class="fact hack" x="186" y="415.4" opacity="0.75" fill="#3E6B93" width="27.5" height="66.4"/>	<rect class="marketPath exact cty eby ifttt pg find cnet bbye cow hack" x="186.1" y="487.1" opacity="0.75" fill="#3C96D2" width="27.5" height="66.4"/>	<rect class="hack" x="186.3" y="558.8" opacity="0.75" fill="#086D9A" width="27.3" height="66.4"/>	<rect class="marketPath exact cty eby ifttt pg find cnet bbye cow hack" x="186.3" y="630.6" opacity="0.75" fill="#21366B" width="27.2" height="66.4"/>	<rect class="marketPath exact cty eby ifttt pg find cnet bbye cow hack" x="186.3" y="702.3" opacity="0.75" fill="#2470A9" width="27.3" height="66.4"/>	<rect class="marketPath exact cty eby ifttt pg find cnet bbye cow hack" x="186.3" y="774.3" opacity="0.75" fill="#2DC4EE" width="27.3" height="66.4"/>
<!-- End Data Blocks Right -->
<!-- Data to API Connectors -->	<path class="cow hack" opacity="0.5" fill="#3C96D2" d="M213.5,503.7c77.2,0.1,169,58.1,209.9,56.5v66.4c-36.8-22.8-135.4-98.9-209.9-106.3V503.7z"/>	<path class="ifttt hack" opacity="0.5" fill="#3C96D2" d="M213.5,520.3c71.1,12.9,178.1,93.8,209.9,111.6v66.4c-36.2-34.5-135.8-143.6-209.9-161.5V520.3z"/>	<path class="cty hack" opacity="0.5" fill="#3C96D2" d="M213.5,537c78.6,22.5,143.9,142,209.9,166.7v66.4c-20.3,6-115.7-182.2-209.9-216.6V537z"/>	<path class="fact hack" opacity="0.35" fill="#3E6B93" d="M213.5,415.4c29.9-3.2,149.7,3.6,209.9,1.3v66.4c-1.3,1.4-154.7-6.2-209.9-1.3V415.4z"/>	<path class="marketPath exact cty eby ifttt pg find cnet bbye cow hack" opacity="0.5" fill="#2DC4EE" d="M213.5,774.3c43.4-8,146.9-366.8,209.9-379.5v16.5c-52.8,9.8-150.4,364.8-209.9,396.2V774.3z"/>	<path class="marketPath ifttt bbye hack" opacity="0.5" fill="#2DC4EE" d="M213.5,807.5c56.9-6.9,145.9-307.2,209.9-319.1v66.4c-57.1-18.6-138.7,274.1-209.9,285.8V807.5z"/>	<path class="marketPath exact cty eby ifttt pg find cnet bbye cow hack" opacity="0.5" fill="#2470A9" d="M213.5,702.2c38.4-10.4,149.9-317.9,209.9-324v16.5c-53.4-2.2-163.7,325-209.9,340.7V702.2z"/>	<path class="cow hack" opacity="0.5" fill="#2470A9" d="M213.5,735.5c69.4,10.1,167.7,68.6,209.9,73.1v33.2c-48.9-9.2-143.9-74.8-209.9-73.1V735.5z"/>	<path class="marketPath exact cty eby ifttt pg find cnet bbye cow hack" opacity="0.5" fill="#21366B" d="M213.5,630.6c38-2.5,134.2-253.2,209.9-268.8v16.5c-55.5,1.4-169.5,275.2-209.9,285.5V630.6z"/>	<path class="cow hack" opacity="0.5" fill="#21366B" d="M213.5,663.8c77.3,6.6,156.5,103.1,209.9,111.6v33.2c-48.5-13.9-140.6-109.9-209.9-111.7V663.8z"/>	<path class="hack" opacity="0.5" fill="#086D9A" d="M213.5,558.8c63.7,11,113.2,236.3,209.9,288.4v66.4c-98.1-54.4-125.3-283.3-209.9-288.4V558.8z"/>	<path class="marketPath exact cty eby ifttt pg find cnet bbye cow hack" opacity="0.5" fill="#3C96D2" d="M213.5,487.1c50.9-7.7,151.6-135.4,209.9-141.8v16.5c-50.2,6.5-156.3,134.3-209.9,141.9V487.1z"/>
<!-- End Data to API Connectors -->
<!-- API Left Arrows -->	<polygon class="fact hack" opacity="0.75" fill="#3E6B93" points="450.7,416.7 423.4,416.7 423.4,483.1 450.7,483.1 456.4,449.9"/>	<polygon class="marketPath ifttt bbye hack" opacity="0.75" fill="#2DC4EE" points="450.7,488.4 423.4,488.4 423.4,554.8 450.7,554.8 456.4,521.6"/>	<polygon class="cow hack" opacity="0.75" fill="#3C96D2" points="450.7,560.2 423.4,560.2 423.4,626.6 450.7,626.6 456.4,593.4"/>	<polygon class="ifttt hack" opacity="0.75" fill="#3C96D2" points="450.7,631.9 423.4,631.9 423.4,698.3 450.7,698.3 456.4,665.1"/>	<polygon class="cty hack" opacity="0.75" fill="#3C96D2" points="450.7,703.7 423.4,703.7 423.4,770.1 450.7,770.1 456.4,736.9"/>	<polygon class="hack" opacity="0.75" fill="#086D9A" points="450.7,847.2 423.4,847.2 423.4,913.5 450.7,913.5 456.4,880.4"/>	<polygon class="cow hack" opacity="0.75" fill="#2470A9" points="456.4,808.7 450.7,808.7 423.4,808.7 423.4,841.8 450.7,841.8 450.7,841.9"/>	<polygon class="cow hack" opacity="0.75" fill="#21366B" points="456.4,808.7 450.7,775.5 450.7,775.4 423.4,775.4 423.4,808.6 450.7,808.6 450.7,808.7"/>	<polygon class="marketPath exact cty eby ifttt pg find cnet bbye cow hack" opacity="0.75" fill="#2DC4EE" points="453.6,394.8 450.7,394.8 423.4,394.8 423.4,411.3 450.7,411.3 450.7,411.5"/>	<polygon class="marketPath exact cty eby ifttt pg find cnet bbye cow hack" opacity="0.75" fill="#2470A9" points="456.4,378.3 450.8,378.3 450.7,378.3 423.4,378.3 423.4,394.8 450.8,394.8 450.8,394.8 453.6,394.8"/>	<polygon class="marketPath exact cty eby ifttt pg find cnet bbye cow hack" opacity="0.75" fill="#21366B" points="453.6,361.8 451.5,361.8 450.7,361.8 423.4,361.8 423.4,378.3 450.7,378.3 451.5,378.3 456.4,378.3"/>	<polygon class="marketPath exact cty eby ifttt pg find cnet bbye cow hack" opacity="0.75" fill="#3C96D2" points="450.7,345.3 423.4,345.3 423.4,361.8 450.7,361.8 451.1,361.8 453.6,361.8"/>
<!-- End API Left Arrows -->
<!-- API Labels -->	<text class="marketPath exact cty eby ifttt pg find cnet bbye cow hack" transform="matrix(1 0 0 1 483.0305 383.7551)" font-family="'AvenirNext-Regular'" font-size="17.5701">PRODUCT CATALOG</text>	<text class="fact hack" transform="matrix(1 0 0 1 477.5398 455.5002)" font-family="'AvenirNext-Regular'" font-size="17.5701">STORE INFORMATION</text>	<text class="marketPath ifttt bbye hack" transform="matrix(1 0 0 1 469.8357 527.2454)" font-family="'AvenirNext-Regular'" font-size="17.5701">PRODUCT AVAILABILITY</text>	<text class="cow hack" transform="matrix(1 0 0 1 488.5388 598.9895)" font-family="'AvenirNext-Regular'" font-size="17.5701">PRODUCT REVIEWS</text>	<text class="ifttt hack" transform="matrix(1 0 0 1 470.7581 670.7346)" font-family="'AvenirNext-Regular'" font-size="17.5701">PRODUCT CATEGORIES</text>	<text class="cty hack" transform="matrix(1 0 0 1 478.7346 742.4778)" font-family="'AvenirNext-Regular'" font-size="17.5701">RECOMMENDATIONS</text>	<text class="cow hack" transform="matrix(1 0 0 1 495.5579 814.2219)" font-family="'AvenirNext-Regular'" font-size="17.5701">BUYING OPTIONS</text>	<text class="hack" transform="matrix(1 0 0 1 516.6594 885.967)" font-family="'AvenirNext-Regular'" font-size="17.5701">SMART LISTS</text>
<!-- End API Labels -->
<!-- API Right Blocks -->	<rect class="marketPath exact cty eby ifttt pg find cnet bbye cow hack" x="691.3" y="345" opacity="0.75" fill="#B6B734" width="27.3" height="66.4"/>	<rect class="fact hack" x="691.3" y="416.7" opacity="0.75" fill="#756629" width="27.3" height="66.4"/>	<rect class="marketPath ifttt bbye hack" x="691.3" y="488.4" opacity="0.75" fill="#F9E420" width="27.3" height="66.4"/>	<rect class="cow hack" x="691.3" y="560.2" opacity="0.8" fill="#EFCA2E" width="27.3" height="66.4"/>	<rect class="ifttt hack" x="691.3" y="631.9" opacity="0.75" fill="#DDA527" width="27.3" height="66.4"/>	<rect class="cty hack" x="691.3" y="703.7" opacity="0.75" fill="#B3D334" width="27.3" height="66.4"/>	<rect class="cow hack" x="691.3" y="775.4" opacity="0.75" fill="#FED402" width="27.3" height="66.4"/>	<rect class="hack" x="691.3" y="847.2" opacity="0.75" fill="#918C34" width="27.3" height="66.4"/>
<!-- End API Right Blocks -->
<!-- API to Partners Connectors -->	<path class="bbye" opacity="0.5" fill="#F9E420" d="M718.7,521.6c92.4,9.6,345,367.9,396.9,357.3v33.2c-50.3-6.1-315.8-366.4-396.9-373.9V521.6z"/>	<path class="marketPath" opacity="0.5" fill="#F9E420" d="M718.7,488.4c46,10.1,351-256.1,396.9-255.2v33.2C1080.7,263.3,774.9,512,718.7,505V488.4z"/>	<path class="fact" opacity="0.35" fill="#756629" d="M718.7,416.7c30.8,0.2,363.1,72.3,396.9,70.5v65.9c-37.9-7.5-362.7-106.1-396.9-103.3V416.7z"/>	<path class="cty" opacity="0.5" fill="#B3D334" d="M718.7,703.7c117.6,18.6,324.1-330.6,396.9-327v33.1c-42.3-5.8-258.6,337.6-396.9,327V703.7z"/>	<path class="hack" opacity="0.35" fill="#756629" d="M718.7,449.9c94,10.2,252,481.6,396.9,547.7v8.3c-145.8-37.7-307.8-507.1-396.9-522.8V449.9z"/>	<path class="ifttt" opacity="0.5" fill="#DDA527" d="M718.7,631.9c77,1,350.1-27.5,396.9-29.1v21.9c-20,3.3-349.4,35.8-396.9,40.3V631.9z"/>	<path class="hack" opacity="0.6" fill="#EFCA2E" d="M718.7,593.4c65.8-0.9,162.2,373.2,396.9,420.8v8.3c-240.2-37.6-309.2-395.3-396.9-395.9V593.4z"/>	<path class="hack" opacity="0.5" fill="#DDA527" d="M718.7,665.1c76.6,12.6,197.5,348.7,396.9,357.3v8.3c-213.3-7.9-295.1-308.9-396.9-332.4V665.1z"/>	<path class="hack" opacity="0.5" fill="#B3D334" d="M718.7,736.9c71.8,2.6,196.6,291.9,396.9,293.9v8.3c-195.4-5.9-317.6-257.1-396.9-269V736.9z"/>	<path class="hack" opacity="0.5" fill="#FED402" d="M718.7,808.5c102.4,8.9,140.7,225,396.9,230.6v8.3c-248.1-6.8-326.1-203-396.9-205.5V808.5z"/>	<path class="hack" opacity="0.5" fill="#918C34" d="M718.7,847.2c43.5,0.8,164.7,199.4,396.9,200.2v8.3c-270.8-15-289.1-136-396.9-142.1V847.2z"/>	<path class="exact" opacity="0.5" fill="#B6B734" d="M718.7,351c47.6,2.3,319.4-69.9,396.9-79.2v66.4c-72.1-8.4-369,18.4-396.9,18.9V351z"/>	<path class="marketPath" opacity="0.5" fill="#B6B734" d="M718.7,345c33.9-1.7,354.3-145.4,396.9-144.9v33.2C1067.8,234,744.4,350.4,718.7,351V345z"/>	<path class="cty" opacity="0.5" fill="#B6B734" d="M718.7,357c31.2,0.9,338.7-19.8,396.9-13.5v33.2c-39.9-7-342.6-7.7-396.9-13.6V357z"/>	<path class="eby" opacity="0.5" fill="#B6B734" d="M718.7,363.1c104.9,17.2,340,41.1,396.9,52.2v66.4c-44-17.8-301.5-101.4-396.9-112.5V363.1z"/>	<path class="ifttt" opacity="0.5" fill="#B6B734" d="M718.7,369.1c134.7,25.3,348.5,189.4,396.9,189.9v22.1c-45.3-2-301.6-207.7-396.9-205.9V369.1z"/>	<path class="pg" opacity="0.5" fill="#B6B734" d="M718.7,375.1c115.2,13.4,338.2,241.4,396.9,255.4v66.4c-36.2,0-287.7-302.1-396.9-315.7V375.1z"/>	<path class="find" opacity="0.5" fill="#B6B734" d="M718.7,381.1c112.5,30.2,344.6,324.2,396.9,321.1v66.4c-63.9-9.8-294.3-357.4-396.9-381.4V381.1z"/>	<path class="cnet" opacity="0.5" fill="#B6B734" d="M718.7,387.2c105.6,38.1,322.1,378.3,396.9,386.8v66.4c-61.1-11.5-298.6-408.9-396.9-447.1V387.2z"/>	<path class="bbye" opacity="0.5" fill="#B6B734" d="M718.7,393.2c100.9,55.7,328.1,447.6,396.9,452.5v33.2c-75.6-18.5-305.5-425.5-396.9-479.7V393.2z"/>	<path class="hack" opacity="0.5" fill="#B6B734" d="M718.7,405.3c107,78,276.7,488.4,396.9,584v8.3C988.6,911.9,780,443.4,718.7,411.3V405.3z"/>	<path class="ifttt" opacity="0.5" fill="#F9E420" d="M718.7,505c31.9,3.5,372.2,74.3,396.9,76V603c-15.4-0.2-378.5-81.7-396.9-81.3V505z"/>	<path class="hack" opacity="0.5" fill="#F9E420" d="M718.7,538.2c128.8,39.1,213.2,424.1,396.9,467.6v8.3c-219.2-60.6-286.8-452.1-396.9-459.3V538.2z"/>	<path class="cow" opacity="0.5" fill="#FED402" d="M718.7,775.4c63.5,4.6,354.9,184.2,396.9,186.3v22.1c-31.5,1-342.1-174.3-396.9-175.4V775.4z"/>	<path class="cow" opacity="0.6" fill="#EFCA2E" d="M718.7,560.2c80.4,9.2,303.7,362.7,396.9,379.4v22.1c-88.5-33.2-324.2-366.3-396.9-368.3V560.2z"/>	<path class="cow" opacity="0.5" fill="#B6B734" d="M718.7,399.2c130.2,99.9,335.3,514.3,396.9,518.2v22.1c-90.2-19.6-303.4-479.7-396.9-534.3V399.2z"/>
<!-- End API to Partners Connectors -->
<!-- Partners Left Arrows -->	<polygon class="exact" opacity="0.75" fill="#B6B734" points="1148.6,304.9 1142.9,271.8 1115.5,271.8 1115.5,338.1 1142.9,338.1 1142.9,338.1"/>	<polygon class="eby" opacity="0.75" fill="#B6B734" points="1142.9,415.2 1115.5,415.2 1115.5,481.6 1142.9,481.6 1148.6,448.4"/>	<polygon class="fact" opacity="0.75" fill="#756629" points="1142.9,487 1115.5,487 1115.5,553.4 1142.9,553.4 1148.6,520.2"/>	<polygon class="pg" opacity="0.75" fill="#B6B734" points="1142.9,630.5 1115.5,630.5 1115.5,696.9 1142.9,696.9 1148.6,663.7"/>	<polygon class="find" opacity="0.75" fill="#B6B734" points="1142.9,702.2 1115.5,702.2 1115.5,768.6 1142.9,768.6 1148.6,735.4"/>	<polygon class="cnet" opacity="0.75" fill="#B6B734" points="1142.9,774 1115.5,774 1115.5,840.3 1142.9,840.3 1148.6,807.2"/>	<polygon class="marketPath" opacity="0.75" fill="#F9E420" points="1148.6,233.2 1142.9,233.2 1142.9,233.2 1115.5,233.2 1115.5,266.4 1142.9,266.4"/>	<polygon class="marketPath" opacity="0.75" fill="#B6B734" points="1142.9,200 1142.9,200 1115.5,200 1115.5,233.2 1142.9,233.2 1142.9,233.2 1148.6,233.2"/>	<polygon class="cty" opacity="0.75" fill="#B3D334" points="1148.6,376.7 1142.9,376.7 1142.9,376.7 1115.5,376.7 1115.5,409.9 1142.9,409.9"/>	<polygon class="cty" opacity="0.75" fill="#B6B734" points="1148.6,376.7 1142.9,343.5 1142.9,343.5 1115.5,343.5 1115.5,376.7 1142.9,376.7 1142.9,376.7"/>	<polygon class="bbye" opacity="0.75" fill="#F9E420" points="1148.6,878.9 1142.9,878.9 1142.9,878.9 1115.5,878.9 1115.5,912.1 1142.9,912.1"/>	<polygon class="bbye" opacity="0.75" fill="#B6B734" points="1142.9,845.7 1142.9,845.7 1115.5,845.7 1115.5,878.9 1142.9,878.9 1142.9,878.9 1148.6,878.9"/>	<polygon class="ifttt" opacity="0.75" fill="#DDA527" points="1146.7,602.9 1142.9,602.9 1115.5,602.9 1115.5,624.8 1142.9,624.8	"/>	<polygon class="ifttt" opacity="0.75" fill="#F9E420" points="1146.7,581 1142.9,581 1115.5,581 1115.5,602.9 1142.9,602.9 1146.7,602.9 1148.6,591.9"/>	<polygon class="ifttt" opacity="0.75" fill="#B6B734" points="1142.9,559.1 1115.5,559.1 1115.5,581 1142.9,581 1146.7,581"/>
<!-- End Partners Left Arrows -->
<!-- Cowboom Arrow Pieces -->	<polygon class="cow" opacity="0.75" fill="#B6B734" points="1142.9,917.5 1115.5,917.5 1115.5,939.6 1146.7,939.6"/>	<polygon class="cow" opacity="0.75" fill="#FED402" points="1115.5,983.8 1142.9,983.8 1146.7,961.7 1115.5,961.7"/>	<polygon class="cow" opacity="0.75" fill="#EFCA2E" points="1146.7,939.6 1146.7,939.6 1148.6,950.6"/>	<polygon class="cow" opacity="0.75" fill="#EFCA2E" points="1148.6,950.6 1146.7,961.7 1146.7,961.7"/>	<polygon class="cow" opacity="0.75" fill="#EFCA2E" points="1146.7,939.6 1115.5,939.6 1115.5,961.7 1146.7,961.7 1148.6,950.6"/>
<!-- End Cowboom Arrow Pieces -->
<!-- Hackathon Arrow Pieces -->	<polygon class="hack" opacity="0.75" fill="#B6B734" points="1115.5,989.3 1115.5,997.6 1144.3,997.6 1142.9,989.3	"/>	<polygon class="hack" opacity="0.75" fill="#756629" points="1115.5,997.6 1115.5,1005.9 1145.7,1005.9 1144.3,997.6	"/>	<polygon class="hack" opacity="0.75" fill="#F9E420" points="1115.5,1005.9 1115.5,1014.2 1147.1,1014.2 1145.7,1005.9	"/>	<polygon class="hack" opacity="0.8" fill="#EFCA2E" points="1115.5,1014.2 1115.5,1022.5 1148.6,1022.5 1147.1,1014.2	"/>	<polygon class="hack" opacity="0.75" fill="#DDA527" points="1115.5,1022.5 1115.5,1030.8 1147.1,1030.8 1148.6,1022.5	"/>	<polygon class="hack" opacity="0.75" fill="#B3D334" points="1115.5,1030.8 1115.5,1039 1145.7,1039 1147.1,1030.8	"/>	<polygon class="hack" opacity="0.75" fill="#FED402" points="1115.5,1039 1115.5,1047.3 1144.3,1047.3 1145.7,1039	"/>	<polygon class="hack" opacity="0.75" fill="#918C34" points="1115.5,1047.3 1115.5,1055.6 1142.9,1055.6 1144.3,1047.3	"/>
<!-- End Hackathon Arrow Pieces -->
<!-- Partners Labels -->	<text id="marketPath" class="idFinder" transform="matrix(1 0 0 1 1175.5891 239.3432)" font-family="'AvenirNext-Regular'" font-size="17.5701">BBY MARKETING</text>	<text id="exact" class="idFinder" transform="matrix(1 0 0 1 1180.9573 311.0873)" font-family="'AvenirNext-Regular'" font-size="17.5701">EXACT TARGET</text>	<text id="cty" class="idFinder" transform="matrix(1 0 0 1 1178.2249 382.8334)" font-family="'AvenirNext-Regular'" font-size="17.5701">CITI THANKYOU</text>	<text id="eby" class="idFinder" transform="matrix(1 0 0 1 1222.7825 454.5775)" font-family="'AvenirNext-Regular'" font-size="17.5701">EBAY</text>	<text id="fact" class="idFinder" transform="matrix(1 0 0 1 1205.7219 526.3217)" font-family="'AvenirNext-Regular'" font-size="17.5701">FACTUAL</text>	<text id="ifttt" class="idFinder" transform="matrix(1 0 0 1 1222.7649 598.0668)" font-family="'AvenirNext-Regular'" font-size="17.5701">IFTTT</text>	<text id="pg" class="idFinder" transform="matrix(1 0 0 1 1178.7522 669.8099)" font-family="'AvenirNext-Regular'" font-size="17.5701">PRICE GRABBER</text>	<text id="find" class="idFinder" transform="matrix(1 0 0 1 1205.7131 741.5541)" font-family="'AvenirNext-Regular'" font-size="17.5701">THE FIND</text>	<text id="cnet" class="idFinder" transform="matrix(1 0 0 1 1197.9036 813.2992)" font-family="'AvenirNext-Regular'" font-size="17.5701">CNET.COM</text>	<text id="bbye" class="idFinder" transform="matrix(1 0 0 1 1169.4133 885.0443)" font-family="'AvenirNext-Regular'" font-size="17.5701">BBY EVERYWHERE</text>	<text id="cow" class="idFinder" transform="matrix(1 0 0 1 1194.3713 955.8579)" font-family="'AvenirNext-Regular'" font-size="17.5701">COWBOOM</text>	<text id="hack" class="idFinder" transform="matrix(1 0 0 1 1184.1106 1028.5991)" font-family="'AvenirNext-Regular'" font-size="17.5701">HACKATHONS</text>
<!-- End Partners Labels -->
<!-- Partners Right Blocks -->	<rect class="exact" x="1349.8" y="271.8" opacity="0.75" fill="#80A43E" width="27.3" height="66.4"/>	<rect class="cty" x="1349.8" y="343.5" opacity="0.75" fill="#59BD77" width="27.3" height="66.4"/>	<rect class="eby" x="1349.8" y="415.2" opacity="0.75" fill="#3A8A41" width="27.3" height="66.4"/>	<rect class="fact" x="1349.8" y="487" opacity="0.75" fill="#526C49" width="27.3" height="66.4"/>	<rect class="ifttt" x="1349.8" y="558.7" opacity="0.75" fill="#B0D235" width="27.3" height="66.4"/>	<rect class="pg" x="1349.8" y="630.5" opacity="0.75" fill="#65BC46" width="27.3" height="66.4"/>	<rect class="find" x="1349.8" y="702.2" opacity="0.75" fill="#07592E" width="27.3" height="66.4"/>	<rect class="cnet" x="1349.8" y="774" opacity="0.75" fill="#69C07C" width="27.3" height="66.4"/>	<rect class="marketPath" x="1349.8" y="200" opacity="0.75" fill="#6DBE49" width="27.3" height="66.4"/>	<rect class="bbye" x="1349.5" y="845.7" opacity="0.85" fill="#D3DE26" width="27.3" height="66.4"/>	<rect class="cow" x="1349.5" y="917.5" opacity="0.75" fill="#0C4730" width="27.3" height="66.4"/>	<rect class="hack" x="1349.8" y="989.3" opacity="0.75" fill="#627332" width="27.3" height="66.4"/>
<!-- End Partners Right Blocks -->
<!-- Partners to Customer Touch Point Connectors -->	<path class="marketPath" opacity="0.5" fill="#6DBE49" d="M1377.2,200c60.1,1.1,178.4,143.3,209.9,144v33.2c-52.9-3.1-128.4-108.1-209.9-110.8V200z"/>	<path class="ifttt" opacity="0.5" fill="#B0D235" d="M1377.2,558.7c19.1,0.3,149.8,277.1,209.9,288.1v66.4c-47.5-4.3-176.7-286-209.9-288.7V558.7z"/>	<path class="cow" opacity="0.5" fill="#0C4730" d="M1376.8,917.5c88.4,11.1,124-420.8,210.3-457v11.1c-59.5,5.6-119.9,498.9-210.3,512.3V917.5z"/>	<path class="cnet" opacity="0.5" fill="#69C07C" d="M1377.2,774c52.8-5.1,135.8-309.1,209.9-324.5l0.1,11c-57.4,4.9-168.5,378.1-209.9,379.9V774z"/>	<path class="find" opacity="0.5" fill="#07592E" d="M1377.2,702.2c63.7,1,113.1-248.9,209.9-263.7v11c-64.8-8.5-163.9,310.2-209.9,319.1V702.2z"/>	<path class="pg" opacity="0.5" fill="#65BC46" d="M1377.2,630.5c55.3,0.3,99.5-185,209.9-203v11c-85.8-1.6-160.3,253-209.9,258.4V630.5z"/>	<path class="fact" opacity="0.35" fill="#526C49" d="M1377.3,487c61-7.4,156.9,145.3,209.7,144.6v66.4c-63.3-13.7-149.7-193-209.7-188.8V487z"/>	<path class="fact" opacity="0.35" fill="#526C49" d="M1377.3,509.1c56.2,2.6,154.9,192.1,209.7,194.2v66.4c-48.5-18.4-168.2-239.2-209.7-238.4V509.1z"/>	<path class="fact" opacity="0.35" fill="#526C49" d="M1377.3,531.2c45.6,13.5,143.9,223.7,209.7,243.8v66.4c-66-13.7-175.4-287.1-209.7-288.1V531.2z"/>	<path class="eby" opacity="0.5" fill="#3A8A41" d="M1377.2,415.2c54.8,1.1,123.5,3.5,209.9,1.3v11c-65.6,1.7-166,50.6-209.9,54.1V415.2z"/>	<path class="cty" opacity="0.5" fill="#59BD77" d="M1376.9,343.5c51.2,1.4,147.3,178.1,210.1,177.8v33.2c-61.1-3.6-168.4-177.3-210.1-177.8V343.5z"/>	<path class="cty" opacity="0.5" fill="#59BD77" d="M1376.9,376.7c37.8,1.8,137.5,176.9,210.1,183.1v66.4c-55.2-17.2-178.2-210.5-210.1-216.3V376.7z"/>	<path class="exact" opacity="0.5" fill="#80A43E" d="M1377.2,272c37.4,0,151.8,212.3,209.9,216.2v33.2c-63.5-1.3-149.3-183.5-209.9-183.5V272z"/>	<path class="hack" opacity="0.6" fill="#627332" d="M1377.2,989.3c143.5,15.3,133.9-483.2,209.9-517.8l-0.1,11c-52.9,30.1-59.8,565.9-209.9,573.1V989.3z"/>	<path class="bbye" opacity="0.65" fill="#D3DE26" d="M1376.8,845.7c97.5,15.2,84.8-473.4,210.2-468.6v33.2c-103.6-29.2-113.9,497.2-210.2,501.7V845.7z"/>
<!-- End Partners to Customer Touch Point Connectors -->
<!-- Customer Touch Points Left Arrows -->	<polygon class="cty" opacity="0.75" fill="#59BD77" points="1620,521.4 1614.4,521.4 1614.4,521.4 1587,521.4 1587,554.5 1614.4,554.5"/>	<polygon class="exact" opacity="0.75" fill="#80A43E" points="1620,521.4 1614.4,488.2 1614.4,488.1 1587,488.1 1587,521.4 1614.4,521.4 1614.4,521.4"/>	<polygon class="cty" opacity="0.75" fill="#59BD77" points="1614.4,559.8 1613.1,559.8 1587,559.8 1587,626.2 1613.1,626.2 1614.4,626.2 1620,593"/>	<polygon class="fact" opacity="0.75" fill="#526C49" points="1614.4,631.6 1613.1,631.6 1587,631.6 1587,697.9 1613.1,697.9 1614.4,697.9 1620,664.7"/>	<polygon class="fact" opacity="0.75" fill="#526C49" points="1614.4,703.3 1613.1,703.3 1613.1,703.3 1587,703.3 1587,769.7 1613.1,769.7 1614.4,769.7 1620,736.5"/>	<polygon class="fact" opacity="0.75" fill="#526C49" points="1614.4,775.1 1613.1,775.1 1587,775.1 1587,841.4 1613.1,841.4 1613.1,841.4 1614.4,841.4 1620,808.2"/>	<polygon class="ifttt" opacity="0.75" fill="#B0D235" points="1614.4,846.8 1613.1,846.8 1587,846.8 1587,913.2 1613.1,913.2 1613.1,913.2 1614.4,913.2 1620,880"/>	<polygon class="marketPath" opacity="0.75" fill="#6DBE49" points="1587,377.2 1620,377.2 1614.4,344 1587,344"/>	<polygon class="bbye" opacity="0.85" fill="#D3DE26" points="1587,377.2 1587,410.3 1614.4,410.3 1620,377.2"/>
<!-- End Customer Touch Points Left Arrows -->
<!-- Shopping Apps Arrow Pieces -->	<polygon class="eby" opacity="0.75" fill="#3A8A41" points="1587,416.5 1587,427.5 1616.3,427.5 1614.4,416.5	"/>	<polygon class="pg" opacity="0.75" fill="#65BC46" points="1587,427.5 1587,438.5 1618.1,438.5 1616.3,427.5	"/>	<polygon class="find" opacity="0.75" fill="#07592E" points="1587,438.5 1587,449.5 1620,449.5 1618.1,438.5	"/>	<polygon class="cnet" opacity="0.75" fill="#69C07C" points="1587,449.5 1587.1,460.4 1618.1,460.4 1620,449.5	"/>	<polygon class="cow" opacity="0.75" fill="#0C4730" points="1587.1,460.4 1587.1,471.5 1616.3,471.5 1618.1,460.4	"/>	<polygon class="hack" opacity="0.75" fill="#627332" points="1587.1,471.5 1587,482.5 1614.4,482.5 1616.3,471.5	"/>
<!-- End Shopping Apps Arrow Pieces -->
<!-- Customer Touch Point Labels -->	<text class="eby pg find cnet cow hack" transform="matrix(1 0 0 1 1629.8538 454.0979)" font-family="'AvenirNext-Regular'" font-size="17.5701">SHOPPING APPS</text>	<text class="exact cty" transform="matrix(1 0 0 1 1629.8538 525.842)" font-family="'AvenirNext-Regular'" font-size="17.5701">1:1 EMAILS</text>	<text class="cty" transform="matrix(1 0 0 1 1629.8538 597.5872)" font-family="'AvenirNext-Regular'" font-size="17.5701">LOYALTY - SHOP WITH POINTS</text>	<text class="fact" transform="matrix(1 0 0 1 1629.8538 669.3313)" font-family="'AvenirNext-Regular'" font-size="17.5701">BING</text>	<text class="fact" transform="matrix(1 0 0 1 1629.8538 741.0754)" font-family="'AvenirNext-Regular'" font-size="17.5701">APPLE MAPS</text>	<text class="fact" transform="matrix(1 0 0 1 1629.8538 812.8206)" font-family="'AvenirNext-Regular'" font-size="17.5701">GOOGLE MAPS</text>	<text class="ifttt" transform="matrix(1 0 0 1 1629.8538 884.5657)" font-family="'AvenirNext-Regular'" font-size="17.5701">PERSONALIZED NOTIFICATIONS</text>	<text class="marketPath bbye" transform="matrix(1 0 0 1 1629.8538 386.5421)" font-family="'AvenirNext-Regular'" font-size="17.5701">INTERNAL USE</text>
<!-- End Customer Touch Point Labels -->
</g>
</svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Interactive SVG/JQuery Graph - Script Codes CSS Codes

.marketPath,
.exact,
.cty,
.eby,
.fact,
.ifttt,
.pg,
.find,
.cnet,
.bbye,
.cow,
.hack,
.idFinder { -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
.addOpac { opacity: 1; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
.removeOpac { opacity: 0.1; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
.static { opacity: 1;
}
.idFinder { text-decoration: underline;
}
div { width: 70%; margin: auto;
}
p { text-align: center;
}

Interactive SVG/JQuery Graph - Script Codes JS Codes

$(document).ready(function() {	$(".idFinder").hover(function(){	var currentID = this.id;	$(this).siblings().each(function(){	var currentClass = $(this).attr("class");	if ($(this).is("." + currentID + "")) {	$(this).attr('class', "" + currentClass + " addOpac");	} else if (!$(this).is("." + currentID + "")) {	$(this).attr('class',"" + currentClass + " removeOpac");	}	});	}, function() {	var currentID = this.id;	$(this).siblings().each(function(){	var currentClass = $(this).attr("class");	var remove = currentClass.replace(" removeOpac", '');	var originalClass = currentClass.replace(" addOpac", '');	if ($(this).is("." + currentID + "")) {	$(this).attr('class', "" + originalClass + "");	} else if (!$(this).is("." + currentID + "")) {	$(this).attr('class', "" + remove + "");	}	});	});
});
Interactive SVG/JQuery Graph - Script Codes
Interactive SVG/JQuery Graph - Script Codes
Home Page Home
Developer Jonas Bjork
Username jonasbjork
Uploaded October 16, 2022
Rating 3.5
Size 8,374 Kb
Views 14,168
Do you need developer help for Interactive SVG/JQuery Graph?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jonas Bjork (jonasbjork) Script Codes
Name
A Pen by Jonas Bjork
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!