Skip to content

Instantly share code, notes, and snippets.

@NPashaP
Created January 20, 2018 14:19
Show Gist options
  • Save NPashaP/292bb3fb5b7c3d874ca219ede54dff3b to your computer and use it in GitHub Desktop.
Save NPashaP/292bb3fb5b7c3d874ca219ede54dff3b to your computer and use it in GitHub Desktop.
Viz - Point - Brush
license: gpl-3.0
<!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="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment