block by NPashaP 292bb3fb5b7c3d874ca219ede54dff3b

Viz - Point - Brush

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("start brush", brushed)
    .extent([[-1, -1], [point.width() + 1, point.height() + 1]])
	
d3.select("#pointg").call(point)
			
d3.select("#pointg").append("g").call(brush)
	  
function randomData(){
	return d3.range(1000).map(function(i){ return {key:Math.random(), value: Math.random()}; })
}

function brushed() {    
	d3.select("#pointg")
		.selectAll(".point")
		.data(point.filterRect( d3.event.selection ).points())
		.classed("selected",function(d){ return d.selected;})
}

</script>