Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
softend:test3 [2012/07/12 11:21] – admin | softend:test3 [2019/05/02 17:25] (aktuell) – Externe Bearbeitung 127.0.0.1 | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | < | ||
+ | < | ||
+ | <script type=" | ||
+ | <script type=" | ||
+ | <script type=" | ||
+ | <style type=" | ||
+ | |||
+ | body { | ||
+ | font: 10px sans-serif; | ||
+ | margin: 0; | ||
+ | } | ||
+ | path.line { | ||
+ | fill: none; | ||
+ | stroke: #666; | ||
+ | stroke-width: | ||
+ | } | ||
+ | |||
+ | path.area { | ||
+ | fill: #e7e7e7; | ||
+ | } | ||
+ | |||
+ | .axis { | ||
+ | shape-rendering: | ||
+ | } | ||
+ | |||
+ | .x.axis line { | ||
+ | stroke: #fff; | ||
+ | } | ||
+ | |||
+ | .x.axis .minor { | ||
+ | stroke-opacity: | ||
+ | } | ||
+ | |||
+ | .x.axis path { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .y.axis line, .y.axis path { | ||
+ | fill: none; | ||
+ | stroke: #000; | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | <script type=" | ||
+ | |||
+ | var m = [80, 80, 80, 80], | ||
+ | w = 960 - m[1] - m[3], | ||
+ | h = 500 - m[0] - m[2], | ||
+ | parse = d3.time.format(" | ||
+ | |||
+ | // Scales and axes. Note the inverted domain for the y-scale: bigger is up! | ||
+ | var x = d3.time.scale().range([0, | ||
+ | y = d3.scale.linear().range([h, | ||
+ | xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true), | ||
+ | yAxis = d3.svg.axis().scale(y).ticks(4).orient(" | ||
+ | |||
+ | // An area generator, for the light fill. | ||
+ | var area = d3.svg.area() | ||
+ | .interpolate(" | ||
+ | .x(function(d) { return x(d.date); }) | ||
+ | .y0(h) | ||
+ | .y1(function(d) { return y(d.price); }); | ||
+ | |||
+ | // A line generator, for the dark stroke. | ||
+ | var line = d3.svg.line() | ||
+ | .interpolate(" | ||
+ | .x(function(d) { return x(d.date); }) | ||
+ | .y(function(d) { return y(d.price); }); | ||
+ | |||
+ | d3.csv(" | ||
+ | |||
+ | // Filter to one symbol; the S&P 500. | ||
+ | var values = data.filter(function(d) { | ||
+ | return d.symbol == " | ||
+ | }); | ||
+ | |||
+ | // 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, | ||
+ | y.domain([0, | ||
+ | |||
+ | // Add an SVG element with the desired dimensions and margin. | ||
+ | var svg = d3.select(" | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | .append(" | ||
+ | .attr(" | ||
+ | |||
+ | // Add the clip path. | ||
+ | svg.append(" | ||
+ | .attr(" | ||
+ | .append(" | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | |||
+ | // Add the area path. | ||
+ | svg.append(" | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | |||
+ | // Add the x-axis. | ||
+ | svg.append(" | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | .call(xAxis); | ||
+ | |||
+ | // Add the y-axis. | ||
+ | svg.append(" | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | .call(yAxis); | ||
+ | |||
+ | // Add the line path. | ||
+ | svg.append(" | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | |||
+ | // Add a small label for the symbol name. | ||
+ | svg.append(" | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | .text(values[0].symbol); | ||
+ | |||
+ | // On click, update the x-axis. | ||
+ | svg.on(" | ||
+ | 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, | ||
+ | var t = svg.transition().duration(750); | ||
+ | t.select(" | ||
+ | t.select(" | ||
+ | t.select(" | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </ |