GitNoise/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
Testing adding multiple svg image with tooltips using d3-tip.

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://raw.githubusercontent.com/Caged/d3-tip/master/index.js"></script>


  <link rel="stylesheet" href="//rawgithub.com/Caged/d3-tip/master/examples/example-styles.css">

  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see!
    var svg = d3.select("body").append("svg")

    var data = ["Workers", "of", "the", "world", "unite!"]

    tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d; });

/* Invoke the tip in the context of your visualization */
svg.call(tip);

    var orgOpacity = 0.1;
    svg.selectAll(".worker").data(data).enter()
      .append("svg:image")
    	.classed("worker", true)
      .attr("xlink:href", "http://www.clker.com/cliparts/5/e/b/1/12620180711782779235workerwithraisedarm.svg")
      .attr("width", 100)
      .attr("height", 100)
      .attr("x", function(d,i) { return 100 + 100 * i; })
      .attr("y",100)
    	.style("opacity", orgOpacity)
      .on('mouseover', function(d) {
      	d3.select(this)
          .transition().duration(800)
          .style("opacity","1");
      	tip.show(d);  })
  .on('mouseout', function(d) {
      	d3.select(this)
        	.transition().delay(300).duration(500)
        	.style("opacity", orgOpacity)
      	tip.hide(d);  });


  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="https://raw.githubusercontent.com/Caged/d3-tip/master/index.js"></script>


	<link rel="stylesheet" href="//rawgithub.com/Caged/d3-tip/master/examples/example-styles.css">

	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg { width:100%; height: 100% }
	</style>
	</head>

	<body>
	<script>
	// Feel free to change or delete any of the code you see!
	var svg = d3.select("body").append("svg")

	var data = ["Workers", "of", "the", "world", "unite!"]

	tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d; });

	/* Invoke the tip in the context of your visualization */
	svg.call(tip);

	var orgOpacity = 0.1;
	svg.selectAll(".worker").data(data).enter()
	.append("svg:image")
	.classed("worker", true)
	.attr("xlink:href", "http://www.clker.com/cliparts/5/e/b/1/12620180711782779235workerwithraisedarm.svg")
	.attr("width", 100)
	.attr("height", 100)
	.attr("x", function(d,i) { return 100 + 100 * i; })
	.attr("y",100)
	.style("opacity", orgOpacity)
	.on('mouseover', function(d) {
	d3.select(this)
	.transition().duration(800)
	.style("opacity","1");
	tip.show(d); })
	.on('mouseout', function(d) {
	d3.select(this)
	.transition().delay(300).duration(500)
	.style("opacity", orgOpacity)
	tip.hide(d); });


	</script>
	</body>