Skip to content

Instantly share code, notes, and snippets.

@ssmaroju

ssmaroju/.block

Last active October 22, 2018 22:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ssmaroju/b1269e5f9b17723f7f9604c68b4bf1b1 to your computer and use it in GitHub Desktop.
Save ssmaroju/b1269e5f9b17723f7f9604c68b4bf1b1 to your computer and use it in GitHub Desktop.
Download ZIP
RiserSlider
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 300)
.attr("height", 1080)
var scale = d3.scale.linear()
.domain([0,5000])
.range([10,600])
var brush = d3.svg.brush()
brush.x(scale)
brush.extent([2000,3500])
brush.on("brushend", function(){
console.log(brush.extent())
})
var g = svg.append("g")
brush(g)
g.attr("transform", "translate(200,800)rotate(-90)")
g.selectAll("rect").attr("height", 50)
g.selectAll(".background")
.style({fill: "#68304d", visibility: "visible"})
g.selectAll(".extent")
.style({fill: "#78c5c5", visibility: "visible"})
g.selectAll(".resize rect")
.style({fill: "#276c86", visibility: "visible"})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment