Skip to content

Instantly share code, notes, and snippets.

@andredumas

andredumas/README.md

Last active September 28, 2016 12:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andredumas/3c0eefdd77a6380b1a35 to your computer and use it in GitHub Desktop.
Save andredumas/3c0eefdd77a6380b1a35 to your computer and use it in GitHub Desktop.
Download ZIP
TechanJS Trade Arrows
Raw
README.md

Demonstrates rendering buy, sell trades as arrows with up and down coloring. Also demonstrating rendering and styling additional trades types apart from buy and sell default and mouse over events.

Raw
data.csv
Date Open High Low Close Volume
9-Jun-14 62.40 63.34 61.79 62.88 37617413
6-Jun-14 63.37 63.48 62.15 62.50 42442096
5-Jun-14 63.66 64.36 62.82 63.19 47352368
4-Jun-14 62.45 63.59 62.07 63.34 36513991
3-Jun-14 62.62 63.42 62.32 62.87 32216707
2-Jun-14 63.23 63.59 62.05 63.08 35995537
30-May-14 63.95 64.17 62.56 63.30 45283577
29-May-14 63.84 64.30 63.51 63.83 42699670
28-May-14 63.39 64.14 62.62 63.51 47795088
27-May-14 61.62 63.51 61.57 63.48 55681663
23-May-14 60.41 61.45 60.15 61.35 38293993
22-May-14 60.94 61.48 60.40 60.52 54200116
21-May-14 58.56 60.50 58.25 60.49 58991505
20-May-14 59.50 60.19 58.18 58.56 53931469
19-May-14 57.89 59.56 57.57 59.21 43033925
16-May-14 58.31 58.45 57.31 58.02 47933075
15-May-14 59.26 59.38 57.52 57.92 56813940
14-May-14 59.53 60.45 58.95 59.23 47428583
13-May-14 59.66 60.89 59.51 59.83 48525476
12-May-14 57.98 59.90 57.98 59.83 48575487
9-May-14 56.85 57.65 56.38 57.24 52583858
8-May-14 57.23 58.82 56.50 56.76 61251053
7-May-14 58.77 59.30 56.26 57.39 78587247
6-May-14 60.98 61.15 58.49 58.53 55900809
5-May-14 59.67 61.35 59.18 61.22 46057411
2-May-14 61.30 61.89 60.18 60.46 54189197
1-May-14 60.43 62.28 60.21 61.15 82428606
30-Apr-14 57.58 59.85 57.16 59.78 76093004
29-Apr-14 56.09 58.28 55.84 58.15 75557202
28-Apr-14 58.05 58.31 54.66 56.14 107757756
25-Apr-14 59.97 60.01 57.57 57.71 92501529
24-Apr-14 63.60 63.65 59.77 60.87 138769345
23-Apr-14 63.45 63.48 61.26 61.36 96564750
22-Apr-14 62.65 63.44 62.22 63.03 60631312
21-Apr-14 59.46 61.24 59.15 61.24 60363619
17-Apr-14 59.30 60.58 58.72 58.94 88040346
16-Apr-14 59.79 60.19 57.74 59.72 78773521
15-Apr-14 59.29 59.68 55.88 59.09 108622706
14-Apr-14 60.09 60.45 57.78 58.89 72324603
11-Apr-14 57.60 60.31 57.31 58.53 91451960
10-Apr-14 63.08 63.18 58.68 59.16 114987616
9-Apr-14 59.63 62.46 59.19 62.41 100215307
8-Apr-14 57.68 58.71 57.17 58.19 78835935
7-Apr-14 55.90 58.00 55.44 56.95 108487569
4-Apr-14 59.94 60.20 56.32 56.75 125465774
3-Apr-14 62.55 63.17 59.13 59.49 83859330
2-Apr-14 63.21 63.91 62.21 62.72 66276613
1-Apr-14 60.46 62.66 60.24 62.62 59291210
31-Mar-14 60.78 61.52 59.87 60.24 53011205
28-Mar-14 61.34 61.95 59.34 60.01 67051528
27-Mar-14 60.51 61.90 57.98 60.97 112649694
26-Mar-14 64.74 64.95 60.37 60.38 97689774
25-Mar-14 64.89 66.19 63.78 64.89 68785500
24-Mar-14 67.19 67.36 63.36 64.10 85695872
21-Mar-14 67.53 67.92 66.18 67.24 60041228
20-Mar-14 68.01 68.23 66.82 66.97 44438500
19-Mar-14 69.17 69.29 67.46 68.24 43980558
18-Mar-14 68.76 69.60 68.30 69.19 40827226
17-Mar-14 68.18 68.95 66.62 68.74 52196699
14-Mar-14 68.49 69.43 67.46 67.72 48226824
13-Mar-14 71.29 71.35 68.15 68.83 57091157
12-Mar-14 69.86 71.35 69.00 70.88 46400431
11-Mar-14 72.50 72.59 69.96 70.10 59615238
10-Mar-14 70.77 72.15 70.51 72.03 59949746
7-Mar-14 71.08 71.18 69.47 69.80 38985763
6-Mar-14 71.88 71.89 70.25 70.84 46126260
5-Mar-14 69.69 71.97 69.62 71.57 74649486
4-Mar-14 68.66 68.90 67.62 68.80 42164222
3-Mar-14 66.96 68.05 66.51 67.41 56900444
28-Feb-14 69.47 69.88 67.38 68.46 66900863
27-Feb-14 69.34 70.01 68.87 68.94 41695855
26-Feb-14 70.19 71.22 68.85 69.26 55400399
25-Feb-14 70.95 71.00 69.45 69.85 52189031
24-Feb-14 68.74 71.44 68.54 70.78 76951946
21-Feb-14 69.69 69.96 68.45 68.59 70991892
20-Feb-14 67.73 70.11 65.73 69.63 131043748
19-Feb-14 67.05 69.08 67.00 68.06 64258631
18-Feb-14 66.94 67.54 66.07 67.30 43862297
14-Feb-14 67.50 67.58 66.72 67.09 36786427
13-Feb-14 64.18 67.33 64.05 67.33 62013396
12-Feb-14 64.92 65.06 64.05 64.45 47409857
11-Feb-14 63.75 65.00 63.35 64.85 45746832
10-Feb-14 64.30 64.49 63.47 63.55 43736562
7-Feb-14 62.27 64.57 62.22 64.32 60835746
6-Feb-14 61.46 62.78 61.46 62.16 42153754
5-Feb-14 62.74 63.16 61.27 62.19 53032420
4-Feb-14 62.05 63.14 61.82 62.75 46064897
3-Feb-14 63.03 63.77 60.70 61.48 75105994
31-Jan-14 60.47 63.37 60.17 62.57 87930298
30-Jan-14 62.12 62.50 60.46 61.08 150438699
29-Jan-14 54.61 54.95 53.19 53.53 98089932
28-Jan-14 54.02 55.28 54.00 55.14 48364998
27-Jan-14 54.73 54.94 51.85 53.55 74142331
24-Jan-14 56.15 56.42 54.40 54.45 55545338
23-Jan-14 56.37 56.68 55.69 56.63 47996403
22-Jan-14 58.85 59.31 57.10 57.51 61495880
21-Jan-14 56.60 58.58 56.50 58.51 48734147
17-Jan-14 57.30 57.82 56.07 56.30 40883205
16-Jan-14 57.26 58.02 56.83 57.19 34599775
15-Jan-14 57.98 58.57 57.27 57.60 33730619
14-Jan-14 56.46 57.78 56.10 57.74 37590987
13-Jan-14 57.91 58.25 55.38 55.91 63106519
10-Jan-14 57.13 58.30 57.06 57.94 42529258
9-Jan-14 58.65 58.96 56.65 57.22 92349222
8-Jan-14 57.60 58.41 57.23 58.23 56800776
7-Jan-14 57.70 58.55 57.22 57.92 77329009
6-Jan-14 54.42 57.26 54.05 57.20 68974359
3-Jan-14 55.02 55.65 54.53 54.56 38287706
2-Jan-14 54.83 55.22 54.19 54.71 43257622
31-Dec-13 54.12 54.86 53.91 54.65 43152127
30-Dec-13 54.93 55.18 53.43 53.71 68307317
27-Dec-13 57.48 57.68 55.25 55.44 60465751
26-Dec-13 58.32 58.38 57.37 57.73 55101367
24-Dec-13 58.27 58.58 56.91 57.96 46617754
23-Dec-13 55.50 58.32 55.45 57.77 98296983
20-Dec-13 54.91 55.15 54.23 55.12 239823912
19-Dec-13 54.34 55.19 53.95 55.05 89825393
18-Dec-13 55.57 55.89 53.75 55.57 76003479
17-Dec-13 54.75 55.18 54.24 54.86 78751463
16-Dec-13 53.27 54.50 52.91 53.81 85118518
13-Dec-13 51.61 53.50 51.34 53.32 82640992
12-Dec-13 51.03 52.07 50.66 51.83 92723034
11-Dec-13 50.56 50.77 49.01 49.38 65776366
10-Dec-13 48.62 50.77 48.54 50.24 68478561
9-Dec-13 48.06 48.97 47.74 48.84 36055891
6-Dec-13 48.98 49.39 47.71 47.94 42937659
5-Dec-13 48.15 48.70 47.87 48.34 43855036
4-Dec-13 46.46 48.77 46.26 48.62 60890176
3-Dec-13 46.75 47.20 46.29 46.73 32085905
2-Dec-13 46.90 47.54 46.26 47.06 50773647
29-Nov-13 46.75 47.21 46.50 47.01 22953916
27-Nov-13 45.97 46.67 45.53 46.49 44993195
26-Nov-13 44.66 46.17 43.55 45.89 82016490
25-Nov-13 46.36 46.65 44.04 44.82 82565324
22-Nov-13 47.04 47.27 45.96 46.23 40545375
21-Nov-13 46.99 47.46 46.68 46.70 34886170
20-Nov-13 46.61 47.55 46.31 46.43 53932698
19-Nov-13 46.26 47.00 45.72 46.36 75602413
18-Nov-13 48.47 48.84 45.80 45.83 85909884
15-Nov-13 49.11 49.48 48.71 49.01 42452937
14-Nov-13 48.70 49.57 48.03 48.99 75117049
13-Nov-13 46.23 48.74 46.06 48.71 79245346
12-Nov-13 46.00 47.37 45.83 46.60 68195832
11-Nov-13 47.04 47.53 45.73 46.20 80909626
8-Nov-13 47.81 48.65 47.25 47.53 70731178
7-Nov-13 49.24 49.87 47.30 47.56 97127618
6-Nov-13 50.26 50.45 48.71 49.12 67889337
5-Nov-13 47.79 50.18 47.51 50.10 76835006
4-Nov-13 49.36 49.75 48.02 48.22 80371218
1-Nov-13 50.85 52.09 49.72 49.75 95032876
31-Oct-13 47.16 52.00 46.50 50.20 248809006
30-Oct-13 50.00 50.21 48.75 49.01 127072652
29-Oct-13 50.73 50.79 49.25 49.40 102143469
28-Oct-13 51.54 51.70 49.61 50.23 73472347
25-Oct-13 53.18 53.24 51.88 51.95 45085348
24-Oct-13 52.38 52.84 51.59 52.44 46775185
23-Oct-13 51.75 52.25 51.13 51.90 57207154
22-Oct-13 54.33 54.76 52.20 52.68 83203892
21-Oct-13 54.68 54.81 53.51 53.85 58235283
18-Oct-13 54.18 54.82 53.60 54.22 88260093
17-Oct-13 51.12 52.22 50.95 52.21 71521899
16-Oct-13 50.04 51.24 49.90 51.14 64678247
15-Oct-13 49.99 51.00 49.18 49.50 81166571
14-Oct-13 48.31 49.63 47.91 49.51 68780552
11-Oct-13 49.18 49.87 48.79 49.11 58428451
10-Oct-13 47.86 49.68 47.83 49.05 99773784
9-Oct-13 47.38 47.84 45.26 46.77 147296862
8-Oct-13 50.60 50.60 47.08 47.14 136081330
7-Oct-13 50.73 51.29 50.40 50.52 57203957
4-Oct-13 49.77 51.16 49.57 51.04 74446947
3-Oct-13 50.47 50.72 49.06 49.18 82045323
2-Oct-13 50.13 51.10 49.95 50.28 62834429
1-Oct-13 49.97 51.03 49.45 50.42 98113699
30-Sep-13 50.14 51.60 49.80 50.23 100095417
27-Sep-13 50.29 51.28 49.86 51.24 81410460
26-Sep-13 50.01 50.60 49.50 50.39 98220046
25-Sep-13 49.23 49.54 48.46 49.46 87879619
24-Sep-13 48.50 49.66 48.16 48.45 136716101
23-Sep-13 47.28 47.55 46.29 47.19 75319202
20-Sep-13 46.32 47.60 45.74 47.49 115508400
19-Sep-13 45.51 46.05 45.23 45.98 63972369
18-Sep-13 44.84 45.47 44.40 45.23 79316945
17-Sep-13 42.50 45.44 42.43 45.07 91934557
16-Sep-13 44.85 44.94 42.43 42.51 70807761
13-Sep-13 45.04 45.08 43.93 44.31 52765299
12-Sep-13 45.53 45.62 44.65 44.75 68072239
11-Sep-13 43.39 45.09 43.11 45.04 71676653
10-Sep-13 44.24 44.26 43.23 43.60 54540282
9-Sep-13 44.36 44.79 43.70 44.04 75794696
6-Sep-13 43.09 44.61 42.40 43.95 117535626
5-Sep-13 41.79 42.76 41.77 42.66 50035380
4-Sep-13 42.01 42.17 41.44 41.78 42581854
3-Sep-13 41.84 42.16 41.51 41.87 48774896
30-Aug-13 42.02 42.26 41.06 41.29 67735053
29-Aug-13 40.89 41.78 40.80 41.28 58303395
28-Aug-13 39.96 40.85 39.88 40.55 57918194
27-Aug-13 40.68 41.20 39.42 39.64 72695050
26-Aug-13 40.90 41.94 40.62 41.34 94162358
23-Aug-13 39.00 40.63 38.93 40.55 86442283
22-Aug-13 38.37 38.75 38.34 38.55 21931163
21-Aug-13 38.38 38.85 38.14 38.32 46116868
20-Aug-13 38.35 38.58 37.69 38.41 57995140
19-Aug-13 37.43 38.28 37.14 37.81 57609591
16-Aug-13 36.97 37.49 36.90 37.08 45840714
15-Aug-13 36.36 37.07 36.02 36.56 56521095
14-Aug-13 36.83 37.55 36.62 36.65 48423890
13-Aug-13 38.24 38.32 36.77 37.02 65379198
12-Aug-13 38.20 38.50 38.10 38.22 31160951
9-Aug-13 38.59 38.74 38.01 38.50 43620024
8-Aug-13 39.13 39.19 38.43 38.54 41300906
7-Aug-13 38.61 38.94 37.70 38.87 68854764
6-Aug-13 39.11 39.25 37.94 38.55 63950791
5-Aug-13 38.43 39.32 38.25 39.19 79994774
2-Aug-13 37.66 38.49 37.50 38.05 73058424
1-Aug-13 37.30 38.29 36.92 37.49 106066472
31-Jul-13 37.96 38.31 36.33 36.80 154828679
30-Jul-13 35.65 37.96 35.32 37.63 173582710
29-Jul-13 34.07 35.63 34.01 35.43 124884870
26-Jul-13 33.77 34.73 33.56 34.01 136028897
25-Jul-13 33.54 34.88 32.75 34.36 365935212
24-Jul-13 26.32 26.53 26.05 26.51 82635587
23-Jul-13 26.10 26.30 25.97 26.13 28221534
22-Jul-13 25.99 26.13 25.72 26.04 27526213
19-Jul-13 25.82 26.11 25.60 25.88 46544938
18-Jul-13 26.75 26.77 26.12 26.18 24806825
17-Jul-13 26.37 26.78 26.30 26.65 21518463
16-Jul-13 26.39 26.75 26.01 26.32 30817554
15-Jul-13 25.93 26.43 25.65 26.28 24233957
12-Jul-13 25.74 25.93 25.55 25.91 16537840
11-Jul-13 25.96 26.00 25.45 25.81 26777354
10-Jul-13 25.58 25.83 25.47 25.80 26721794
9-Jul-13 25.07 25.49 25.03 25.48 30387889
8-Jul-13 24.47 25.04 24.42 24.71 27073983
5-Jul-13 24.65 24.66 24.20 24.37 20229451
3-Jul-13 24.22 24.71 24.15 24.52 10404332
2-Jul-13 24.70 24.77 24.30 24.41 18394008
1-Jul-13 24.97 25.06 24.62 24.81 20582195
28-Jun-13 24.68 24.98 24.42 24.88 96778879
27-Jun-13 24.24 24.84 24.21 24.66 34694013
26-Jun-13 24.51 24.65 23.99 24.16 29890205
25-Jun-13 24.14 24.43 24.04 24.25 24719988
24-Jun-13 23.95 24.11 23.38 23.94 40625948
21-Jun-13 24.59 24.70 24.05 24.53 45826173
20-Jun-13 24.28 24.74 23.65 23.90 42765586
19-Jun-13 24.20 25.19 24.10 24.31 31790525
18-Jun-13 24.09 24.69 24.08 24.21 36709004
17-Jun-13 23.91 24.25 23.75 24.02 33664419
14-Jun-13 23.56 23.89 23.26 23.63 30561387
13-Jun-13 23.72 23.83 23.26 23.73 31189247
12-Jun-13 24.16 24.26 23.58 23.77 26445790
11-Jun-13 24.03 24.35 24.00 24.03 29676383
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
text {
fill: #000;
}
button {
position: absolute;
right: 20px;
top: 440px;
display: none;
}
path.candle {
stroke: #000000;
}
path.candle.body {
stroke-width: 0;
}
path.candle.up {
fill: #00AA00;
stroke: #00AA00;
}
path.candle.down {
fill: #FF0000;
stroke: #FF0000;
}
path.tradearrow {
stroke: none;
}
path.tradearrow.buy {
fill: #0000FF;
}
path.tradearrow.buy-pending {
fill-opacity: 0.2;
stroke: #0000FF;
stroke-width: 1.5;
}
path.tradearrow.sell {
fill: #9900FF;
}
.tradearrow path.highlight {
fill: none;
stroke-width: 2;
}
.tradearrow path.highlight.buy,.tradearrow path.highlight.buy-pending {
stroke: #0000FF;
}
.tradearrow path.highlight.buy-pending {
fill: #0000FF;
fill-opacity: 0.3;
}
.tradearrow path.highlight.sell {
stroke: #9900FF;
}
</style>
<body>
<button>Update</button>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="http://techanjs.org/techan.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var dateFormat = d3.timeFormat("%d-%b-%y"),
parseDate = d3.timeParse("%d-%b-%y"),
valueFormat = d3.format(',.2f');
var x = techan.scale.financetime()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var candlestick = techan.plot.candlestick()
.xScale(x)
.yScale(y);
var tradearrow = techan.plot.tradearrow()
.xScale(x)
.yScale(y)
.orient(function(d) { return d.type.startsWith("buy") ? "up" : "down"; })
.on("mouseenter", enter)
.on("mouseout", out);
var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var valueText = svg.append('text')
.style("text-anchor", "end")
.attr("class", "coords")
.attr("x", width - 5)
.attr("y", 15);
d3.csv("data.csv", function(error, data) {
var accessor = candlestick.accessor();
data = data.slice(0, 200).map(function(d) {
return {
date: parseDate(d.Date),
open: +d.Open,
high: +d.High,
low: +d.Low,
close: +d.Close,
volume: +d.Volume
};
}).sort(function(a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); });
var trades = [
{ date: data[67].date, type: "buy", price: data[67].low, quantity: 1000 },
{ date: data[100].date, type: "sell", price: data[100].high, quantity: 200 },
{ date: data[156].date, type: "buy", price: data[156].open, quantity: 500 },
{ date: data[167].date, type: "sell", price: data[167].close, quantity: 300 },
{ date: data[187].date, type: "buy-pending", price: data[187].low, quantity: 300 }
];
svg.append("g")
.attr("class", "candlestick");
svg.append("g")
.attr("class", "tradearrow");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")");
svg.append("g")
.attr("class", "y axis")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Price ($)");
// Data to display initially
draw(data.slice(0, data.length-20), trades.slice(0, trades.length-1));
// Only want this button to be active if the data has loaded
d3.select("button").on("click", function() { draw(data, trades); }).style("display", "inline");
});
function draw(data, trades) {
x.domain(data.map(candlestick.accessor().d));
y.domain(techan.scale.plot.ohlc(data, candlestick.accessor()).domain());
svg.selectAll("g.candlestick").datum(data).call(candlestick);
svg.selectAll("g.tradearrow").datum(trades).call(tradearrow);
svg.selectAll("g.x.axis").call(xAxis);
svg.selectAll("g.y.axis").call(yAxis);
}
function enter(d) {
valueText.style("display", "inline");
refreshText(d);
}
function out() {
valueText.style("display", "none");
}
function refreshText(d) {
valueText.text("Trade: " + dateFormat(d.date) + ", " + d.type + ", " + valueFormat(d.price));
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment