Focus + context

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>

<head>
    <title>Range selector</title>

.diagram {
            fill: none;
        }

.selection {
            stroke: green;
            stroke-opacity: 0.3;
            fill: green;
            fill-opacity: 0.1;
        }

.limit {
            stroke: none;
            fill: green;
        }

.axis, .xtick, .xlabel, .ytick, .ylabel {
            stroke: black;
        }

.xlabel, .ylabel {
            font-family: Arial;
            font-size: 9pt;
        }

.focus .plot {
            stroke: red;
        }

.context .plot {
            stroke: blue;
        }
    </style>
</head>
<body>

var data = create_time_series(1);

focus_context({
        parent: "#selector",
        id: "diagram",
        x: 40,
        y: 30,
        width: 500,
        height: 400,
        data: data,
        gap: 10,
        limit: 10,
        left: 30,
        right: 10,
        top: 5,
        callback: function (l, r) {
            var format = d3.time.format("%d-%m-%Y");
            d3.select("#min").text(format(new Date(l)));
            d3.select("#max").text(format(new Date(r)));
        },
        foptions: {
            klass: "focus",
            xaxis: {
                label: function (d) { return d3.time.format("%m-%y")(new Date(d)); }
            },
            yaxis: {
                label: String
            }
        },
        coptions: {
            klass: "context",
            ratio: 0.2,
            xaxis: {
                label: function (d) { return d3.time.format("%Y")(new Date(d)); }
            }
        },
        soptions: {
            parent: "#diagram",
            range: d3.extent(data, getter("x"))
        }
    });

</script>

</body>
</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

Modified http://mbostock.github.com/d3/d3.time.js to a secure url

https://mbostock.github.com/d3/d3.js

https://mbostock.github.com/d3/d3.time.js