Skip to content

Instantly share code, notes, and snippets.

@andredumas

andredumas/README.md

Last active November 29, 2020 14:17
Show Gist options
  • Save andredumas/10194a84a3e46fe127d4 to your computer and use it in GitHub Desktop.
Save andredumas/10194a84a3e46fe127d4 to your computer and use it in GitHub Desktop.
Download ZIP
TechanJS Supstance
Raw
README.md

Interactive support and resistance line rendering on a chart. Illustrating setting start end end points and horizontal line at full width.

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;
}
.supstance path {
stroke: blue;
stroke-width: 0.8;
stroke-dasharray: 2, 2;
}
.mouseover .supstance path {
stroke-width: 1.5;
}
.axisannotation path {
fill: blue;
}
.axisannotation text {
fill: #fff;
}
.dragging .supstance path {
stroke: darkblue;
}
.interaction path {
pointer-events: all;
cursor: ns-resize;
stroke: blue;
stroke-width: 1;
}
</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 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 percent = y.copy();
var candlestick = techan.plot.candlestick()
.xScale(x)
.yScale(y);
var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);
var percentAxis = d3.axisRight(percent);
var ohlcAnnotation = techan.plot.axisannotation()
.axis(yAxis)
.orient('left')
.format(d3.format(',.2f'));
var percentAnnotation = techan.plot.axisannotation()
.axis(percentAxis)
.orient('right')
.format(d3.format('+.1%'));
var supstance = techan.plot.supstance()
.xScale(x)
.yScale(y)
.annotation([ohlcAnnotation, percentAnnotation])
.on("mouseenter", enter)
.on("mouseout", out)
.on("drag", drag);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var defs = svg.append("defs");
defs.append("clipPath")
.attr("id", "ohlcClip")
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height);
defs.append("clipPath")
.attr("id", "supstanceClip")
.append("rect")
.attr("x", -margin.left)
.attr("y", 0)
.attr("width", width+margin.left)
.attr("height", height);
svg = svg.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 supstanceData = [
{ value: 63.64 },
{ start: new Date(2013, 11, 10), end: new Date(2014, 4, 12), value: 55.50 },
{ start: new Date(2013, 8, 16), end: new Date(2013, 11, 24), value: 51.53 }
];
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 ($)");
svg.append("g")
.attr("class", "candlestick");
svg.append("g")
.attr("class", "supstances")
.attr("clip-path", "url(#supstanceClip)");
// Data to display initially
draw(data.slice(0, data.length-20), supstanceData.slice(0, supstanceData.length-1));
// Only want this button to be active if the data has loaded
d3.select("button").on("click", function() { draw(data, supstanceData); }).style("display", "inline");
});
function draw(data, supstanceData) {
x.domain(data.map(candlestick.accessor().d));
y.domain(techan.scale.plot.ohlc(data, candlestick.accessor()).domain());
percent.domain(techan.scale.plot.percent(y, candlestick.accessor()(data[0])).domain());
svg.selectAll("g.candlestick").datum(data).call(candlestick);
svg.selectAll("g.x.axis").call(xAxis);
svg.selectAll("g.y.axis").call(yAxis);
svg.selectAll("g.supstances").datum(supstanceData).call(supstance).call(supstance.drag);
}
function enter(d) {
valueText.style("display", "inline");
refreshText(d);
}
function out() {
valueText.style("display", "none");
}
function drag(d) {
refreshText(d);
}
function refreshText(d) {
valueText.text("Value: " + valueFormat(d.value));
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment