Skip to content

Instantly share code, notes, and snippets.

@jamesleesaunders

jamesleesaunders/README.md

Last active July 16, 2019 20:10
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 jamesleesaunders/37a5340da620e0f63ea3f2b0da5240a7 to your computer and use it in GitHub Desktop.
Save jamesleesaunders/37a5340da620e0f63ea3f2b0da5240a7 to your computer and use it in GitHub Desktop.
Download ZIP
d3-ez : Candlestick Chart Example
Raw
README.md

d3-ez : Candlestick Chart Example

Generated using d3-ez D3 Reusable Chart Library

A candlestick chart is a style of bar-chart used to describe price movements of a security, derivative, or currency for a designated span of time. Each bar represents the range of price movement over a given time interval. It is most often used in technical analysis of equity and currency price patterns. They appear superficially similar to box plots, but are unrelated. The dataset for a candlestick chart contains low, high, open and close values. The high and low values are visualized as the top and bottom of each stick, where the open and close values are reflected in the square inside..

FUNCTION: Comparison; Trend over time

Credit: Data Viz Project

Data Source: https://www.ofx.com/en-gb/forex-news/historical-exchange-rates/

Raw
candlestick_data.json
{
"key": "Bitcoin",
"values": [{
"date": "2014-06-30T23:00:00.000Z",
"open": 100,
"high": 100.16527806350396,
"low": 99.75265608267198,
"close": 99.97957235237315
}, {
"date": "2014-07-01T23:00:00.000Z",
"open": 99.88551850822414,
"high": 100.63239578454899,
"low": 99.84709991707818,
"close": 100.14189081110142
}, {
"date": "2014-07-02T23:00:00.000Z",
"open": 100.16889722967892,
"high": 100.35971564117237,
"low": 99.45656456359187,
"close": 99.49694177199456
}, {
"date": "2014-07-03T23:00:00.000Z",
"open": 99.57756953697276,
"high": 99.79361824042302,
"low": 99.11297636341772,
"close": 99.55181084573178
}, {
"date": "2014-07-06T23:00:00.000Z",
"open": 99.41116516167757,
"high": 99.41116516167757,
"low": 98.4286502069391,
"close": 98.4286502069391
}, {
"date": "2014-07-07T23:00:00.000Z",
"open": 98.4158583490821,
"high": 98.51632152539305,
"low": 97.4130316707654,
"close": 97.4130316707654
}, {
"date": "2014-07-08T23:00:00.000Z",
"open": 97.41681318752876,
"high": 97.50332128518384,
"low": 96.59305394624688,
"close": 96.82892685402533
}, {
"date": "2014-07-09T23:00:00.000Z",
"open": 96.97222931820848,
"high": 97.74187299802651,
"low": 96.90995046882335,
"close": 97.5543626719172
}, {
"date": "2014-07-10T23:00:00.000Z",
"open": 97.48656089531006,
"high": 97.68057827623466,
"low": 97.19478982224112,
"close": 97.19478982224112
}, {
"date": "2014-07-13T23:00:00.000Z",
"open": 97.27351844358544,
"high": 97.73559744676679,
"low": 96.5253693082816,
"close": 96.5253693082816
}, {
"date": "2014-07-14T23:00:00.000Z",
"open": 96.400802721189,
"high": 97.61632371835994,
"low": 96.34518155184706,
"close": 97.50111821017519
}, {
"date": "2014-07-15T23:00:00.000Z",
"open": 97.43786864086145,
"high": 98.51917130417165,
"low": 97.25310945224192,
"close": 98.33508818218462
}, {
"date": "2014-07-16T23:00:00.000Z",
"open": 98.51701029807894,
"high": 98.91797618079447,
"low": 97.73209458781965,
"close": 97.89419304314768
}, {
"date": "2014-07-17T23:00:00.000Z",
"open": 97.85602445171763,
"high": 98.39974445241839,
"low": 97.79206874577457,
"close": 98.2774707043568
}, {
"date": "2014-07-20T23:00:00.000Z",
"open": 98.28794859793618,
"high": 98.7037275111126,
"low": 98.21355553458157,
"close": 98.39908891255541
}, {
"date": "2014-07-21T23:00:00.000Z",
"open": 98.3693164584792,
"high": 99.40190865679605,
"low": 98.1337262192322,
"close": 99.32825723863743
}, {
"date": "2014-07-22T23:00:00.000Z",
"open": 99.46375900838605,
"high": 99.81887753340757,
"low": 99.02004973312496,
"close": 99.04088999378236
}, {
"date": "2014-07-23T23:00:00.000Z",
"open": 98.9975797028606,
"high": 99.69078359944126,
"low": 98.68402844162591,
"close": 99.55617764178415
}, {
"date": "2014-07-24T23:00:00.000Z",
"open": 99.57860810999382,
"high": 99.57860810999382,
"low": 99.05929504240225,
"close": 99.05929504240225
}, {
"date": "2014-07-27T23:00:00.000Z",
"open": 99.03363270307193,
"high": 99.03363270307193,
"low": 98.42596677323975,
"close": 99.01701672003924
}, {
"date": "2014-07-28T23:00:00.000Z",
"open": 99.07744619112539,
"high": 99.47068155551193,
"low": 98.74262036359322,
"close": 99.43862260993313
}, {
"date": "2014-07-29T23:00:00.000Z",
"open": 99.48581743168796,
"high": 99.98045982820229,
"low": 99.2568175237138,
"close": 99.86825875571999
}, {
"date": "2014-07-30T23:00:00.000Z",
"open": 99.79584053654936,
"high": 100.16472283877012,
"low": 99.78607411171825,
"close": 99.96387274099605
}, {
"date": "2014-07-31T23:00:00.000Z",
"open": 99.91099885155808,
"high": 100.03976151091068,
"low": 99.24878783203123,
"close": 99.24878783203123
}, {
"date": "2014-08-03T23:00:00.000Z",
"open": 99.14692575141281,
"high": 99.36264572307981,
"low": 98.01069060989266,
"close": 98.77760915607942
}, {
"date": "2014-08-04T23:00:00.000Z",
"open": 98.68501369763496,
"high": 99.51708613235564,
"low": 98.68501369763496,
"close": 99.36591174956935
}, {
"date": "2014-08-05T23:00:00.000Z",
"open": 99.31369504431726,
"high": 100.10978239108375,
"low": 99.03111319378284,
"close": 99.54355291095774
}, {
"date": "2014-08-06T23:00:00.000Z",
"open": 99.46117036409737,
"high": 100.2528187902187,
"low": 99.26136811034937,
"close": 99.33481622141088
}, {
"date": "2014-08-07T23:00:00.000Z",
"open": 99.39122553735882,
"high": 99.93550091077961,
"low": 99.16721737228366,
"close": 99.93361019721422
}, {
"date": "2014-08-10T23:00:00.000Z",
"open": 99.87659047869555,
"high": 101.22958671029367,
"low": 99.87659047869555,
"close": 100.82423322835984
}, {
"date": "2014-08-11T23:00:00.000Z",
"open": 100.78654366442663,
"high": 102.35123873176344,
"low": 100.78654366442663,
"close": 102.0177320383704
}, {
"date": "2014-08-12T23:00:00.000Z",
"open": 101.94439397666629,
"high": 103.62242792124863,
"low": 101.94439397666629,
"close": 103.47047392326938
}, {
"date": "2014-08-13T23:00:00.000Z",
"open": 103.54682630806984,
"high": 103.74416773634775,
"low": 102.16643343711394,
"close": 102.16643343711394
}, {
"date": "2014-08-14T23:00:00.000Z",
"open": 102.17093013368473,
"high": 102.17093013368473,
"low": 100.94992463664464,
"close": 100.9826978211111
}, {
"date": "2014-08-17T23:00:00.000Z",
"open": 100.99693657701627,
"high": 101.47909410772579,
"low": 100.87167099007934,
"close": 101.02559873107325
}, {
"date": "2014-08-18T23:00:00.000Z",
"open": 100.95408311109028,
"high": 102.11114111083559,
"low": 100.7556424907157,
"close": 102.09525299949424
}, {
"date": "2014-08-19T23:00:00.000Z",
"open": 102.04397758466209,
"high": 103.083062497401,
"low": 101.84598881848541,
"close": 102.37467259582994
}, {
"date": "2014-08-20T23:00:00.000Z",
"open": 102.4886008813715,
"high": 103.49864643826427,
"low": 102.43670740242618,
"close": 103.49864643826427
}, {
"date": "2014-08-21T23:00:00.000Z",
"open": 103.52166146977282,
"high": 103.64197331485444,
"low": 102.83861170501532,
"close": 103.05439159682074
}, {
"date": "2014-08-24T23:00:00.000Z",
"open": 102.89449801044937,
"high": 103.10763193484834,
"low": 102.70199078139898,
"close": 103.00207020808368
}, {
"date": "2014-08-25T23:00:00.000Z",
"open": 102.88848362401295,
"high": 103.1816216121226,
"low": 102.51347737686069,
"close": 102.78742600463715
}, {
"date": "2014-08-26T23:00:00.000Z",
"open": 102.77210958712428,
"high": 103.04848751225809,
"low": 102.56483184276989,
"close": 102.79913985746168
}, {
"date": "2014-08-27T23:00:00.000Z",
"open": 102.73403162763599,
"high": 102.77024826174862,
"low": 102.15787886372156,
"close": 102.15787886372156
}, {
"date": "2014-08-28T23:00:00.000Z",
"open": 102.20739836849386,
"high": 104.12545486462979,
"low": 102.20739836849386,
"close": 103.74887146576202
}, {
"date": "2014-08-31T23:00:00.000Z",
"open": 103.75536660016898,
"high": 105.40705818409134,
"low": 103.75536660016898,
"close": 105.40705818409134
}]
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>d3-ez : Line Chart Example</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://raw.githack.com/jamesleesaunders/d3-ez/master/dist/d3-ez.js"></script>
<link rel="stylesheet" type="text/css" href="http://rawgit.com/jamesleesaunders/d3.ez/master/dist/d3-ez.css" />
</head>
<body>
<div id="chartholder"></div>
<script type="text/javascript">
d3.json("candlestick_data.json").then(function(data) {
var chart = d3.ez.chart.candlestickChart();
var legend = d3.ez.component.legend().title("Cryptocoin Price");
var title = d3.ez.component.title().mainText("Cryptocoin Price").subText("Cryptocoin Price");
// Create chart base
var myChart = d3.ez.base()
.width(750)
.height(400)
.chart(chart)
.legend(legend)
.title(title)
.on("customValueMouseOver", function(d) {
d3.select("#message").text(d.value);
})
.on("customSeriesClick", function(d) {
console.log(d);
});
d3.select('#chartholder')
.datum(data)
.call(myChart);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment