bsr203/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
<script src="http://d3js.org/d3.v2.js"></script>
    <style type="text/css">

text {
  font: 10px sans-serif;
}

.myclass {
	stroke: #000;
}
  </style>
  </head>
  <body>
  <script type="text/javascript">

	  var dataset = [{"coord": {"Y": 80, "X": 40, "W": 50, "H": 30}, "class": "test"}]
	function click(d, i) {
    		console.log(".... click ..... ")
	}

        var filter = svg.append("svg:defs")
                        .append("svg:filter")
                        .attr("id", "dropshadow")
                        .append("svg:feGaussianBlur")
                        .attr("stdDeviation", 0);

	var svg = d3.select("body").append("svg")
  		.attr("width", 400)
  		.attr("height", 300);

	svg.selectAll("rect")
    	   .data(dataset)
	   .enter()
	   .append("svg:rect")
	   .attr("x", function(d) { return d.coord.X})
  		.attr("y", function(d) { return d.coord.Y})
  		.attr("height", function(d) { return d.coord.W})
		.attr("width", function(d) { return d.coord.H})
		.attr("filter", "url(#dropshadow)")
		.attr("class", function(d) { return "myclass "  + d.class })
                .on("mouseover", mouseover)
		.on("click", click);

            function blur() {
                        filter.attr("stdDeviation", 5);
                    }
            function mouseover(d,i) {
                        blur()
            }

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>test</title>
	<script src="http://d3js.org/d3.v2.js"></script>
	<style type="text/css">

	text {
	font: 10px sans-serif;
	}

	.myclass {
	stroke: #000;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">

	var dataset = [{"coord": {"Y": 80, "X": 40, "W": 50, "H": 30}, "class": "test"}]
	function click(d, i) {
	console.log(".... click ..... ")
	}

	var filter = svg.append("svg:defs")
	.append("svg:filter")
	.attr("id", "dropshadow")
	.append("svg:feGaussianBlur")
	.attr("stdDeviation", 0);

	var svg = d3.select("body").append("svg")
	.attr("width", 400)
	.attr("height", 300);

	svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("svg:rect")
	.attr("x", function(d) { return d.coord.X})
	.attr("y", function(d) { return d.coord.Y})
	.attr("height", function(d) { return d.coord.W})
	.attr("width", function(d) { return d.coord.H})
	.attr("filter", "url(#dropshadow)")
	.attr("class", function(d) { return "myclass " + d.class })
	.on("mouseover", mouseover)
	.on("click", click);

	function blur() {
	filter.attr("stdDeviation", 5);
	}
	function mouseover(d,i) {
	blur()
	}

	</script>
	</body>
	</html>