tompiler · February 8, 2024 21:35 · AntonMakovei · Sep 20, 2023
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/FTSE.csv b/FTSE.csv
diff --git a/index.html b/index.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Candlestick</title>
 </head>
 <link rel="stylesheet" href="stylesheet.css">
 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 <body>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    <script src="script.js"></script>
    <svg id="container"></svg>
    
 </body>
 </html>
diff --git a/script.js b/script.js
 function drawChart() {

 	d3.csv("FTSE.csv").then(function(prices) {
 		
 		const months = {0 : 'Jan', 1 : 'Feb', 2 : 'Mar', 3 : 'Apr', 4 : 'May', 5 : 'Jun', 6 : 'Jul', 7 : 'Aug', 8 : 'Sep', 9 : 'Oct', 10 : 'Nov', 11 : 'Dec'}

 		var dateFormat = d3.timeParse("%Y-%m-%d");
 		for (var i = 0; i < prices.length; i++) {
 			
 			prices[i]['Date'] = dateFormat(prices[i]['Date'])
 		}

 		const margin = {top: 15, right: 65, bottom: 205, left: 50},
 		w = 1000 - margin.left - margin.right,
 		h = 625 - margin.top - margin.bottom;

 		var svg = d3.select("#container")
 						.attr("width", w + margin.left + margin.right)
 						.attr("height", h + margin.top + margin.bottom)
 						.append("g")
 						.attr("transform", "translate(" +margin.left+ "," +margin.top+ ")");

 		let dates = _.map(prices, 'Date');
 		
 		var xmin = d3.min(prices.map(r => r.Date.getTime()));
 		var xmax = d3.max(prices.map(r => r.Date.getTime()));
 		var xScale = d3.scaleLinear().domain([-1, dates.length])
 						.range([0, w])
 		var xDateScale = d3.scaleQuantize().domain([0, dates.length]).range(dates)
 		let xBand = d3.scaleBand().domain(d3.range(-1, dates.length)).range([0, w]).padding(0.3)
 		var xAxis = d3.axisBottom()
 					  			.scale(xScale)
 					    		.tickFormat(function(d) {
 									  d = dates[d]
 										hours = d.getHours()
 										minutes = (d.getMinutes()<10?'0':'') + d.getMinutes() 
 										amPM = hours < 13 ? 'am' : 'pm'
 										return hours + ':' + minutes + amPM + ' ' + d.getDate() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear()
 									});
 		
 		svg.append("rect")
 					.attr("id","rect")
 					.attr("width", w)
 					.attr("height", h)
 					.style("fill", "none")
 					.style("pointer-events", "all")
 					.attr("clip-path", "url(#clip)")
 		
 		var gX = svg.append("g")
 					.attr("class", "axis x-axis") //Assign "axis" class
 					.attr("transform", "translate(0," + h + ")")
 					.call(xAxis)
 		
 		gX.selectAll(".tick text")
 		  .call(wrap, xBand.bandwidth())

 		var ymin = d3.min(prices.map(r => r.Low));
 		var ymax = d3.max(prices.map(r => r.High));
 		var yScale = d3.scaleLinear().domain([ymin, ymax]).range([h, 0]).nice();
 		var yAxis = d3.axisLeft()
 					  .scale(yScale)
 		
 		var gY = svg.append("g")
 					.attr("class", "axis y-axis")
 					.call(yAxis);
 		
 		var chartBody = svg.append("g")
 					.attr("class", "chartBody")
 					.attr("clip-path", "url(#clip)");
 		
 		// draw rectangles
 		let candles = chartBody.selectAll(".candle")
 		   .data(prices)
 		   .enter()
 		   .append("rect")
 		   .attr('x', (d, i) => xScale(i) - xBand.bandwidth())
 		   .attr("class", "candle")
 		   .attr('y', d => yScale(Math.max(d.Open, d.Close)))
 		   .attr('width', xBand.bandwidth())
 		   .attr('height', d => (d.Open === d.Close) ? 1 : yScale(Math.min(d.Open, d.Close))-yScale(Math.max(d.Open, d.Close)))
 		   .attr("fill", d => (d.Open === d.Close) ? "silver" : (d.Open > d.Close) ? "red" : "green")
 		
 		// draw high and low
 		let stems = chartBody.selectAll("g.line")
 		   .data(prices)
 		   .enter()
 		   .append("line")
 		   .attr("class", "stem")
 		   .attr("x1", (d, i) => xScale(i) - xBand.bandwidth()/2)
 		   .attr("x2", (d, i) => xScale(i) - xBand.bandwidth()/2)
 		   .attr("y1", d => yScale(d.High))
 		   .attr("y2", d => yScale(d.Low))
 		   .attr("stroke", d => (d.Open === d.Close) ? "white" : (d.Open > d.Close) ? "red" : "green");
 		
 		svg.append("defs")
 		   .append("clipPath")
 		   .attr("id", "clip")
 		   .append("rect")
 		   .attr("width", w)
 		   .attr("height", h)
 		
 		const extent = [[0, 0], [w, h]];
 		
 		var resizeTimer;
 		var zoom = d3.zoom()
 		  .scaleExtent([1, 100])
 		  .translateExtent(extent)
 		  .extent(extent)
 		  .on("zoom", zoomed)
 		  .on('zoom.end', zoomend);
 		
 		svg.call(zoom)

 		function zoomed() {
 			
 			var t = d3.event.transform;
 			let xScaleZ = t.rescaleX(xScale);
 			
 			let hideTicksWithoutLabel = function() {
 				d3.selectAll('.xAxis .tick text').each(function(d){
 					if(this.innerHTML === '') {
 					this.parentNode.style.display = 'none'
 					}
 				})
 			}

 			gX.call(
 				d3.axisBottom(xScaleZ).tickFormat((d, e, target) => {
 						if (d >= 0 && d <= dates.length-1) {
 					d = dates[d]
 					hours = d.getHours()
 					minutes = (d.getMinutes()<10?'0':'') + d.getMinutes() 
 					amPM = hours < 13 ? 'am' : 'pm'
 					return hours + ':' + minutes + amPM + ' ' + d.getDate() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear()
 					}
 				})
 			)

 			candles.attr("x", (d, i) => xScaleZ(i) - (xBand.bandwidth()*t.k)/2)
 				   .attr("width", xBand.bandwidth()*t.k);
 			stems.attr("x1", (d, i) => xScaleZ(i) - xBand.bandwidth()/2 + xBand.bandwidth()*0.5);
 			stems.attr("x2", (d, i) => xScaleZ(i) - xBand.bandwidth()/2 + xBand.bandwidth()*0.5);

 			hideTicksWithoutLabel();

 			gX.selectAll(".tick text")
 			.call(wrap, xBand.bandwidth())

 		}

 		function zoomend() {
 			var t = d3.event.transform;
 			let xScaleZ = t.rescaleX(xScale);
 			clearTimeout(resizeTimer)
 			resizeTimer = setTimeout(function() {

 			var xmin = new Date(xDateScale(Math.floor(xScaleZ.domain()[0])))
 				xmax = new Date(xDateScale(Math.floor(xScaleZ.domain()[1])))
 				filtered = _.filter(prices, d => ((d.Date >= xmin) && (d.Date <= xmax)))
 				minP = +d3.min(filtered, d => d.Low)
 				maxP = +d3.max(filtered, d => d.High)
 				buffer = Math.floor((maxP - minP) * 0.1)

 			yScale.domain([minP - buffer, maxP + buffer])
 			candles.transition()
 				   .duration(800)
 				   .attr("y", (d) => yScale(Math.max(d.Open, d.Close)))
 				   .attr("height",  d => (d.Open === d.Close) ? 1 : yScale(Math.min(d.Open, d.Close))-yScale(Math.max(d.Open, d.Close)));
 				   
 			stems.transition().duration(800)
 				 .attr("y1", (d) => yScale(d.High))
 				 .attr("y2", (d) => yScale(d.Low))
 			
 			gY.transition().duration(800).call(d3.axisLeft().scale(yScale));

 			}, 500)
 			
 		}
 	});
 }

 function wrap(text, width) {
 	text.each(function() {
 	  var text = d3.select(this),
 		  words = text.text().split(/\s+/).reverse(),
 		  word,
 		  line = [],
 		  lineNumber = 0,
 		  lineHeight = 1.1, // ems
 		  y = text.attr("y"),
 		  dy = parseFloat(text.attr("dy")),
 		  tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
 	  while (word = words.pop()) {
 		line.push(word);
 		tspan.text(line.join(" "));
 		if (tspan.node().getComputedTextLength() > width) {
 		  line.pop();
 		  tspan.text(line.join(" "));
 		  line = [word];
 		  tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
 		}
 	  }
 	});
 }

 drawChart();
diff --git a/stylesheet.css b/stylesheet.css
 .upGreenArrow{
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 4.5px 12px 4.5px;
   border-color: transparent transparent #00ff00 transparent;
 }
  
 .downRedArrow{
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 12px 4.5px 0 4.5px;
   border-color: #ff0000 transparent transparent transparent;
 }

 .upArrow{
  position: relative;
  top: -15px;
  left: -10px;
  width:0;
  height:0;
  border: 6px solid transparent;
  border-bottom-color: #00ff00;
 }
 .upArrow:after{
  position: absolute;
  content: '';
  top: 20px;
  left: -3px;
  width: 6px;
  height: 10px;
  background: #00ff00;
 }

 .downArrow{
  position: relative;
  top: 18px;
  left: -10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #ff0000;
 }
 .downArrow:after{
  position: absolute;
  content: '';
  top: -15px;
  left: -3px;
  width: 6px;
  height: 10px;
  background: #ff0000;
 }


 /* d3 candle stick start */

 .axis path,
 .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
 }

 .axis text {
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    fill: black;
 }

 /* d3 candle stick end */

 body {
  background-color: white;
 }
diff --git a/thumbnail.png b/thumbnail.png
Date	Open	High	Low	Close	Adj Close	Volume
2017-12-01	7326.700195	7355.399902	7288.700195	7300.5	7300.5	839825500
2017-12-04	7300.5	7369.700195	7300.5	7339	7339	745259400
2017-12-05	7339	7373.899902	7326.600098	7327.5	7327.5	881831300
2017-12-06	7327.5	7369.700195	7289.399902	7348	7348	672957500
2017-12-07	7348	7371.700195	7314.600098	7320.799805	7320.799805	803178700
2017-12-08	7320.799805	7412.200195	7314.200195	7394	7394	1004623500
2017-12-11	7394	7458.399902	7393.600098	7453.5	7453.5	906705100
2017-12-12	7453.5	7501.5	7448.299805	7500.399902	7500.399902	991599100
2017-12-13	7500.399902	7510.799805	7492.600098	7496.5	7496.5	998682800
2017-12-14	7496.5	7496.700195	7448.100098	7448.100098	7448.100098	948434600
2017-12-15	7448.100098	7490.600098	7433.799805	7490.600098	7490.600098	1182118000
2017-12-18	7490.600098	7544.299805	7490.600098	7537	7537	568259400
2017-12-19	7537	7563.5	7534.100098	7544.100098	7544.100098	675779500
2017-12-20	7544.100098	7550.600098	7511.5	7525.200195	7525.200195	659315600
2017-12-21	7525.200195	7609.700195	7517.899902	7604	7604	621347000
2017-12-22	7604	7614.399902	7585.5	7592.700195	7592.700195	243831300
2017-12-27	7592.700195	7632.700195	7586.399902	7620.700195	7620.700195	458380900
2017-12-28	7620.700195	7633.600098	7609.799805	7622.899902	7622.899902	311875400
2017-12-29	7622.899902	7697.600098	7620	7687.799805	7687.799805	289238900
2018-01-02	7687.799805	7691.299805	7624.100098	7648.100098	7648.100098	576251800
2018-01-03	7648.100098	7689.899902	7640.5	7671.100098	7671.100098	571662800
2018-01-04	7671.100098	7702.5	7671.100098	7695.899902	7695.899902	705864000
2018-01-05	7695.899902	7727.700195	7689.799805	7724.200195	7724.200195	636035700
2018-01-08	7724.200195	7733.399902	7691.799805	7696.5	7696.5	635135400
2018-01-09	7696.5	7733.100098	7696.5	7731	7731	709674500
2018-01-10	7731	7756.100098	7716.200195	7748.5	7748.5	861758600
2018-01-11	7748.5	7769	7734.600098	7762.899902	7762.899902	982791800
2018-01-12	7762.899902	7792.600098	7752.600098	7778.600098	7778.600098	1133867000
2018-01-15	7778.600098	7783.600098	7763.399902	7769.100098	7769.100098	551904700
2018-01-16	7769.100098	7791.799805	7740.600098	7755.899902	7755.899902	824367900
2018-01-17	7755.899902	7755.899902	7711.100098	7725.399902	7725.399902	822508200
2018-01-18	7725.399902	7739.5	7683.700195	7701	7701	765527900
2018-01-19	7701	7731.799805	7694.700195	7730.799805	7730.799805	795594100
2018-01-22	7730.799805	7739.399902	7703.700195	7715.399902	7715.399902	730171300
2018-01-23	7715.399902	7745.200195	7710	7731.799805	7731.799805	742420200
2018-01-24	7731.799805	7732	7643.399902	7643.399902	7643.399902	746643300
2018-01-25	7643.399902	7662.399902	7608.5	7615.799805	7615.799805	713251600
2018-01-26	7615.799805	7667.399902	7615.799805	7665.5	7665.5	713831300
2018-01-29	7665.5	7689.200195	7663.899902	7671.5	7671.5	612924000
2018-01-30	7671.5	7671.700195	7587.100098	7588	7588	798999000
2018-01-31	7588	7599	7521.799805	7533.600098	7533.600098	880751700
2018-02-01	7533.600098	7554.700195	7476.5	7490.399902	7490.399902	872509100
2018-02-02	7490.399902	7494.799805	7432.299805	7443.399902	7443.399902	871574000
2018-02-05	7443.399902	7443.399902	7334.799805	7335	7335	888994600
2018-02-06	7335	7335	7079.399902	7141.399902	7141.399902	1354591000
2018-02-07	7141.399902	7311.5	7141.399902	7279.399902	7279.399902	1027400300
2018-02-08	7279.399902	7279.399902	7161.299805	7170.700195	7170.700195	973611300
2018-02-09	7170.700195	7170.700195	7073	7092.399902	7092.399902	927291900
2018-02-12	7092.399902	7199.899902	7092.399902	7177.100098	7177.100098	718740600
2018-02-13	7177.100098	7203	7165.799805	7168	7168	718988800
2018-02-14	7168	7243.200195	7145.700195	7214	7214	940537000
2018-02-15	7214	7268	7206.700195	7234.799805	7234.799805	747830200
2018-02-16	7234.799805	7308	7234.799805	7294.700195	7294.700195	651756200
2018-02-19	7294.700195	7306.200195	7240	7247.700195	7247.700195	511199000
2018-02-20	7247.700195	7264.799805	7202.100098	7246.799805	7246.799805	679057900
2018-02-21	7246.799805	7291.799805	7220.600098	7281.600098	7281.600098	902872700
2018-02-22	7281.600098	7281.600098	7187.799805	7252.399902	7252.399902	926221400
2018-02-23	7252.399902	7262.100098	7220.799805	7244.399902	7244.399902	674864300
2018-02-26	7244.399902	7313	7244.299805	7289.600098	7289.600098	585774600
2018-02-27	7289.600098	7326	7272.899902	7282.5	7282.5	718147000
2018-02-28	7282.5	7293.399902	7231.899902	7231.899902	7231.899902	919954800
2018-03-01	7231.899902	7231.899902	7153.399902	7175.600098	7175.600098	859756500
2018-03-02	7175.600098	7175.600098	7063.399902	7069.899902	7069.899902	910442200
2018-03-05	7069.899902	7119.200195	7062.100098	7116	7116	941867700
2018-03-06	7116	7197.799805	7115.600098	7146.799805	7146.799805	786141900
2018-03-07	7146.799805	7180.700195	7109.600098	7157.799805	7157.799805	862383600
2018-03-08	7157.799805	7212.100098	7145.700195	7203.200195	7203.200195	712676800
2018-03-09	7203.200195	7225.299805	7189.700195	7224.5	7224.5	651119000
2018-03-12	7224.5	7254.899902	7198.200195	7214.799805	7214.799805	613077900
2018-03-13	7214.799805	7224.100098	7125.600098	7138.799805	7138.799805	766738500
2018-03-14	7138.799805	7176.5	7122.799805	7132.700195	7132.700195	752181500
2018-03-15	7132.700195	7162.600098	7127.100098	7139.799805	7139.799805	808062300
2018-03-16	7139.799805	7187.299805	7131.299805	7164.100098	7164.100098	1380663300
2018-03-19	7164.100098	7164.200195	7034.899902	7042.899902	7042.899902	728214400
2018-03-20	7042.899902	7081.5	7042.600098	7061.299805	7061.299805	742142200
2018-03-21	7061.299805	7065.700195	7016.799805	7039	7039	762202300
2018-03-22	7039	7039	6914.5	6952.600098	6952.600098	861231600
2018-03-23	6952.600098	6952.799805	6877	6921.899902	6921.899902	879273700
2018-03-26	6921.899902	6958.5	6866.899902	6888.700195	6888.700195	765318100
2018-03-27	6888.700195	7042.399902	6888.700195	7000.100098	7000.100098	690975500
2018-03-28	7000.100098	7044.700195	6923.299805	7044.700195	7044.700195	763193100
2018-03-29	7044.700195	7109.899902	7042.700195	7056.600098	7056.600098	876227900
2018-04-03	7056.600098	7065	6996.799805	7030.5	7030.5	790532700
2018-04-04	7030.5	7046.299805	6971.799805	7034	7034	794337900
2018-04-05	7034	7199.5	7034	7199.5	7199.5	794899100
2018-04-06	7199.5	7214	7163.100098	7183.600098	7183.600098	656250500
2018-04-09	7183.600098	7209.700195	7145.600098	7194.799805	7194.799805	671088200
2018-04-10	7194.799805	7266.799805	7194.799805	7266.799805	7266.799805	755081700
2018-04-11	7266.799805	7270.299805	7243.299805	7257.100098	7257.100098	766200800
2018-04-12	7257.100098	7266.600098	7240.799805	7258.299805	7258.299805	666773400
2018-04-13	7258.299805	7275	7249.100098	7264.600098	7264.600098	662868400
2018-04-16	7264.600098	7265.799805	7195.5	7198.200195	7198.200195	862881700
2018-04-17	7198.200195	7240.399902	7189.899902	7226.100098	7226.100098	714046100
2018-04-18	7226.100098	7325.600098	7226.100098	7317.299805	7317.299805	877056200
2018-04-19	7317.299805	7340.700195	7309.399902	7328.899902	7328.899902	788416300
2018-04-20	7328.899902	7368.200195	7323.299805	7368.200195	7368.200195	769512800
2018-04-23	7368.200195	7404.100098	7359.700195	7398.899902	7398.899902	777571800
2018-04-24	7398.899902	7439.600098	7397.299805	7425.399902	7425.399902	836399400
2018-04-25	7425.399902	7427.100098	7334.600098	7379.299805	7379.299805	879795200
2018-04-26	7379.299805	7421.399902	7355	7421.399902	7421.399902	814899700
2018-04-27	7421.399902	7507.100098	7421.299805	7502.200195	7502.200195	750485000
2018-04-30	7502.200195	7546.200195	7497.100098	7509.299805	7509.299805	991178200
2018-05-01	7509.299805	7549.100098	7506.600098	7520.399902	7520.399902	567569600
2018-05-02	7520.399902	7573	7519.600098	7543.200195	7543.200195	829699300
2018-05-03	7543.200195	7555.200195	7492.399902	7502.700195	7502.700195	723643100
2018-05-04	7502.700195	7570.200195	7502.700195	7567.100098	7567.100098	880646600
2018-05-08	7567.100098	7598.5	7550.399902	7565.799805	7565.799805	876829900
2018-05-09	7565.799805	7662.5	7565.799805	7662.5	7662.5	891351200
2018-05-10	7662.5	7706.899902	7631.600098	7701	7701	878774100
2018-05-11	7701	7728.899902	7691.700195	7724.600098	7724.600098	731924200
2018-05-14	7724.600098	7728	7688.600098	7711	7711	749899600
2018-05-15	7711	7752	7687.5	7723	7723	1027698700
2018-05-16	7723	7745.5	7717.799805	7734.200195	7734.200195	933498300
2018-05-17	7734.200195	7788.200195	7713.899902	7788	7788	781296600
2018-05-18	7788	7791.399902	7753.299805	7778.799805	7778.799805	899946200
2018-05-21	7778.799805	7868.100098	7778.100098	7859.200195	7859.200195	691927400
2018-05-22	7859.200195	7903.5	7854.600098	7877.5	7877.5	807636300
2018-05-23	7877.5	7877.5	7765.299805	7788.399902	7788.399902	918822700
2018-05-24	7788.399902	7803.5	7716.700195	7716.700195	7716.700195	890463600
2018-05-25	7716.700195	7753.299805	7703.299805	7730.299805	7730.299805	844360200
2018-05-29	7730.299805	7730.299805	7610.700195	7632.600098	7632.600098	1288493000
2018-05-30	7632.600098	7689.600098	7618.100098	7689.600098	7689.600098	923820700
2018-05-31	7689.600098	7727.5	7651.100098	7678.200195	7678.200195	1549063100
2018-06-01	7678.200195	7746.700195	7678.200195	7701.799805	7701.799805	783469400
2018-06-04	7701.799805	7772.100098	7701.700195	7741.299805	7741.299805	722966000
2018-06-05	7741.299805	7744.5	7686.600098	7686.799805	7686.799805	933666200
2018-06-06	7686.799805	7730.5	7671.600098	7712.399902	7712.399902	884617800
2018-06-07	7712.399902	7756.700195	7698.200195	7704.399902	7704.399902	1056744900
2018-06-08	7704.399902	7714.299805	7637.5	7681.100098	7681.100098	755489900
2018-06-11	7681.100098	7756	7681.100098	7737.399902	7737.399902	736070400
2018-06-12	7737.399902	7762.799805	7701.299805	7703.799805	7703.799805	773837800
2018-06-13	7703.799805	7746.700195	7677.200195	7703.700195	7703.700195	852427100
2018-06-14	7703.700195	7793.5	7650.200195	7765.799805	7765.799805	1119081700
2018-06-15	7765.799805	7781	7633.899902	7633.899902	7633.899902	1711560200
2018-06-18	7633.899902	7645.5	7601.600098	7631.299805	7631.299805	664167900
2018-06-19	7631.299805	7631.299805	7548.799805	7603.899902	7603.899902	897872000
2018-06-20	7603.899902	7705.200195	7603.899902	7627.399902	7627.399902	844000100
2018-06-21	7627.399902	7670.799805	7548.100098	7556.399902	7556.399902	777562300
2018-06-22	7556.399902	7689.399902	7556.200195	7682.299805	7682.299805	716273100
2018-06-25	7682.299805	7682.299805	7508.299805	7509.799805	7509.799805	791358000
2018-06-26	7509.799805	7564.100098	7509.799805	7537.899902	7537.899902	1088107300
2018-06-27	7537.899902	7633.899902	7512	7621.700195	7621.700195	1643638600
2018-06-28	7621.700195	7632.200195	7576	7615.600098	7615.600098	790762300
2018-06-29	7615.600098	7706.600098	7615.600098	7636.899902	7636.899902	898931000
2018-07-02	7636.899902	7636.899902	7540.700195	7547.899902	7547.899902	778437000
2018-07-03	7547.899902	7632.100098	7545	7593.299805	7593.299805	1015952400
2018-07-04	7593.299805	7593.299805	7560.799805	7573.100098	7573.100098	574163100
2018-07-05	7573.100098	7624.799805	7572.700195	7603.200195	7603.200195	614456600
2018-07-06	7603.200195	7631.200195	7569.700195	7617.700195	7617.700195	663475300
2018-07-09	7617.700195	7697.5	7617.700195	7688	7688	676761100
2018-07-10	7688	7715.100098	7677.100098	7692	7692	701511200
2018-07-11	7692	7692	7578.200195	7592	7592	793208100
2018-07-12	7592	7663	7592	7651.299805	7651.299805	746183900
2018-07-13	7651.299805	7716.200195	7651.299805	7661.899902	7661.899902	574401200
2018-07-16	7661.899902	7667.700195	7565	7600.5	7600.5	591161000
2018-07-17	7600.5	7641.100098	7581.799805	7626.299805	7626.299805	724367500
2018-07-18	7626.299805	7685.700195	7625.799805	7676.299805	7676.299805	651377100
2018-07-19	7676.299805	7702.899902	7660	7684	7684	695398600
2018-07-20	7684	7705.799805	7631.700195	7678.799805	7678.799805	685061200
2018-07-23	7678.799805	7678.799805	7621.799805	7655.799805	7655.799805	573514400
2018-07-24	7655.790039	7740.640137	7648.589844	7709.049805	7709.049805	0

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Candlestick</title>
	</head>
	<link rel="stylesheet" href="stylesheet.css">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<body>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
	<script src="script.js"></script>
	<svg id="container"></svg>

	</body>
	</html>
	function drawChart() {

	d3.csv("FTSE.csv").then(function(prices) {

	const months = {0 : 'Jan', 1 : 'Feb', 2 : 'Mar', 3 : 'Apr', 4 : 'May', 5 : 'Jun', 6 : 'Jul', 7 : 'Aug', 8 : 'Sep', 9 : 'Oct', 10 : 'Nov', 11 : 'Dec'}

	var dateFormat = d3.timeParse("%Y-%m-%d");
	for (var i = 0; i < prices.length; i++) {

	prices[i]['Date'] = dateFormat(prices[i]['Date'])
	}

	const margin = {top: 15, right: 65, bottom: 205, left: 50},
	w = 1000 - margin.left - margin.right,
	h = 625 - margin.top - margin.bottom;

	var svg = d3.select("#container")
	.attr("width", w + margin.left + margin.right)
	.attr("height", h + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" +margin.left+ "," +margin.top+ ")");

	let dates = _.map(prices, 'Date');

	var xmin = d3.min(prices.map(r => r.Date.getTime()));
	var xmax = d3.max(prices.map(r => r.Date.getTime()));
	var xScale = d3.scaleLinear().domain([-1, dates.length])
	.range([0, w])
	var xDateScale = d3.scaleQuantize().domain([0, dates.length]).range(dates)
	let xBand = d3.scaleBand().domain(d3.range(-1, dates.length)).range([0, w]).padding(0.3)
	var xAxis = d3.axisBottom()
	.scale(xScale)
	.tickFormat(function(d) {
	d = dates[d]
	hours = d.getHours()
	minutes = (d.getMinutes()<10?'0':'') + d.getMinutes()
	amPM = hours < 13 ? 'am' : 'pm'
	return hours + ':' + minutes + amPM + ' ' + d.getDate() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear()
	});

	svg.append("rect")
	.attr("id","rect")
	.attr("width", w)
	.attr("height", h)
	.style("fill", "none")
	.style("pointer-events", "all")
	.attr("clip-path", "url(#clip)")

	var gX = svg.append("g")
	.attr("class", "axis x-axis") //Assign "axis" class
	.attr("transform", "translate(0," + h + ")")
	.call(xAxis)

	gX.selectAll(".tick text")
	.call(wrap, xBand.bandwidth())

	var ymin = d3.min(prices.map(r => r.Low));
	var ymax = d3.max(prices.map(r => r.High));
	var yScale = d3.scaleLinear().domain([ymin, ymax]).range([h, 0]).nice();
	var yAxis = d3.axisLeft()
	.scale(yScale)

	var gY = svg.append("g")
	.attr("class", "axis y-axis")
	.call(yAxis);

	var chartBody = svg.append("g")
	.attr("class", "chartBody")
	.attr("clip-path", "url(#clip)");

	// draw rectangles
	let candles = chartBody.selectAll(".candle")
	.data(prices)
	.enter()
	.append("rect")
	.attr('x', (d, i) => xScale(i) - xBand.bandwidth())
	.attr("class", "candle")
	.attr('y', d => yScale(Math.max(d.Open, d.Close)))
	.attr('width', xBand.bandwidth())
	.attr('height', d => (d.Open === d.Close) ? 1 : yScale(Math.min(d.Open, d.Close))-yScale(Math.max(d.Open, d.Close)))
	.attr("fill", d => (d.Open === d.Close) ? "silver" : (d.Open > d.Close) ? "red" : "green")

	// draw high and low
	let stems = chartBody.selectAll("g.line")
	.data(prices)
	.enter()
	.append("line")
	.attr("class", "stem")
	.attr("x1", (d, i) => xScale(i) - xBand.bandwidth()/2)
	.attr("x2", (d, i) => xScale(i) - xBand.bandwidth()/2)
	.attr("y1", d => yScale(d.High))
	.attr("y2", d => yScale(d.Low))
	.attr("stroke", d => (d.Open === d.Close) ? "white" : (d.Open > d.Close) ? "red" : "green");

	svg.append("defs")
	.append("clipPath")
	.attr("id", "clip")
	.append("rect")
	.attr("width", w)
	.attr("height", h)

	const extent = [[0, 0], [w, h]];

	var resizeTimer;
	var zoom = d3.zoom()
	.scaleExtent([1, 100])
	.translateExtent(extent)
	.extent(extent)
	.on("zoom", zoomed)
	.on('zoom.end', zoomend);

	svg.call(zoom)

	function zoomed() {

	var t = d3.event.transform;
	let xScaleZ = t.rescaleX(xScale);

	let hideTicksWithoutLabel = function() {
	d3.selectAll('.xAxis .tick text').each(function(d){
	if(this.innerHTML === '') {
	this.parentNode.style.display = 'none'
	}
	})
	}

	gX.call(
	d3.axisBottom(xScaleZ).tickFormat((d, e, target) => {
	if (d >= 0 && d <= dates.length-1) {
	d = dates[d]
	hours = d.getHours()
	minutes = (d.getMinutes()<10?'0':'') + d.getMinutes()
	amPM = hours < 13 ? 'am' : 'pm'
	return hours + ':' + minutes + amPM + ' ' + d.getDate() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear()
	}
	})
	)

	candles.attr("x", (d, i) => xScaleZ(i) - (xBand.bandwidth()*t.k)/2)
	.attr("width", xBand.bandwidth()*t.k);
	stems.attr("x1", (d, i) => xScaleZ(i) - xBand.bandwidth()/2 + xBand.bandwidth()*0.5);
	stems.attr("x2", (d, i) => xScaleZ(i) - xBand.bandwidth()/2 + xBand.bandwidth()*0.5);

	hideTicksWithoutLabel();

	gX.selectAll(".tick text")
	.call(wrap, xBand.bandwidth())

	}

	function zoomend() {
	var t = d3.event.transform;
	let xScaleZ = t.rescaleX(xScale);
	clearTimeout(resizeTimer)
	resizeTimer = setTimeout(function() {

	var xmin = new Date(xDateScale(Math.floor(xScaleZ.domain()[0])))
	xmax = new Date(xDateScale(Math.floor(xScaleZ.domain()[1])))
	filtered = _.filter(prices, d => ((d.Date >= xmin) && (d.Date <= xmax)))
	minP = +d3.min(filtered, d => d.Low)
	maxP = +d3.max(filtered, d => d.High)
	buffer = Math.floor((maxP - minP) * 0.1)

	yScale.domain([minP - buffer, maxP + buffer])
	candles.transition()
	.duration(800)
	.attr("y", (d) => yScale(Math.max(d.Open, d.Close)))
	.attr("height", d => (d.Open === d.Close) ? 1 : yScale(Math.min(d.Open, d.Close))-yScale(Math.max(d.Open, d.Close)));

	stems.transition().duration(800)
	.attr("y1", (d) => yScale(d.High))
	.attr("y2", (d) => yScale(d.Low))

	gY.transition().duration(800).call(d3.axisLeft().scale(yScale));

	}, 500)

	}
	});
	}

	function wrap(text, width) {
	text.each(function() {
	var text = d3.select(this),
	words = text.text().split(/\s+/).reverse(),
	word,
	line = [],
	lineNumber = 0,
	lineHeight = 1.1, // ems
	y = text.attr("y"),
	dy = parseFloat(text.attr("dy")),
	tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
	while (word = words.pop()) {
	line.push(word);
	tspan.text(line.join(" "));
	if (tspan.node().getComputedTextLength() > width) {
	line.pop();
	tspan.text(line.join(" "));
	line = [word];
	tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
	}
	}
	});
	}

	drawChart();
	.upGreenArrow{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 4.5px 12px 4.5px;
	border-color: transparent transparent #00ff00 transparent;
	}

	.downRedArrow{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 4.5px 0 4.5px;
	border-color: #ff0000 transparent transparent transparent;
	}

	.upArrow{
	position: relative;
	top: -15px;
	left: -10px;
	width:0;
	height:0;
	border: 6px solid transparent;
	border-bottom-color: #00ff00;
	}
	.upArrow:after{
	position: absolute;
	content: '';
	top: 20px;
	left: -3px;
	width: 6px;
	height: 10px;
	background: #00ff00;
	}

	.downArrow{
	position: relative;
	top: 18px;
	left: -10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-top-color: #ff0000;
	}
	.downArrow:after{
	position: absolute;
	content: '';
	top: -15px;
	left: -3px;
	width: 6px;
	height: 10px;
	background: #ff0000;
	}


	/* d3 candle stick start */

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	fill: black;
	}

	/* d3 candle stick end */

	body {
	background-color: white;
	}