Skip to content

Instantly share code, notes, and snippets.

@markov00

markov00/index.html

Last active March 10, 2017 11:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save markov00/8e035c25b5eee0376a8dfe85185c3044 to your computer and use it in GitHub Desktop.
Save markov00/8e035c25b5eee0376a8dfe85185c3044 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="selected"></div>
<svg id="chart" width="600" height="300"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">
var height = 200
var width = 500
var svg = d3.select('#chart').append('g').attr("transform", "translate(50,50)");
var xScale = d3.scalePow().exponent(4).domain([1000, 2017]).range([0, width])
var xAxis = d3.axisTop()
.ticks(7)
.scale(xScale);
svg.append("g")
.attr("transform", "translate(0," + (height -1) + ")")
.call(xAxis);
var brush = d3.brushX()
svg.append("g")
.attr("class", "brush")
.call(brush.on("end", brushed));
var xZoomedScale = d3.scalePow().exponent(4).domain([1000, 2017]).range([0, 500])
var xZoomedAxis = d3.axisBottom()
.scale(xZoomedScale)
.ticks(7);
var zoomedAxis = svg.append("g").classed('zoomed',true)
zoomedAxis.call(xZoomedAxis);
function brushed(){
if (!d3.event.sourceEvent) return; // Only transition after input.
if (!d3.event.selection) return; // Ignore empty selections.
var d0 = d3.event.selection.map(xScale.invert)
if(d0[0]< 1000){
d0[0] = 1000
}
if(d0[0] > 2017){
d0[0] = 2017
}
if(d0[1]< 1000){
d0[1] = 1000
}
if(d0[1] > 2017)
d0[1] = 2017
xZoomedScale.domain(d0)
svg.selectAll('g.zoomed').call(xZoomedAxis);
d3.select('.selected').text(d0.map(Math.round))
console.log(xZoomedScale)
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment