Skip to content

Instantly share code, notes, and snippets.

@jgalazm

jgalazm/d3-brush-demo.html

Last active February 8, 2018 15:01
Show Gist options
  • Save jgalazm/27a26092ac7bfceb655b6cfdeddebf26 to your computer and use it in GitHub Desktop.
Save jgalazm/27a26092ac7bfceb655b6cfdeddebf26 to your computer and use it in GitHub Desktop.
Download ZIP
my own demo of a zoomable and resizable brush
Raw
d3-brush-demo.html
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<p>try 1</p>
<div id="brush"></div>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-ease.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-transition.v1.min.js"></script>
<script src="https://d3js.org/d3-drag.v1.min.js"></script>
<script src="https://d3js.org/d3-brush.v1.min.js"></script>
<script>
// svg container
let width = 400;
let svg = d3.select('#brush')
.append('svg')
.attr('class', 'd3 slider-container')
.attr('width', width)
.attr('height', 50);
// define x axis
let start = new Date(2018,0,1);
let end = new Date(2018,2,1);
let x= d3.scaleTime().domain([start, end]).range([0,width]);
// draw x axis
svg.append("g")
.attr("class", "x")
.attr("transform", "translate(0," + 30 + ")")
.call(d3.axisBottom(x).ticks(4));
// create brush
let brush = d3.brushX(x).on("brush",function(){
console.log(this);
});
// draw it
svg.append("g")
.attr("class", "brush")
.call(brush)
.call(brush.move,x.range());
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment