[ Launch: Clean: candle + line + area charts ] 8085642 by DeBraid
[ Launch: Clean: candle + line + area charts ] 8085338 by DeBraid
[ Launch: candle chart ] 8042694 by DeBraid
[ Launch: Tributary inlet ] 7798421 by DeBraid
-
-
Save DeBraid/8085642 to your computer and use it in GitHub Desktop.
Clean: candle + line + area charts
This file contains 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
{"description":"Clean: candle + line + area charts","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"quote.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"sample.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"sample.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"buttons,js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"buttons.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"dropdown.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/W3cqIY2.png"} |
This file contains 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
// loading sample.json | |
var sample2 = tributary.sample.sample2; | |
// date manipulation to format UTC to js Date obj | |
sample2.forEach(function(d) { d.time = new Date(d.time * 1000); }); | |
// helpers and constants | |
var margin = {"top": 50, "right": 83, "bottom": 56, "left": 50}; | |
var width = 676 + margin.right + margin.left; | |
var height = 390 + margin.top + margin.bottom; | |
var timeFormat = d3.time.format("%c"); | |
var X = width/sample2.length*0.25; | |
// drop down menu | |
var chartOptions = ["candle", "line", "area"]; | |
d3.select(".tributary_svg") | |
.append("foreignObject") | |
.attr({ | |
"height": 100, | |
"width": 300, | |
"transform": "translate(" + margin.right + "," + margin.top + ")" | |
}) | |
.append("xhtml:select") | |
.attr("id", "drop-down") | |
.selectAll("option") | |
.data(chartOptions) | |
.enter() | |
.append("option") | |
.text(function(d) {return d;}) | |
.attr("value", function(d){ return d; }); | |
d3.select("#drop-down").on("change", function () { | |
selected = this.value; | |
console.log(selected); | |
}); | |
// set up chart | |
var svg = d3.select("svg").attr("width", width).attr("height", height).style("position", "relative"); | |
var canvas = d3.select("svg"); | |
var area = d3.svg.area() | |
.x(function(d){ return xScale(d.time); }) | |
.y0(height- margin.bottom) | |
.y1(function(d){ return yScale(d.close); }); | |
var line = d3.svg.line() | |
.x(function(d){ return xScale(d.time); }) | |
.y(function(d){ return yScale(d.close); }); | |
// find data range | |
var xDomain = d3.extent(sample2, function (d, i){ return d.time; }); | |
var yMin = d3.min(sample2, function(d){ return Math.min(d.low); }); | |
var yMax = d3.max(sample2, function(d){ return Math.max(d.high); }); | |
// scale using ranges, add 10pc padding to x-domain | |
var xScale = d3.time.scale() | |
.domain(xDomain); | |
xScale.domain([-0.1,1.1].map(xScale.invert)) | |
.range([margin.left, width - margin.right]); | |
var yScale = d3.scale.linear() | |
.domain([yMin, yMax]) | |
.range([height - margin.top, margin.bottom]); | |
// set up axes | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom") | |
.ticks(10) | |
.tickPadding(10); | |
// .tickFormat(timeFormat) | |
var yAxis = d3.svg.axis() | |
.scale(yScale) | |
.orient("right") | |
.tickValues(yScale.domain()); | |
// chart options by type | |
var chartDraw = { | |
candle: function(){ | |
canvas.selectAll("line") | |
.data(sample2) | |
.enter() | |
.append("svg:line") | |
.attr({ | |
"x1": function(d,i) { return xScale(d.time) - X*0.5; }, | |
"x2": function(d,i) { return xScale(d.time) - X*0.5; }, | |
"y1": function(d,i) { return yScale(d.high); }, | |
"y2": function(d,i) { return yScale(d.low); }, | |
"stroke": "black" | |
}); | |
canvas.selectAll("rect") | |
.data(sample2) | |
.enter() | |
.append("svg:rect") | |
.attr({ | |
"width": function(d){ return X}, | |
"x": function(d,i) { return xScale(d.time) - X; }, | |
"y": function(d,i) { return yScale(Math.max(d.open, d.close)); }, | |
"height": function(d,i) { return yScale(Math.min(d.open, d.close)) - yScale(Math.max(d.open, d.close)); }, | |
"fill": function (d) { return d.open > d.close ? "#dc432c" : "#0CD1AA" }, | |
"stroke": "black" | |
}); | |
}, | |
line: function(){ | |
canvas.append("path") | |
.datum(sample2) | |
.attr("class", "line") | |
.attr("d", line); | |
}, | |
area: function (){ | |
canvas.append("path") | |
.datum(sample2) | |
.attr("class", "area") | |
.attr("d", area); | |
} | |
}; | |
// draw axes | |
canvas.append('g').call(xAxis) | |
.attr('transform', 'translate(0, ' + (height - margin.bottom) + ')'); | |
canvas.append('g').call(yAxis) | |
.attr('transform', 'translate(' + (width - margin.right) + ', 0)'); | |
/* | |
* CHOOSE CHART TYPE | |
*/ | |
chartDraw.area(); | |
// chartDraw.line(); | |
// chartDraw.candle(); | |
This file contains 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
{"sample2": [ | |
{"time": 1387212120, "open": 368, "close": 275, "high": 380, "low": 158}, | |
{"time": 1387212130, "open": 330, "close": 350, "high": 389, "low": 310}, | |
{"time": 1387212140, "open": 213, "close": 253, "high": 289, "low": 213}, | |
{"time": 1387212150, "open": 180, "close": 150, "high": 189, "low": 110}, | |
{"time": 1387212160, "open": 310, "close": 350, "high": 389, "low": 310}, | |
{"time": 1387212170, "open": 213, "close": 253, "high": 289, "low": 213}, | |
{"time": 1387212180, "open": 190, "close": 150, "high": 189, "low": 110}, | |
{"time": 1387212190, "open": 362, "close": 530, "high": 589, "low": 510}, | |
{"time": 1387212200, "open": 409, "close": 356, "high": 300, "low": 510}, | |
{"time": 1387212210, "open": 334, "close": 275, "high": 369, "low": 185}, | |
{"time": 1387212220, "open": 304, "close": 389, "high": 389, "low": 310}, | |
{"time": 1387212230, "open": 395, "close": 235, "high": 289, "low": 213}, | |
{"time": 1387212240, "open": 339, "close": 148, "high": 189, "low": 110}, | |
{"time": 1387212250, "open": 310, "close": 350, "high": 389, "low": 310}, | |
{"time": 1387212260, "open": 283, "close": 253, "high": 289, "low": 213}, | |
{"time": 1387212270, "open": 290, "close": 350, "high": 189, "low": 110}, | |
{"time": 1387212280, "open": 448, "close": 550, "high": 624, "low": 510}, | |
{"time": 1387212290, "open": 419, "close": 299, "high": 194, "low": 510}, | |
{"time": 1387212300, "open": 150, "close": 163, "high": 189, "low": 145}, | |
{"time": 1387212310, "open": 330, "close": 350, "high": 356, "low": 310}, | |
{"time": 1387212320, "open": 213, "close": 253, "high": 289, "low": 213}, | |
{"time": 1387212330, "open": 180, "close": 150, "high": 189, "low": 110}, | |
{"time": 1387212340, "open": 310, "close": 350, "high": 389, "low": 310}, | |
{"time": 1387212350, "open": 213, "close": 253, "high": 289, "low": 213}, | |
{"time": 1387212360, "open": 190, "close": 150, "high": 230, "low": 110}, | |
{"time": 1387212370, "open": 408, "close": 301, "high": 382, "low": 245}, | |
{"time": 1387212380, "open": 330, "close": 356, "high": 404, "low": 230}, | |
{"time": 1387212390, "open": 183, "close": 143, "high": 190, "low": 31}, | |
{"time": 1387212400, "open": 183, "close": 265, "high": 271, "low": 165}, | |
{"time": 1387212410, "open": 395, "close": 253, "high": 424, "low": 213}, | |
{"time": 1387212420, "open": 339, "close": 379, "high": 446, "low": 275}, | |
{"time": 1387212430, "open": 310, "close": 350, "high": 389, "low": 310}, | |
{"time": 1387212440, "open": 283, "close": 253, "high": 289, "low": 213}, | |
{"time": 1387212450, "open": 162, "close": 350, "high": 189, "low": 122}, | |
{"time": 1387212460, "open": 452, "close": 361, "high": 525, "low": 329}, | |
{"time": 1387212470, "open": 173, "close": 281, "high": 312, "low": 141}, | |
{"time": 1387212480, "open": 183, "close": 265, "high": 271, "low": 165}, | |
{"time": 1387212490, "open": 395, "close": 253, "high": 424, "low": 213}, | |
{"time": 1387212500, "open": 339, "close": 379, "high": 446, "low": 275}, | |
{"time": 1387212510, "open": 310, "close": 350, "high": 389, "low": 310}, | |
{"time": 1387212520, "open": 283, "close": 253, "high": 289, "low": 213}, | |
{"time": 1387212530, "open": 162, "close": 350, "high": 189, "low": 122}, | |
{"time": 1387212540, "open": 452, "close": 361, "high": 542, "low": 329}, | |
{"time": 1387212550, "open": 173, "close": 281, "high": 312, "low": 91}, | |
{"time": 1387212560, "open": 183, "close": 265, "high": 271, "low": 165}, | |
{"time": 1387212570, "open": 395, "close": 253, "high": 424, "low": 213} | |
]} |
This file contains 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
.line { | |
fill: none; | |
stroke: #0CD1AA; | |
stroke-width: 3px; | |
} | |
.area { | |
fill: #0cd1aa; | |
stroke: #dc432c; | |
stroke-width 0.5; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment