block by NPashaP 01387cfae2712c4a7f27a7adf49e959b

Viz - Point - Brushend

Full Screen

index.html

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
  </head>
<style>

.viz-point .point circle{
  fill: #999;
  fill-opacity:0.3;
  stroke:  #999;
  stroke-width:2px;
}

.point.selected circle{
  fill: blue;
  stroke: black;
}

</style>
<body>
<svg width="960" height="600">
<g transform="translate(50,50)" id="pointg"></g>
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//vizjs.org/viz.v1.3.0.min.js"></script>
<script>
		
var point = viz.point()
	.data(randomData())

var brush = d3.brush()
    .on("end", brushended)
    .extent([[-1, -1], [point.width() + 1, point.height() + 1]])
	
d3.select("#pointg").call(point);
			
d3.select("#pointg").append("g").call(brush);

function brushended() {    
	d3.select("#pointg")
		.selectAll(".point")
		.data(point.filterRect( d3.event.selection ).points())
		.classed("selected",function(d){ return d.selected;})
}
	  
function randomData(){
	return d3.range(1000).map(function(i){ return {key:Math.random(), value: Math.random()}; });
}

</script>