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/

<!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="https://rawgit.com/jamesleesaunders/d3.ez/master/dist/d3-ez.css" />
</head>

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>

https://d3js.org/d3.v5.min.js

https://raw.githack.com/jamesleesaunders/d3-ez/master/dist/d3-ez.js