phoebebright/index.html

## readme.mkd

      
    Raw
  

              readme.mkd
            
          
    How to transition a y axis.  Drawn initially with set values of 0 to 100.  On clicking button the rescale function gets a random value for the end of the scale and redraws with an easing function.
See it running at http://bl.ocks.org/3098488
See also: http://bl.ocks.org/2983699

  
## index.html
<html>
    <head>
	<title>D3 Axis Example</title>
	<script src="http://d3js.org/d3.v2.js"></script>
    </head>

    <body>
    <button id="rescale" onclick="rescale();">Rescale</button>
    <script>
        var width = 700,
            height = 400,
            padding = 100;

        // create an svg container
        var vis = d3.select("body").
            append("svg:svg")
                .attr("width", width)
                .attr("height", height);

        // define the y scale  (vertical)
        var yScale = d3.scale.linear()
	        .domain([0, 100])    // values between 0 and 100
		     .range([height - padding, padding]);   // map these to the chart height, less padding.
                 //REMEMBER: y axis range has the bigger number first because the y value of zero is at the top of chart and increases as you go down.

        // define the x scale (horizontal)
        var mindate = new Date(2012,0,1),
            maxdate = new Date(2012,0,31);

        var xScale = d3.time.scale()
	        .domain([mindate, maxdate])    // values between for month of january
		.range([padding, width - padding * 2]);   // map these the the chart width = total width minus padding at both sides


        // define the y axis
        var yAxis = d3.svg.axis()
            .orient("left")
            .scale(yScale);


        // define the x axis
        var xAxis = d3.svg.axis()
                .orient("bottom")
                .scale(xScale);

        // draw y axis with labels and move in from the size by the amount of padding
        vis.append("g")
                .attr("class", "yaxis")
            .attr("transform", "translate("+padding+",0)")
            .call(yAxis);

        // now add titles to the y axis
            vis.append("text")
                    .attr("class", "yaxis_label")
                    .attr("text-anchor", "middle")  // this makes it easy to centre the text as the transform is applied to the anchor
                    .attr("transform", "translate("+ (padding/2) +","+(height/2)+")rotate(-90)")  // text is drawn off the screen top left, move down and out and rotate
                    .text("Original Scale");

        // draw x axis with labels and move to the bottom of the chart area
        vis.append("g")
            .attr("class", "xaxis")   // give it a class so it can be used to select only xaxis labels  below
            .attr("transform", "translate(0," + (height - padding) + ")")
            .call(xAxis);

        // now rotate text on x axis
        // solution based on idea here: https://groups.google.com/forum/?fromgroups#!topic/d3-js/heOBPQF3sAY
        // first move the text left so no longer centered on the tick
        // then rotate up to get 45 degrees.
       vis.selectAll(".xaxis text")  // select all the text elements for the xaxis
          .attr("transform", function(d) {
              return "translate(" + this.getBBox().height*-2 + "," + this.getBBox().height + ")rotate(-45)";
        });

        function rescale() {
            yScale.domain([0,Math.floor((Math.random()*90)+11)])  // change scale to 0, to between 10 and 100
            vis.select(".yaxis")
                    .transition().duration(1500).ease("sin-in-out")  // https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease
                    .call(yAxis);

            vis.select(".yaxis_label")
                .text("Rescaled Axis");
        }

    </script>

    </body>
</html>
	<html>
	<head>
	<title>D3 Axis Example</title>
	<script src="http://d3js.org/d3.v2.js"></script>
	</head>

	<body>
	<button id="rescale" onclick="rescale();">Rescale</button>
	<script>
	var width = 700,
	height = 400,
	padding = 100;

	// create an svg container
	var vis = d3.select("body").
	append("svg:svg")
	.attr("width", width)
	.attr("height", height);

	// define the y scale (vertical)
	var yScale = d3.scale.linear()
	.domain([0, 100]) // values between 0 and 100
	.range([height - padding, padding]); // map these to the chart height, less padding.
	//REMEMBER: y axis range has the bigger number first because the y value of zero is at the top of chart and increases as you go down.

	// define the x scale (horizontal)
	var mindate = new Date(2012,0,1),
	maxdate = new Date(2012,0,31);

	var xScale = d3.time.scale()
	.domain([mindate, maxdate]) // values between for month of january
	.range([padding, width - padding * 2]); // map these the the chart width = total width minus padding at both sides


	// define the y axis
	var yAxis = d3.svg.axis()
	.orient("left")
	.scale(yScale);


	// define the x axis
	var xAxis = d3.svg.axis()
	.orient("bottom")
	.scale(xScale);

	// draw y axis with labels and move in from the size by the amount of padding
	vis.append("g")
	.attr("class", "yaxis")
	.attr("transform", "translate("+padding+",0)")
	.call(yAxis);

	// now add titles to the y axis
	vis.append("text")
	.attr("class", "yaxis_label")
	.attr("text-anchor", "middle") // this makes it easy to centre the text as the transform is applied to the anchor
	.attr("transform", "translate("+ (padding/2) +","+(height/2)+")rotate(-90)") // text is drawn off the screen top left, move down and out and rotate
	.text("Original Scale");

	// draw x axis with labels and move to the bottom of the chart area
	vis.append("g")
	.attr("class", "xaxis") // give it a class so it can be used to select only xaxis labels below
	.attr("transform", "translate(0," + (height - padding) + ")")
	.call(xAxis);

	// now rotate text on x axis
	// solution based on idea here: https://groups.google.com/forum/?fromgroups#!topic/d3-js/heOBPQF3sAY
	// first move the text left so no longer centered on the tick
	// then rotate up to get 45 degrees.
	vis.selectAll(".xaxis text") // select all the text elements for the xaxis
	.attr("transform", function(d) {
	return "translate(" + this.getBBox().height*-2 + "," + this.getBBox().height + ")rotate(-45)";
	});

	function rescale() {
	yScale.domain([0,Math.floor((Math.random()*90)+11)]) // change scale to 0, to between 10 and 100
	vis.select(".yaxis")
	.transition().duration(1500).ease("sin-in-out") // https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease
	.call(yAxis);

	vis.select(".yaxis_label")
	.text("Rescaled Axis");
	}

	</script>

	</body>
	</html>