Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Remove axis-transition example.

  • Loading branch information...
commit 211ae9fd39f2df94476d9a76582fafa8f2a41446 1 parent 542726c
@mbostock authored
Showing with 0 additions and 157 deletions.
  1. +0 −157 examples/axis/axis-transition.html
View
157 examples/axis/axis-transition.html
@@ -1,157 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<style>
-
-body {
- font: 10px sans-serif;
- margin: 0;
-}
-
-path.line {
- fill: none;
- stroke: #666;
- stroke-width: 1.5px;
-}
-
-path.area {
- fill: #e7e7e7;
-}
-
-.axis {
- shape-rendering: crispEdges;
-}
-
-.x.axis line {
- stroke: #fff;
-}
-
-.x.axis .minor {
- stroke-opacity: .5;
-}
-
-.x.axis path {
- display: none;
-}
-
-.y.axis line, .y.axis path {
- fill: none;
- stroke: #000;
-}
-
-</style>
-<body>
-<script src="../../d3.js"></script>
-<script>
-
-var margin = {top: 20, right: 40, bottom: 20, left:20},
- width = 960 - margin.right - margin.left,
- height = 140 - margin.top - margin.bottom,
- parse = d3.time.format("%b %Y").parse;
-
-// Scales. Note the inverted range for the y-scale: bigger is up!
-var x = d3.time.scale()
- .range([0, width]);
-
-var y = d3.scale.linear()
- .range([height, 0]);
-
-// Axes
-var xAxis = d3.svg.axis()
- .scale(x)
- .tickSize(-height)
- .tickSubdivide(true);
-
-var yAxis = d3.svg.axis()
- .scale(y)
- .ticks(4)
- .orient("right");
-
-// An area generator, for the light fill.
-var area = d3.svg.area()
- .interpolate("monotone")
- .x(function(d) { return x(d.date); })
- .y0(height)
- .y1(function(d) { return y(d.price); });
-
-// A line generator, for the dark stroke.
-var line = d3.svg.line()
- .interpolate("monotone")
- .x(function(d) { return x(d.date); })
- .y(function(d) { return y(d.price); });
-
-d3.csv("../data/stocks.csv", function(error, data) {
-
- // Filter to one symbol; the S&P 500.
- var values = data.filter(function(d) {
- return d.symbol == "S&P 500";
- });
-
- // Parse dates and numbers. We assume values are sorted by date.
- values.forEach(function(d) {
- d.date = parse(d.date);
- d.price = +d.price;
- });
-
- // Compute the minimum and maximum date, and the maximum price.
- x.domain([values[0].date, values[values.length - 1].date]);
- y.domain([0, d3.max(values, function(d) { return d.price; })]);
-
- // Add an SVG element with the desired dimensions and margin.
- var svg = d3.select("body").append("svg")
- .attr("width", width + margin.right + margin.left)
- .attr("height", height + margin.top + margin.bottom)
- .append("g")
- .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
- // Add the clip path.
- svg.append("clipPath")
- .attr("id", "clip")
- .append("rect")
- .attr("width", width)
- .attr("height", height);
-
- // Add the area path.
- svg.append("path")
- .attr("class", "area")
- .attr("clip-path", "url(#clip)")
- .attr("d", area(values));
-
- // Add the x-axis.
- svg.append("g")
- .attr("class", "x axis")
- .attr("transform", "translate(0," + height + ")")
- .call(xAxis);
-
- // Add the y-axis.
- svg.append("g")
- .attr("class", "y axis")
- .attr("transform", "translate(" + width + ",0)")
- .call(yAxis);
-
- // Add the line path.
- svg.append("path")
- .attr("class", "line")
- .attr("clip-path", "url(#clip)")
- .attr("d", line(values));
-
- // Add a small label for the symbol name.
- svg.append("text")
- .attr("x", width - 6)
- .attr("y", height - 6)
- .attr("text-anchor", "end")
- .text(values[0].symbol);
-
- // On click, update the x-axis.
- svg.on("click", function() {
- var n = values.length - 1,
- i = Math.floor(Math.random() * n / 2),
- j = i + Math.floor(Math.random() * n / 2) + 1;
- x.domain([values[i].date, values[j].date]);
- var t = svg.transition().duration(750);
- t.select(".x.axis").call(xAxis);
- t.select(".area").attr("d", area(values));
- t.select(".line").attr("d", line(values));
- });
-});
-
-</script>
Please sign in to comment.
Something went wrong with that request. Please try again.