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>