Last active
May 31, 2017 10:05
-
-
Save TN1ck/3b9ac6175e5c244df42f to your computer and use it in GitHub Desktop.
Animated boxplot in d3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| width: 960px; | |
| height: 500px; | |
| position: relative; | |
| } | |
| svg { | |
| width: 960px; | |
| height: 500px; | |
| } | |
| .axis text { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| <body> | |
| <svg id="chart"></svg> | |
| </body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script> | |
| <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <script> | |
| // these time utilites are from mike bostock | |
| // Returns the weekday number for the given date relative to January 1, 1970. | |
| function weekday(date) { | |
| var weekdays = weekdayOfYear(date), | |
| year = date.getFullYear(); | |
| while (--year >= 1970) weekdays += weekdaysInYear(year); | |
| return weekdays; | |
| }; | |
| // Returns the date for the specified weekday number relative to January 1, 1970. | |
| function invert(weekdays) { | |
| var year = 1970, | |
| yearWeekdays; | |
| // Compute the year. | |
| while ((yearWeekdays = weekdaysInYear(year)) <= weekdays) { | |
| ++year; | |
| weekdays -= yearWeekdays; | |
| } | |
| // Compute the date from the remaining weekdays. | |
| var days = weekdays % 5, | |
| day0 = ((new Date(year, 0, 1)).getDay() + 6) % 7; | |
| if (day0 + days > 4) days += 2; | |
| return new Date(year, 0, (weekdays / 5 | 0) * 7 + days + 1); | |
| }; | |
| // Returns the number of weekdays in the specified year. | |
| function weekdaysInYear(year) { | |
| return weekdayOfYear(new Date(year, 11, 31)) + 1; | |
| }; | |
| // Returns the weekday number for the given date relative to the start of the year. | |
| function weekdayOfYear(date) { | |
| var days = d3.time.dayOfYear(date), | |
| weeks = days / 7 | 0, | |
| day0 = (d3.time.year(date).getDay() + 6) % 7, | |
| day1 = day0 + days - weeks * 7; | |
| return Math.max(0, days - weeks * 2 | |
| - (day0 <= 5 && day1 >= 5 || day0 <= 12 && day1 >= 12) // extra saturday | |
| - (day0 <= 6 && day1 >= 6 || day0 <= 13 && day1 >= 13)); // extra sunday | |
| }; | |
| function translate(x, y) { | |
| return ['translate(', x, ',', y, ')'].join(''); | |
| } | |
| function call(selector, data) { | |
| // select the svg | |
| var svg = d3.select(selector); | |
| // set up paramaters like margin and stuff | |
| var height = $(selector).height(), | |
| width = $(selector).width(), | |
| margins = {top: 10, bottom: 30, right: 50, left: 50}, | |
| colors = {'red': '#E56E5F', 'green': '#A9C05F', 'blue': '#48B3D8'}, | |
| transitionDuration = 1000; | |
| // set up the axis | |
| var x = d3.scale.linear() | |
| .domain([weekday(new Date(data[0].date)), | |
| weekday(new Date(data[data.length - 1].date))]) | |
| .range([margins.left, width - margins.right]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient('bottom') | |
| .ticks(10) | |
| .tickFormat(function (d) { | |
| var format = d3.time.format('%y-%m-%d'); | |
| return format(invert(d)); | |
| }); | |
| var y = d3.scale.linear() | |
| .domain([100, 0]) | |
| .rangeRound([margins.top, height - margins.bottom]) | |
| .nice(); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient('left') | |
| .ticks(10) | |
| .tickFormat(function (d) { | |
| return d + '$'; | |
| }); | |
| var boxplots = svg.append('g'); | |
| svg.append('g') | |
| .attr('class', 'x axis') | |
| .attr('transform', translate(0, height - margins.bottom)) | |
| .call(xAxis); | |
| svg.append('g') | |
| .attr('class', 'y axis') | |
| .attr('transform', translate(margins.left, 0)) | |
| .call(yAxis); | |
| // enter/update/exit | |
| function update(svg, data) { | |
| x = x.domain([weekday(data[0].date), | |
| weekday(data[data.length - 1].date)]); | |
| // using sth. like x(1) - x(0) isn't robust enough because of holidays | |
| // 10% margin | |
| var weekdaysBetween = weekday(data[data.length - 1].date) - weekday(data[0].date), | |
| elementWidth = ((width - (margins.right + margins.left))/weekdaysBetween) * 0.9; | |
| max = d3.max(data, function (d) { return d.high; }), | |
| min = d3.min(data, function (d) { return d.low; }), | |
| xAxis = xAxis.scale(x); | |
| y = y.domain([max, min]); | |
| yAxis = yAxis.scale(y); | |
| svg.selectAll('g.x.axis') | |
| .attr('transform', translate(elementWidth/2, height - margins.bottom)) | |
| .transition() | |
| .duration(transitionDuration) | |
| .call(xAxis); | |
| svg.selectAll('g.y.axis') | |
| .transition() | |
| .duration(transitionDuration) | |
| .call(yAxis); | |
| // new, old, removed elements | |
| var gs = boxplots.selectAll('.boxplot').data(data, _.property('date')); | |
| var lhrects = boxplots.selectAll('.lc-rect').data(data, _.property('date')); | |
| var ocrects = boxplots.selectAll('.oc-rect').data(data, _.property('date')); | |
| var lhrectsCall = function(selection) { | |
| return selection | |
| .attr('height', function (d) { return y(d.low) - y(d.high); }) | |
| .attr('x', elementWidth/2) | |
| .attr('y', function(d) { return y(d.high); }) | |
| .attr('opacity', 1) | |
| .attr('width', 1) | |
| }; | |
| var ocrectsCall = function(selection) { | |
| return selection | |
| .attr('height', function (d) { | |
| var height = Math.abs(y(d.open) - y(d.close)); | |
| return height < 1 ? 1 : height; | |
| }) | |
| .attr('width', elementWidth) | |
| .attr('y', function (d) { | |
| return y(d3.max([d.open, d.close])); | |
| }) | |
| .attr('fill', function (d) { | |
| return d.close > d.open ? colors.green : colors.red; | |
| }) | |
| .attr('x', 0); | |
| }; | |
| // | |
| // enter | |
| // | |
| var gsEnter = | |
| gs.enter() | |
| .append('g') | |
| .attr('opacity', 1) | |
| .attr('class', 'boxplot') | |
| .attr('transform', function(d) { | |
| var _x = x(weekday(d.date)) + elementWidth; | |
| var _y = 0; | |
| return translate(_x, _y); | |
| }); | |
| // low-high line | |
| gsEnter.append('rect') | |
| .call(lhrectsCall) | |
| .attr('class', 'lc-rect') | |
| .attr('opacity', 0) | |
| .transition() | |
| .duration(transitionDuration) | |
| .attr('opacity', 1) | |
| // open-close rect | |
| gsEnter.append('rect') | |
| .call(ocrectsCall) | |
| .attr('class', 'oc-rect') | |
| .attr('opacity', 0) | |
| .transition() | |
| .duration(transitionDuration) | |
| .attr('opacity', 1) | |
| // | |
| // update | |
| // | |
| gs.transition() | |
| .duration(transitionDuration) | |
| .attr('transform', function(d, i) { | |
| var _x = x(weekday(d.date)); | |
| var _y = 0; | |
| return translate(_x, _y); | |
| }); | |
| // low-high lines | |
| lhrects.transition().duration(transitionDuration).call(lhrectsCall); | |
| // open-close rects | |
| ocrects.transition().duration(transitionDuration).call(ocrectsCall); | |
| // | |
| // exit | |
| // | |
| gs.exit() | |
| .transition() | |
| .duration(transitionDuration) | |
| .attr('opacity', 0) | |
| .attr('transform', function(d) { | |
| var _x = x(weekday(d.date)) - elementWidth; | |
| var _y = 0; | |
| return translate(_x, _y); | |
| }) | |
| .remove() | |
| }; | |
| var start = 0; | |
| var end = 50; | |
| function step() { | |
| if (end >= data.length) { | |
| end = data.length; | |
| } | |
| if (start >= data.length - 50) { | |
| start = 0; | |
| end = 50; | |
| } | |
| update(svg, data.slice(start++, end++)); | |
| }; | |
| step(); | |
| setInterval(step, transitionDuration * 1.1); | |
| }; | |
| var data = [{'date': '2010-03-10','Date': '2010-03-10','Open': ' 16.51','High': ' 16.94','Low': ' 16.51','Close': ' 16.79','Volume': ' 33088600','Adj_Close': ' 16.79'},{'date': '2010-03-09','Date': '2010-03-09','Open': ' 16.41','High': ' 16.72','Low': ' 16.40','Close': ' 16.53','Volume': '20755200','Adj_Close': ' 16.53'},{'date': '2010-03-08','Date': '2010-03-08','Open': ' 16.32','High': ' 16.61','Low': ' 16.30','Close': ' 16.52','Volume': ' 30554000','Adj_Close': ' 16.52'},{'date': '2010-03-05','Date': '2010-03-05','Open': ' 15.89','High': ' 16.38','Low': ' 15.89','Close': ' 16.06','Volume': '21415000','Adj_Close': ' 16.06'},{'date': '2010-03-04','Date': '2010-03-04','Open': ' 15.55','High': ' 15.85','Low': ' 15.52','Close': ' 15.81','Volume': '22906000','Adj_Close': ' 15.81'},{'date': '2010-03-03','Date': '2010-03-03','Open': ' 15.85','High': ' 15.85','Low': ' 15.55','Close': ' 15.57','Volume': '20613800','Adj_Close': ' 15.57'},{'date': '2010-03-02','Date': '2010-03-02','Open': ' 15.87','High': ' 15.96','Low': ' 15.67','Close': ' 15.73','Volume': '20101800','Adj_Close': ' 15.73'},{'date': '2010-03-01','Date': '2010-03-01','Open': ' 15.43','High': ' 15.83','Low': ' 15.40','Close': ' 15.79','Volume': ' 17238000','Adj_Close': ' 15.79'},{'date': '2010-02-26','Date': '2010-02-26','Open': ' 15.27','High': ' 15.41','Low': ' 15.16','Close': ' 15.31','Volume': ' 14975600','Adj_Close': ' 15.31'},{'date': '2010-02-25','Date': '2010-02-25','Open': ' 15.32','High': ' 15.35','Low': ' 15.13','Close': ' 15.24','Volume': '20126900','Adj_Close': ' 15.24'},{'date': '2010-02-24','Date': '2010-02-24','Open': ' 15.48','High': ' 15.71','Low': ' 15.33','Close': ' 15.59','Volume': ' 19284200','Adj_Close': ' 15.59'},{'date': '2010-02-23','Date': '2010-02-23','Open': ' 15.45','High': ' 15.51','Low': ' 15.14','Close': ' 15.38','Volume': ' 18346700','Adj_Close': ' 15.38'},{'date': '2010-02-22','Date': '2010-02-22','Open': ' 15.61','High': ' 15.68','Low': ' 15.44','Close': ' 15.49','Volume': ' 10463500','Adj_Close': ' 15.49'},{'date': '2010-02-19','Date': '2010-02-19','Open': ' 15.49','High': ' 15.71','Low': ' 15.33','Close': ' 15.58','Volume': ' 15407900','Adj_Close': ' 15.58'},{'date': '2010-02-18','Date': '2010-02-18','Open': ' 15.40','High': ' 15.60','Low': ' 15.32','Close': ' 15.54','Volume': ' 13700100','Adj_Close': ' 15.54'},{'date': '2010-02-17','Date': '2010-02-17','Open': ' 15.50','High': ' 15.52','Low': ' 15.32','Close': ' 15.44','Volume': ' 12731900','Adj_Close': ' 15.44'},{'date': '2010-02-16','Date': '2010-02-16','Open': ' 15.23','High': ' 15.48','Low': ' 15.18','Close': ' 15.41','Volume': '21447200','Adj_Close': ' 15.41'},{'date': '2010-02-12','Date': '2010-02-12','Open': ' 15.07','High': ' 15.19','Low': ' 14.85','Close': ' 15.17','Volume': ' 18926400','Adj_Close': ' 15.17'},{'date': '2010-02-11','Date': '2010-02-11','Open': ' 14.87','High': ' 15.25','Low': ' 14.77','Close': ' 15.22','Volume': '24509500','Adj_Close': ' 15.22'},{'date': '2010-02-10','Date': '2010-02-10','Open': ' 15.02','High': ' 15.02','Low': ' 14.48','Close': ' 14.80','Volume': ' 36518100','Adj_Close': ' 14.80'},{'date': '2010-02-09','Date': '2010-02-09','Open': ' 15.20','High': ' 15.24','Low': ' 14.94','Close': ' 15.07','Volume': ' 16716900','Adj_Close': ' 15.07'},{'date': '2010-02-08','Date': '2010-02-08','Open': ' 15.18','High': ' 15.47','Low': ' 14.95','Close': ' 14.99','Volume': ' 19856400','Adj_Close': ' 14.99'},{'date': '2010-02-05','Date': '2010-02-05','Open': ' 15.01','High': ' 15.25','Low': ' 14.92','Close': ' 15.19','Volume': '20713800','Adj_Close': ' 15.19'},{'date': '2010-02-04','Date': '2010-02-04','Open': ' 15.34','High': ' 15.52','Low': ' 14.99','Close': ' 15.01','Volume': '27668100','Adj_Close': ' 15.01'},{'date': '2010-02-03','Date': '2010-02-03','Open': ' 15.12','High': ' 15.60','Low': ' 15.12','Close': ' 15.46','Volume': '24730600','Adj_Close': ' 15.46'},{'date': '2010-02-02','Date': '2010-02-02','Open': ' 15.10','High': ' 15.32','Low': ' 15.03','Close': ' 15.17','Volume': '27555200','Adj_Close': ' 15.17'},{'date': '2010-02-01','Date': '2010-02-01','Open': ' 15.14','High': ' 15.30','Low': ' 14.87','Close': ' 15.05','Volume': '29865700','Adj_Close': ' 15.05'},{'date': '2010-01-29','Date': '2010-01-29','Open': ' 15.51','High': ' 15.67','Low': ' 14.90','Close': ' 15.01','Volume': ' 39664600','Adj_Close': ' 15.01'},{'date': '2010-01-28','Date': '2010-01-28','Open': ' 15.93','High': ' 15.96','Low': ' 15.44','Close': ' 15.44','Volume': ' 30159500','Adj_Close': ' 15.44'},{'date': '2010-01-27','Date': '2010-01-27','Open': ' 16.46','High': ' 16.49','Low': ' 15.77','Close': ' 15.98','Volume': ' 41701000','Adj_Close': ' 15.98'},{'date': '2010-01-26','Date': '2010-01-26','Open': ' 15.82','High': ' 16.17','Low': ' 15.70','Close': ' 15.99','Volume': ' 43979400','Adj_Close': ' 15.99'},{'date': '2010-01-25','Date': '2010-01-25','Open': ' 16.07','High': ' 16.11','Low': ' 15.74','Close': ' 15.86','Volume': ' 19683700','Adj_Close': ' 15.86'},{'date': '2010-01-22','Date': '2010-01-22','Open': ' 16.08','High': ' 16.21','Low': ' 15.81','Close': ' 15.88','Volume': '25132800','Adj_Close': ' 15.88'},{'date': '2010-01-21','Date': '2010-01-21','Open': ' 16.39','High': ' 16.58','Low': ' 16.10','Close': ' 16.20','Volume': '21858400','Adj_Close': ' 16.20'},{'date': '2010-01-20','Date': '2010-01-20','Open': ' 16.65','High': ' 16.68','Low': ' 16.25','Close': ' 16.38','Volume': ' 14419500','Adj_Close': ' 16.38'},{'date': '2010-01-19','Date': '2010-01-19','Open': ' 16.78','High': ' 16.96','Low': ' 16.64','Close': ' 16.75','Volume': ' 15182600','Adj_Close': ' 16.75'},{'date': '2010-01-15','Date': '2010-01-15','Open': ' 17.25','High': ' 17.25','Low': ' 16.75','Close': ' 16.82','Volume': ' 18415000','Adj_Close': ' 16.82'},{'date': '2010-01-14','Date': '2010-01-14','Open': ' 16.81','High': ' 17.23','Low': ' 16.80','Close': ' 17.12','Volume': ' 16715600','Adj_Close': ' 17.12'},{'date': '2010-01-13','Date': '2010-01-13','Open': ' 16.88','High': ' 16.98','Low': ' 16.65','Close': ' 16.90','Volume': ' 16955600','Adj_Close': ' 16.90'},{'date': '2010-01-12','Date': '2010-01-12','Open': ' 16.65','High': ' 16.86','Low': ' 16.60','Close': ' 16.68','Volume': ' 15672400','Adj_Close': ' 16.68'},{'date': '2010-01-11','Date': '2010-01-11','Open': ' 16.77','High': ' 16.83','Low': ' 16.48','Close': ' 16.74','Volume': ' 16181900','Adj_Close': ' 16.74'},{'date': '2010-01-08','Date': '2010-01-08','Open': ' 16.68','High': ' 16.76','Low': ' 16.62','Close': ' 16.70','Volume': ' 15470000','Adj_Close': ' 16.70'},{'date': '2010-01-07','Date': '2010-01-07','Open': ' 16.81','High': ' 16.90','Low': ' 16.57','Close': ' 16.70','Volume': ' 31816300','Adj_Close': ' 16.70'},{'date': '2010-01-06','Date': '2010-01-06','Open': ' 17.17','High': ' 17.30','Low': ' 17.07','Close': ' 17.17','Volume': ' 16422000','Adj_Close': ' 17.17'},{'date': '2010-01-05','Date': '2010-01-05','Open': ' 17.22','High': ' 17.23','Low': ' 17.00','Close': ' 17.23','Volume': ' 11718100','Adj_Close': ' 17.23'},{'date': '2010-01-04','Date': '2010-01-04','Open': ' 16.94','High': ' 17.20','Low': ' 16.88','Close': ' 17.10','Volume': ' 16587400','Adj_Close': ' 17.10'},{'date': '2009-12-31','Date': '2009-12-31','Open': ' 16.92','High': ' 16.96','Low': ' 16.77','Close': ' 16.78','Volume': ' 9515600','Adj_Close': ' 16.78'},{'date': '2009-12-30','Date': '2009-12-30','Open': ' 16.83','High': ' 16.99','Low': ' 16.81','Close': ' 16.98','Volume': ' 8188000','Adj_Close': ' 16.98'},{'date': '2009-12-29','Date': '2009-12-29','Open': ' 16.84','High': ' 16.97','Low': ' 16.68','Close': ' 16.92','Volume': ' 13450200','Adj_Close': ' 16.92'},{'date': '2009-12-28','Date': '2009-12-28','Open': ' 16.74','High': ' 16.94','Low': ' 16.68','Close': ' 16.88','Volume': ' 11504300','Adj_Close': ' 16.88'},{'date': '2009-12-24','Date': '2009-12-24','Open': ' 16.69','High': ' 16.75','Low': ' 16.65','Close': ' 16.72','Volume': ' 4736600','Adj_Close': ' 16.72'},{'date': '2009-12-23','Date': '2009-12-23','Open': ' 16.35','High': ' 16.70','Low': ' 16.00','Close': ' 16.67','Volume': '23584100','Adj_Close': ' 16.67'},{'date': '2009-12-22','Date': '2009-12-22','Open': ' 15.88','High': ' 16.08','Low': ' 15.82','Close': ' 15.98','Volume': ' 10631600','Adj_Close': ' 15.98'},{'date': '2009-12-21','Date': '2009-12-21','Open': ' 16.11','High': ' 16.17','Low': ' 15.85','Close': ' 15.88','Volume': ' 17806100','Adj_Close': ' 15.88'},{'date': '2009-12-18','Date': '2009-12-18','Open': ' 15.94','High': ' 16.14','Low': ' 15.78','Close': ' 16.14','Volume': ' 30021100','Adj_Close': ' 16.14'},{'date': '2009-12-17','Date': '2009-12-17','Open': ' 15.72','High': ' 15.96','Low': ' 15.64','Close': ' 15.82','Volume': '26156700','Adj_Close': ' 15.82'},{'date': '2009-12-16','Date': '2009-12-16','Open': ' 15.57','High': ' 15.82','Low': ' 15.47','Close': ' 15.79','Volume': '20637500','Adj_Close': ' 15.79'},{'date': '2009-12-15','Date': '2009-12-15','Open': ' 15.77','High': ' 15.88','Low': ' 15.65','Close': ' 15.74','Volume': ' 13272900','Adj_Close': ' 15.74'},{'date': '2009-12-14','Date': '2009-12-14','Open': ' 15.90','High': ' 15.97','Low': ' 15.64','Close': ' 15.81','Volume': ' 18086300','Adj_Close': ' 15.81'},{'date': '2009-12-11','Date': '2009-12-11','Open': ' 15.85','High': ' 15.90','Low': ' 15.62','Close': ' 15.74','Volume': '22607500','Adj_Close': ' 15.74'},{'date': '2009-12-10','Date': '2009-12-10','Open': ' 15.34','High': ' 15.57','Low': ' 15.24','Close': ' 15.49','Volume': ' 18743000','Adj_Close': ' 15.49'},{'date': '2009-12-09','Date': '2009-12-09','Open': ' 15.52','High': ' 15.54','Low': ' 15.12','Close': ' 15.18','Volume': '25396900','Adj_Close': ' 15.18'},{'date': '2009-12-08','Date': '2009-12-08','Open': ' 15.45','High': ' 15.90','Low': ' 15.23','Close': ' 15.45','Volume': ' 31160600','Adj_Close': ' 15.45'},{'date': '2009-12-07','Date': '2009-12-07','Open': ' 15.36','High': ' 15.65','Low': ' 15.32','Close': ' 15.45','Volume': ' 18035200','Adj_Close': ' 15.45'},{'date': '2009-12-04','Date': '2009-12-04','Open': ' 15.32','High': ' 15.38','Low': ' 15.00','Close': ' 15.19','Volume': ' 17576000','Adj_Close': ' 15.19'},{'date': '2009-12-03','Date': '2009-12-03','Open': ' 15.33','High': ' 15.38','Low': ' 15.10','Close': ' 15.11','Volume': ' 17196200','Adj_Close': ' 15.11'},{'date': '2009-12-02','Date': '2009-12-02','Open': ' 15.17','High': ' 15.50','Low': ' 15.16','Close': ' 15.31','Volume': ' 17807800','Adj_Close': ' 15.31'},{'date': '2009-12-01','Date': '2009-12-01','Open': ' 15.03','High': ' 15.19','Low': ' 14.85','Close': ' 15.13','Volume': ' 17096500','Adj_Close': ' 15.13'},{'date': '2009-11-30','Date': '2009-11-30','Open': ' 14.90','High': ' 15.10','Low': ' 14.80','Close': ' 14.97','Volume': ' 17587000','Adj_Close': ' 14.97'},{'date': '2009-11-27','Date': '2009-11-27','Open': ' 15.04','High': ' 15.09','Low': ' 14.88','Close': ' 15.00','Volume': ' 11452900','Adj_Close': ' 15.00'},{'date': '2009-11-25','Date': '2009-11-25','Open': ' 15.29','High': ' 15.35','Low': ' 15.17','Close': ' 15.30','Volume': '21370600','Adj_Close': ' 15.30'},{'date': '2009-11-24','Date': '2009-11-24','Open': ' 15.38','High': ' 15.49','Low': ' 15.20','Close': ' 15.24','Volume': ' 19774000','Adj_Close': ' 15.24'},{'date': '2009-11-23','Date': '2009-11-23','Open': ' 15.58','High': ' 15.65','Low': ' 15.34','Close': ' 15.45','Volume': '24501400','Adj_Close': ' 15.45'},{'date': '2009-11-20','Date': '2009-11-20','Open': ' 15.60','High': ' 15.74','Low': ' 15.36','Close': ' 15.38','Volume': ' 16127300','Adj_Close': ' 15.38'},{'date': '2009-11-19','Date': '2009-11-19','Open': ' 15.83','High': ' 15.85','Low': ' 15.52','Close': ' 15.61','Volume': '26891000','Adj_Close': ' 15.61'},{'date': '2009-11-18','Date': '2009-11-18','Open': ' 16.02','High': ' 16.13','Low': ' 15.84','Close': ' 15.98','Volume': ' 12775400','Adj_Close': ' 15.98'},{'date': '2009-11-17','Date': '2009-11-17','Open': ' 15.89','High': ' 16.11','Low': ' 15.73','Close': ' 16.05','Volume': '22249500','Adj_Close': ' 16.05'},{'date': '2009-11-16','Date': '2009-11-16','Open': ' 16.08','High': ' 16.19','Low': ' 15.92','Close': ' 16.07','Volume': '26125200','Adj_Close': ' 16.07'},{'date': '2009-11-13','Date': '2009-11-13','Open': ' 16.04','High': ' 16.10','Low': ' 15.92','Close': ' 15.93','Volume': '26453800','Adj_Close': ' 15.93'},{'date': '2009-11-12','Date': '2009-11-12','Open': ' 16.10','High': ' 16.28','Low': ' 15.97','Close': ' 16.00','Volume': ' 10210100','Adj_Close': ' 16.00'},{'date': '2009-11-11','Date': '2009-11-11','Open': ' 16.00','High': ' 16.16','Low': ' 15.92','Close': ' 16.09','Volume': ' 16346100','Adj_Close': ' 16.09'},{'date': '2009-11-10','Date': '2009-11-10','Open': ' 16.08','High': ' 16.36','Low': ' 16.01','Close': ' 16.04','Volume': '24097400','Adj_Close': ' 16.04'},{'date': '2009-11-09','Date': '2009-11-09','Open': ' 16.13','High': ' 16.19','Low': ' 15.97','Close': ' 16.02','Volume': ' 14831900','Adj_Close': ' 16.02'},{'date': '2009-11-06','Date': '2009-11-06','Open': ' 15.89','High': ' 16.03','Low': ' 15.76','Close': ' 15.94','Volume': ' 13562500','Adj_Close': ' 15.94'},{'date': '2009-11-05','Date': '2009-11-05','Open': ' 15.80','High': ' 16.00','Low': ' 15.74','Close': ' 15.90','Volume': '27732500','Adj_Close': ' 15.90'},{'date': '2009-11-04','Date': '2009-11-04','Open': ' 15.90','High': ' 15.90','Low': ' 15.66','Close': ' 15.69','Volume': ' 18697100','Adj_Close': ' 15.69'},{'date': '2009-11-03','Date': '2009-11-03','Open': ' 15.71','High': ' 15.79','Low': ' 15.63','Close': ' 15.70','Volume': ' 17240200','Adj_Close': ' 15.70'},{'date': '2009-11-02','Date': '2009-11-02','Open': ' 15.75','High': ' 15.90','Low': ' 15.59','Close': ' 15.85','Volume': ' 15258200','Adj_Close': ' 15.85'},{'date': '2009-10-30','Date': '2009-10-30','Open': ' 16.06','High': ' 16.37','Low': ' 15.80','Close': ' 15.90','Volume': '22321700','Adj_Close': ' 15.90'},{'date': '2009-10-29','Date': '2009-10-29','Open': ' 16.19','High': ' 16.38','Low': ' 15.74','Close': ' 16.13','Volume': ' 39146700','Adj_Close': ' 16.13'},{'date': '2009-10-28','Date': '2009-10-28','Open': ' 16.69','High': ' 16.77','Low': ' 16.02','Close': ' 16.04','Volume': '25044800','Adj_Close': ' 16.04'},{'date': '2009-10-27','Date': '2009-10-27','Open': ' 16.69','High': ' 16.87','Low': ' 16.35','Close': ' 16.69','Volume': ' 19917800','Adj_Close': ' 16.69'},{'date': '2009-10-26','Date': '2009-10-26','Open': ' 17.05','High': ' 17.20','Low': ' 16.67','Close': ' 16.87','Volume': '21213100','Adj_Close': ' 16.87'},{'date': '2009-10-23','Date': '2009-10-23','Open': ' 17.71','High': ' 17.75','Low': ' 17.09','Close': ' 17.22','Volume': ' 17760400','Adj_Close': ' 17.22'},{'date': '2009-10-22','Date': '2009-10-22','Open': ' 17.54','High': ' 17.75','Low': ' 17.30','Close': ' 17.67','Volume': ' 16018100','Adj_Close': ' 17.67'},{'date': '2009-10-21','Date': '2009-10-21','Open': ' 17.98','High': ' 18.02','Low': ' 17.57','Close': ' 17.66','Volume': ' 46204500','Adj_Close': ' 17.66'},{'date': '2009-10-20','Date': '2009-10-20','Open': ' 17.37','High': ' 17.41','Low': ' 16.87','Close': ' 17.17','Volume': ' 38320400','Adj_Close': ' 17.17'},{'date': '2009-10-19','Date': '2009-10-19','Open': ' 16.80','High': ' 17.29','Low': ' 16.70','Close': ' 17.22','Volume': ' 17878000','Adj_Close': ' 17.22'},{'date': '2009-10-16','Date': '2009-10-16','Open': ' 16.61','High': ' 16.85','Low': ' 16.40','Close': ' 16.81','Volume': '20479000','Adj_Close': ' 16.81'},{'date': '2009-10-15','Date': '2009-10-15','Open': ' 16.84','High': ' 16.89','Low': ' 16.46','Close': ' 16.52','Volume': '24337300','Adj_Close': ' 16.52'},{'date': '2009-10-14','Date': '2009-10-14','Open': ' 16.93','High': ' 17.03','Low': ' 16.82','Close': ' 16.95','Volume': ' 17508000','Adj_Close': ' 16.95'},{'date': '2009-10-13','Date': '2009-10-13','Open': ' 16.95','High': ' 17.00','Low': ' 16.81','Close': ' 16.88','Volume': ' 19492500','Adj_Close': ' 16.88'},{'date': '2009-10-12','Date': '2009-10-12','Open': ' 16.96','High': ' 17.11','Low': ' 16.66','Close': ' 16.75','Volume': ' 16904700','Adj_Close': ' 16.75'},{'date': '2009-10-09','Date': '2009-10-09','Open': ' 17.43','High': ' 17.48','Low': ' 16.84','Close': ' 16.87','Volume': '29015700','Adj_Close': ' 16.87'},{'date': '2009-10-08','Date': '2009-10-08','Open': ' 17.63','High': ' 17.86','Low': ' 17.54','Close': ' 17.58','Volume': '27966900','Adj_Close': ' 17.58'},{'date': '2009-10-07','Date': '2009-10-07','Open': ' 17.22','High': ' 17.49','Low': ' 17.15','Close': ' 17.49','Volume': ' 12456700','Adj_Close': ' 17.49'},{'date': '2009-10-06','Date': '2009-10-06','Open': ' 16.96','High': ' 17.35','Low': ' 16.95','Close': ' 17.30','Volume': '21427600','Adj_Close': ' 17.30'},{'date': '2009-10-05','Date': '2009-10-05','Open': ' 16.85','High': ' 17.13','Low': ' 16.66','Close': ' 16.80','Volume': '22224900','Adj_Close': ' 16.80'},{'date': '2009-10-02','Date': '2009-10-02','Open': ' 17.23','High': ' 17.35','Low': ' 16.78','Close': ' 16.84','Volume': ' 32685300','Adj_Close': ' 16.84'},{'date': '2009-10-01','Date': '2009-10-01','Open': ' 17.65','High': ' 17.72','Low': ' 17.20','Close': ' 17.39','Volume': '24871600','Adj_Close': ' 17.39'},{'date': '2009-09-30','Date': '2009-09-30','Open': ' 17.48','High': ' 17.94','Low': ' 17.24','Close': ' 17.81','Volume': ' 39878200','Adj_Close': ' 17.81'},{'date': '2009-09-29','Date': '2009-09-29','Open': ' 17.50','High': ' 17.66','Low': ' 17.21','Close': ' 17.45','Volume': ' 31600100','Adj_Close': ' 17.45'},{'date': '2009-09-28','Date': '2009-09-28','Open': ' 16.98','High': ' 17.47','Low': ' 16.95','Close': ' 17.47','Volume': '26412200','Adj_Close': ' 17.47'},{'date': '2009-09-25','Date': '2009-09-25','Open': ' 16.80','High': ' 17.15','Low': ' 16.75','Close': ' 17.08','Volume': '20701400','Adj_Close': ' 17.08'},{'date': '2009-09-24','Date': '2009-09-24','Open': ' 17.31','High': ' 17.32','Low': ' 16.65','Close': ' 16.89','Volume': '26493700','Adj_Close': ' 16.89'},{'date': '2009-09-23','Date': '2009-09-23','Open': ' 17.10','High': ' 17.60','Low': ' 16.97','Close': ' 17.21','Volume': ' 36814300','Adj_Close': ' 17.21'},{'date': '2009-09-22','Date': '2009-09-22','Open': ' 17.17','High': ' 17.22','Low': ' 16.75','Close': ' 16.86','Volume': ' 30588800','Adj_Close': ' 16.86'},{'date': '2009-09-21','Date': '2009-09-21','Open': ' 17.23','High': ' 17.23','Low': ' 16.96','Close': ' 17.04','Volume': '26826900','Adj_Close': ' 17.04'},{'date': '2009-09-18','Date': '2009-09-18','Open': ' 17.70','High': ' 17.70','Low': ' 16.85','Close': ' 17.39','Volume': ' 86402600','Adj_Close': ' 17.39'},{'date': '2009-09-17','Date': '2009-09-17','Open': ' 17.00','High': ' 17.79','Low': ' 16.96','Close': ' 17.50','Volume': ' 62010000','Adj_Close': ' 17.50'},{'date': '2009-09-16','Date': '2009-09-16','Open': ' 16.57','High': ' 17.11','Low': ' 16.52','Close': ' 16.99','Volume': ' 53594700','Adj_Close': ' 16.99'},{'date': '2009-09-15','Date': '2009-09-15','Open': ' 16.01','High': ' 16.49','Low': ' 15.87','Close': ' 16.41','Volume': ' 64668200','Adj_Close': ' 16.41'},{'date': '2009-09-14','Date': '2009-09-14','Open': ' 15.45','High': ' 15.58','Low': ' 15.28','Close': ' 15.57','Volume': ' 19451200','Adj_Close': ' 15.57'}].reverse(); | |
| data = data.map(function(d) { | |
| return { | |
| date: new Date(d.date), | |
| open: Number(d.Open), | |
| close: Number(d.Close), | |
| volume: Number(d.Volume), | |
| adj_close: Number(d.Adj_Close), | |
| high: Number(d.High), | |
| low: Number(d.Low) | |
| }; | |
| }); | |
| call('#chart', data); | |
| </script> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
To be seen here: http://bl.ocks.org/tn1ck/3b9ac6175e5c244df42f