Skip to content

Instantly share code, notes, and snippets.

@TN1ck

TN1ck/index.html

Last active May 31, 2017 10:05
Show Gist options
  • Save TN1ck/3b9ac6175e5c244df42f to your computer and use it in GitHub Desktop.
Save TN1ck/3b9ac6175e5c244df42f to your computer and use it in GitHub Desktop.
Download ZIP
Animated boxplot in d3
Raw
index.html
<!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>
@TN1ck
Copy link
Author

TN1ck commented May 31, 2017

To be seen here: http://bl.ocks.org/tn1ck/3b9ac6175e5c244df42f

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment