Inspire SVG Graphs Example

HTML

<script src="http://rvlasveld.github.io/files/jquery.svg.js"></script>
<script src="http://rvlasveld.github.io/files/jquery.svgdom.js"></script>
<script src="http://rvlasveld.github.io/files/jquery.svganim.js"></script>
<svg class="graph" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" id="gradientShadow" r="55%">
        <stop offset="0%" style="stop-color:rgb(0,0,0); stop-opacity:1"></stop>
        <stop offset="100%" style="stop-color: #AAA; stop-opacity:0"></stop>
      </radialGradient>
    </defs>
    
    <g class="grid x-grid" id="xGrid">
      <line x1="113" x2="113" y1="10" y2="380"></line>
      <line x1="259" x2="259" y1="10" y2="380"></line>
      <line x1="405" x2="405" y1="10" y2="380"></line>
      <line x1="551" x2="551" y1="10" y2="380"></line>
      <line x1="697" x2="697" y1="10" y2="380"></line>
    </g>
    <g class="grid y-grid" id="yGrid">
      <line x1="86" x2=wwww y1="10" y2="10"></line>
      <line x1="86" x2="697" y1="68" y2="68"></line>
      <line x1="86" x2="697" y1="126" y2="126"></line>
      <line x1="86" x2="697" y1="185" y2="185"></line>
      <line x1="86" x2="697" y1="243" y2="243"></line>
      <line x1="86" x2="697" y1="301" y2="301"></line>
      <line x1="86" x2="697" y1="360" y2="360"></line>
    </g>
    
    
    <g class="surfaces">
        <path class="first_set" d="M113,360 L113,192 L259,171 L405,179 L551,200 L697,204 L697,360 Z"></path>
    </g>
    
    <use class="grid double" xlink:href="#xGrid" style=""></use>
    <use class="grid double" xlink:href="#yGrid" style=""></use>
    
    <g class="first_set points" data-setname="Submission to first decision">
      <circle class="shadow" cx="113" cy="192" r="5" stroke="#AAA" stroke-width="4" stroke-opacity="1" style="fill: url(#gradientShadow);"></circle>
      <circle class="plain" cx="113" cy="192" data-value="7.2" r="5"></circle>
      <circle...

CSS

body {
  background-color: #b2e9e4;
}

svg.graph .grid {
  stroke: white;
  stroke-dasharray: 1 2;
  stroke-width: 1;
}

svg.graph .points .plain {
  stroke: white;
  stroke-width: 3;
}

svg.graph .first_set {
  fill: #00554d;
}

svg.graph .surfaces {
  fill-opacity: 0.5;
}

svg.graph .grid.double {
  stroke-opacity: 0.4;
}

svg.graph .labels {
  font-family: Arial;
  font-size: 14px;
  kerning: 1;
}

svg.graph .labels.x-labels {
  text-anchor: middle;
}

svg.graph .labels.y-labels {
  text-anchor: end;
}

JavaScript

// Shadow growing and shrinking
$('svg.graph .points circle.plain').each( function(index) {
  // For each plain circle...
  $(this).on('mouseenter', function(event) {
    // Grow shadow point when mouse enters the point
    $(this).prev().stop(true, false ).animate( {
      svgR: 12,
      svgStrokeOpacity: 0,
      svgStrokeWidth: 0,
    }, 200 );
  }).on('mouseleave', function(event) {
    // Shrink shadow point when mouse leaves the point
    $(this).prev().stop(true, false ).animate( {
      svgR: 5,
      svgStrokeOpacity: 1,
      svgStrokeWidth: 4
    }, 200 );
  });
});