Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/index.html Secret

Created January 24, 2017 16:50
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 mbostock/d23a97cb8ac3674f87a26724e526a0ed to your computer and use it in GitHub Desktop.
Save mbostock/d23a97cb8ac3674f87a26724e526a0ed to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<button style="position:absolute;top:10px;left:10px;">Click Me</button>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
var randomUniform = d3.randomUniform(200, 400),
randomInteger = function() { return Math.ceil(randomUniform()); };
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleBand()
.domain(d3.range(15).map(randomInteger))
.range([0, width])
.padding(0.1);
var xAxis = d3.axisBottom(x);
var xGroup = g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
d3.select("button").on("click", function() {
x.domain(d3.range(15).map(randomInteger));
xGroup.transition().duration(750).call(xAxis);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment