phoebebright/index.html

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

    <style type="text/css">

        .axis path,
        .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }

        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }

        .lines {
            fill: none;
            stroke: black;
            stroke-width: 1.5px;
            shape-rendering: crispEdges;
        }

    </style>
</head>

<body>
<button id="rescale" onclick="rescale();">Rescale</button></div>
<script>
    var width = 700,   // width of svg
            height = 400,  // height of svg
            padding = 100; // space around the chart, not including labels

    var data=[{"date":new Date(2012,0,1), "value": 3, 'pct': 55},
        {"date":new Date(2012,0,3), "value": 2, "pct": 30      },
        {"date":new Date(2012,0,12), "value": 33, "pct": 10},
        {"date":new Date(2012,0,21), "value": 13, "pct": 29},
        {"date":new Date(2012,0,30), "value": 23, "pct": 22}];


    var x_domain = d3.extent(data, function(d) {
                return d.date; }),
            y_domain = d3.extent(data, function(d) { return d.value; });

    // define the y scale  (vertical)
    var yScale = d3.scale.linear()
            .domain(y_domain)
            .range([height - padding, padding]);   // map these top and bottom of the chart


    var xScale =  d3.time.scale()
            .domain(x_domain)
            .range([padding, width - padding]);   // map these sides of the chart, in this case 100 and 600

    // 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);


    // create the svg

    var div = d3.select("body");

    div.select("svg").remove();


    var vis = div.append("svg")
            .attr("width", width)
            .attr("height", height)
            .attr("transform", "translate(" + padding + "," + padding + ")");


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

    // draw x axis with labels and move to the bottom of the chart area
    vis.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + (height - padding) + ")")
            .call(xAxis);


    // DRAW LINES

    var line = d3.svg.line()
            .x(function(d) {
                return xScale(d.date); })
            .y(function(d) {
                return yScale(d.value); })
            .interpolate("basis");

    vis.selectAll(".lines")
            .data([data])
            .enter()
            .append("svg:path")
            .attr("d", line)
            .attr("class", "lines");


    function rescale() {

        // change the y axis to show percentage

        yScale.domain([0,100])  // redraw as percentage outstanding
        vis.select(".yaxis")
                .transition().duration(1500).ease("sin-in-out")  // https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease
                .call(yAxis);

        // now redraw the line to use pct
        line.y(function(d) {
                    return yScale(d.pct); });

         vis.selectAll(".lines")
                    .transition()
                    .duration(500)
                    .ease("linear")
              .attr("d", line);

    }

</script>

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

	<style type="text/css">

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	.lines {
	fill: none;
	stroke: black;
	stroke-width: 1.5px;
	shape-rendering: crispEdges;
	}

	</style>
	</head>

	<body>
	<button id="rescale" onclick="rescale();">Rescale</button></div>
	<script>
	var width = 700, // width of svg
	height = 400, // height of svg
	padding = 100; // space around the chart, not including labels

	var data=[{"date":new Date(2012,0,1), "value": 3, 'pct': 55},
	{"date":new Date(2012,0,3), "value": 2, "pct": 30 },
	{"date":new Date(2012,0,12), "value": 33, "pct": 10},
	{"date":new Date(2012,0,21), "value": 13, "pct": 29},
	{"date":new Date(2012,0,30), "value": 23, "pct": 22}];


	var x_domain = d3.extent(data, function(d) {
	return d.date; }),
	y_domain = d3.extent(data, function(d) { return d.value; });

	// define the y scale (vertical)
	var yScale = d3.scale.linear()
	.domain(y_domain)
	.range([height - padding, padding]); // map these top and bottom of the chart


	var xScale = d3.time.scale()
	.domain(x_domain)
	.range([padding, width - padding]); // map these sides of the chart, in this case 100 and 600

	// 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);



	// create the svg

	var div = d3.select("body");

	div.select("svg").remove();


	var vis = div.append("svg")
	.attr("width", width)
	.attr("height", height)
	.attr("transform", "translate(" + padding + "," + padding + ")");






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

	// draw x axis with labels and move to the bottom of the chart area
	vis.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0," + (height - padding) + ")")
	.call(xAxis);



	// DRAW LINES

	var line = d3.svg.line()
	.x(function(d) {
	return xScale(d.date); })
	.y(function(d) {
	return yScale(d.value); })
	.interpolate("basis");

	vis.selectAll(".lines")
	.data([data])
	.enter()
	.append("svg:path")
	.attr("d", line)
	.attr("class", "lines");


	function rescale() {

	// change the y axis to show percentage

	yScale.domain([0,100]) // redraw as percentage outstanding
	vis.select(".yaxis")
	.transition().duration(1500).ease("sin-in-out") // https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease
	.call(yAxis);

	// now redraw the line to use pct
	line.y(function(d) {
	return yScale(d.pct); });

	vis.selectAll(".lines")
	.transition()
	.duration(500)
	.ease("linear")
	.attr("d", line);

	}

	</script>

	</body>
	</html>