30:T5e6,html` `31:T704,Chart = { Symbol; let containerDiv = d3 .select('#chart') .selectAll('svg') .data([null], (d, i) => i); let SVG = containerDiv .join('svg') .attr('height', height) .attr('width', width) .attr('viewBox', [m, m, width, height + m]) .attr('id', 'SVG'); let svg = SVG.append('g').attr('transform', `translate(${m}, ${m})`); // define x and y crosshair properties const focus = svg .append('g') .attr('class', 'focus') .style('display', 'none'); focus.append('circle').attr('r', 4.5); focus.append('line').classed('x', true); focus.append('line').classed('y', true); svg .append('rect') .attr('class', 'overlay') .attr('width', width) .attr('height', height) .style('fill', 'none') .style('pointer-events', 'all'); d3.selectAll('.focus line') .style('fill', 'none') .style('stroke', '#67809f') .style('stroke-width', '1.5px') .style('stroke-dasharray', '3 3'); svg .append('clipPath') .attr('id', 'clip') .append('rect') .attr('width', width) .attr('height', height); // group volume series bar charts, and with clip-path attribute svg .append('g') .attr('id', 'volume-series') .attr('clip-path', 'url(#clip)'); // group dividend symbols, and with clip-path attribute svg .append('g') .attr('id', 'dividends') .attr('clip-path', 'url(#clip)'); // candlesticks, and with clip-path attribute svg .append('g') .attr('id', 'candlesticks-series') .attr('clip-path', 'url(#clip)'); // ohlc, and with clip-path attribute svg .append('g') .attr('id', 'ohlc-series') .attr('clip-path', 'url(#clip)'); // generates the rest of the graph updateChart(); /* Handle zoom and pan */ //svg.call(zoom); }32:T190a,function zoomed(d, i, nodes) { const ohlcLine = d3 .line() .x(d => d['x']) .y(d => d['y']); const candlesticksLine = d3 .line() .x(d => d['x']) .y(d => d['y']); const tickWidth = 5; const bodyWidth = 5; // only fire the zoomed function when an actual event is triggered, rather than on every update if (d3.event.sourceEvent || d3.event.transform.k !== 1) { console.log(d3.event) // create new scale ojects based on zoom/pan event const updatedXScale = d3.event.transform.rescaleX(xScale); mutable xScale=updatedXScale const updatedYScale = d3.event.transform.rescaleY(yScale); mutable yScale=updatedYScale console.log("HELLO"+updatedXScale.domain(),updatedYScale.domain()) // update axes let activeData =currentData.filter(x=>x.date>=updatedXScale.domain()[0] || x.date<=updatedXScale.domain()[1]) console.log(activeData); mutable currentData=[...activeData]; const xRescale = d3 .scaleTime() .domain(d3.extent(activeData,d=>d.date)) .range([0, width]); xScale.domain(d3.event.transform.rescaleX(xRescale).domain()); yAxis.call(yAxis.scale(updatedYScale)); xAxis.call(xAxis.scale(updatedXScale)); // update close price and moving average lines based on zoom/pan const updateClosePriceChartPlot = d3 .line() .x(d => updatedXScale(d['date'])) .y(d => updatedYScale(d['close'])); const updateMovingAverageLinePlot = d3 .line() .x(d => updatedXScale(d['date'])) .y(d => updatedYScale(d['average'])) .curve(d3.curveBasis); d3.select('.moving-average-line').attr('d', updateMovingAverageLinePlot); d3.select('.price-chart').attr('d', updateClosePriceChartPlot); // update dividends based on zoom/pan d3.selectAll('.dividend-group').attr( 'transform', (d, i) => `translate(${updatedXScale(d['date'])},${height - 80})` ); // update volume series based on zoom/pan d3.selectAll('.vol').attr('x', d => updatedXScale(d['date'])); // update ohlc series based on zoom/pan d3.selectAll('.ohlc .high-low').attr('d', d => { return ohlcLine([ { x: updatedXScale(d['date']), y: updatedYScale(d['high']) }, { x: updatedXScale(d['date']), y: updatedYScale(d['low']) } ]); }); d3.selectAll('.open-tick').attr('d', d => { return ohlcLine([ { x: updatedXScale(d['date']) - tickWidth, y: updatedYScale(d['open']) }, { x: updatedXScale(d['date']), y: updatedYScale(d['open']) } ]); }); d3.selectAll('.close-tick').attr('d', d => { return ohlcLine([ { x: updatedXScale(d['date']), y: updatedYScale(d['close']) }, { x: updatedXScale(d['date']) + tickWidth, y: updatedYScale(d['close']) } ]); }); // update candlesticks series based on zoom/pan d3.selectAll('.candlestick .high-low').attr('d', d => { return candlesticksLine([ { x: updatedXScale(d['date']), y: updatedYScale(d['high']) }, { x: updatedXScale(d['date']), y: updatedYScale(d['low']) } ]); }); d3.selectAll('.candlestick rect') .attr('x', d => updatedXScale(d['date']) - bodyWidth / 2) .attr('y', d => { return d['close'] > d['open'] ? updatedYScale(d['close']) : updatedYScale(d['open']); }) .attr('height', d => { return d['close'] > d['open'] ? updatedYScale(d['open']) - updatedYScale(d['close']) : updatedYScale(d['close']) - updatedYScale(d['open']); }); // update bollinger Bands based on zoom/pan const updateUpperBandPlot = d3 .line() .x(d => updatedXScale(d['date'])) .y(d => updatedYScale(d['upperBand'])); const updateLowerBandPlot = d3 .line() .x(d => updatedXScale(d['date'])) .y(d => updatedYScale(d['lowerBand'])) .curve(d3.curveBasis); const area = d3 .area() .x(d => updatedXScale(d['date'])) .y0(d => updatedYScale(d['upperBand'])) .y1(d => updatedYScale(d['lowerBand'])); d3.select('.upper-band').attr('d', updateUpperBandPlot); d3.select('.lower-band').attr('d', updateLowerBandPlot); d3.select('.middle-band').attr('d', updateMovingAverageLinePlot); d3.select('.band-area').attr('d', area); // update crosshair position on zooming/panning const overlay = d3.select('.overlay'); const focus = d3.select('.focus'); const bisectDate = d3.bisector(d => d.date).left; // remove old crosshair overlay.exit().remove(); // enter, and update the attributes overlay //.enter() .append('g') .attr('class', 'focus') .style('display', 'none'); overlay .attr('class', 'overlay') .attr('width', width) .attr('height', height) .on('mouseover', () => focus.style('display', null)) .on('mouseout', () => focus.style('display', 'none')) .on('mousemove', (d, i, nodes) => { const correspondingDate = updatedXScale.invert(d3.mouse(nodes[i])[0]); //gets insertion point const i1 = bisectDate(activeData, correspondingDate, 1); const d0 =activeData[i1 - 1]; const d1 =activeData[i1]; const currentPoint = correspondingDate - d0['date'] > d1['date'] - correspondingDate ? d1 : d0; focus.attr( 'transform', `translate(${updatedXScale(currentPoint['date'])}, ${updatedYScale( currentPoint['close'] )})` ); focus .select('line.x') .attr('x1', 0) .attr('x2', width - updatedXScale(currentPoint['date'])) .attr('y1', 0) .attr('y2', 0); focus .select('line.y') .attr('x1', 0) .attr('x2', 0) .attr('y1', 0) .attr('y2', height - updatedYScale(currentPoint['close'])); updateLegends(currentPoint); updateSecondaryLegends(currentPoint['date']); }); } } 33:T758, function renderVolumeBarCharts() { const chart = d3.select('#chart').select('g'); const yMinVolume = d3.min(currentData, d => Math.min(d['volume'])); const yMaxVolume = d3.max(currentData, d => Math.max(d['volume'])); const yVolumeScale = d3 .scaleLinear() .domain([yMinVolume, yMaxVolume]) .range([height-m, height * (3 / 4)]); //d3.select('#leftAxis').call(d3.axisLeft(yVolumeScale)); //select, followed by join const bars = d3 .select('#volume-series') .selectAll('.vol') .data(currentData, d => d['date']); bars.join( enter => enter .append('rect') .attr('class', 'vol') .attr('x', d => xScale(d['date'])) .attr('y', d => yVolumeScale(d['volume'])) .attr('fill', (d, i) => { if (i === 0) { return '#03a678'; } else { // green bar if price is rising during that period, and red when price is falling return currentData[i - 1].close > d.close ? '#c0392b' : '#03a678'; } }) .attr('width', 1) .attr('height', d => height - yVolumeScale(d['volume'])), update => update .transition() .duration(750) .attr('x', d => xScale(d['date'])) .attr('y', d => yVolumeScale(d['volume'])) .attr('fill', (d, i) => { if (i === 0) { return '#03a678'; } else { // green bar if price is rising during that period, and red when price is falling return currentData[i - 1].close > d.close ? '#c0392b' : '#03a678'; } }) .attr('width', 1) .attr('height', d => height - yVolumeScale(d['volume'])) ); } 34:T87d,function renderDividendIndicators() { /* Updating of dividends */ // select all dividend groups, and bind the new data const dividendSelect = d3 .select('#dividends') .selectAll('.dividend-group') .data(dividendData); const dividendTooltip = d3 .select('#chart') .append('div') .attr('class', 'tooltip') .style('opacity', 0); dividendSelect.join( enter => { // first, enter and append the group element, with the mousemove and mouseout events const enterSelection = enter .append('g') .attr('class', 'dividend-group') .on('mousemove', d => { dividendTooltip .style('opacity', 1) .style('color', '#464e56') .style('left', d3.event.pageX - 80 + 'px') .style('top', d3.event.pageY - 50 + 'px') .html( `Dividends: ${d['yield']}
Date: ${d[ 'date' ].toLocaleDateString()}` ); }) .on('mouseout', d => { dividendTooltip .transition() .duration(200) .style('opacity', 0); }); // enter and append the square symbols representing the dividends to the group element enterSelection .append('path') .attr('class', 'dividend') .attr( 'd', d3 .symbol() .size(300) .type(d3.symbolSquare) ) .style('opacity', 0.8) .style('cursor', 'pointer') .style('fill', '#00ced1'); // enter and append the 'D' text to the group element enterSelection .append('text') .attr('x', -6) .attr('y', 5) .text(d => 'D') .style('cursor', 'pointer') .style('pointer-events', 'none') //allow mouseover to propagate .style('fill', '#464e56'); // translate the elements to their respective positions enterSelection.attr( 'transform', (d, i) => `translate(${xScale(d['date'])},${height - 80})` ); }, update => update .transition() .duration(200) .attr( 'transform', (d, i) => `translate(${xScale(d['date'])},${height - 80})` ) ); }35:T503,/* Mouseover function to generate crosshair */ function generateCrosshair(current) { //returns corresponding value from the domain const focus = d3.select('.focus'); const bisectDate = d3.bisector(d => d.date).left; const correspondingDate = xScale.invert(d3.mouse(current)[0]); //gets insertion point const i = bisectDate(currentData, correspondingDate, 1); const d0 = currentData[i - 1]; const d1 = currentData[i]; const currentPoint = correspondingDate - d0['date'] > d1['date'] - correspondingDate ? d1 : d0; focus.attr( 'transform', `translate(${xScale(currentPoint['date'])}, ${yScale( currentPoint['close'] )})` ); focus .select('line.x') .attr('x1', 0) .attr('x2', width - xScale(currentPoint['date'])) .attr('y1', 0) .attr('y2', 0); focus .select('line.y') .attr('x1', 0) .attr('x2', 0) .attr('y1', 0) .attr('y2', height - yScale(currentPoint['close'])); // updates the legend to display the date, open, close, high, low, and volume and selected mouseover area updateLegends(currentPoint); // secondary legends showing moving average and bollinger bands values updateSecondaryLegends(currentPoint['date']); } 36:T43d, function updateLegends(currentPoint) { d3.selectAll('.primary-legend').remove(); const legendKeys = Object.keys(currentPoint); const lineLegendSelect = d3 .select('#chart') .select('g') .selectAll('.primary-legend') .data(legendKeys); lineLegendSelect.join( enter => enter .append('g') .attr('class', 'primary-legend') .attr('transform', (d, i) => `translate(0, ${i * 20})`) .append('text') .text(d => { if (d === 'date') { return `${d}: ${currentPoint[d].toLocaleDateString()}`; } else if ( d === 'high' || d === 'low' || d === 'open' || d === 'close' ) { return `${d}: ${currentPoint[d].toFixed(2)}`; } else { return `${d}: ${currentPoint[d]}`; } }) .style('font-size', '0.8em') .style('fill', 'white') .attr('transform', 'translate(15,9)') //align texts with boxes*/ ); } 37:T70f, function updateSecondaryLegends(currentDate) { const secondaryLegend = {}; if (movingAverageData) { const currentPoint = movingAverageData.filter( dataPoint => dataPoint['date'] === currentDate )[0]; secondaryLegend['movingAverage'] = currentPoint; } if (bollingerBandsData) { const currentBollingerBandsPoint =bollingerBandsData.filter( dataPoint => dataPoint['date'] === currentDate )[0]; secondaryLegend['bollingerBands'] = currentBollingerBandsPoint; } const secondaryLegendKeys = Object.keys(secondaryLegend); d3.selectAll('.secondary-legend').remove(); if (secondaryLegendKeys.length > 0) { const secondaryLegendSelect = d3 .select('#chart') .select('g') .selectAll('.secondary-legend') .data(secondaryLegendKeys); secondaryLegendSelect.join( enter => enter .append('g') .attr('class', 'secondary-legend') .attr('transform', (d, i) => `translate(0, ${i * 20})`) .append('text') .text(d => { if (d === 'movingAverage') { return `Moving Average (50): ${secondaryLegend[d][ 'average' ].toFixed(2)}`; } else if (d === 'bollingerBands') { return `Bollinger Bands (20, 2.0, MA): ${secondaryLegend[d][ 'lowerBand' ].toFixed(2)} - ${secondaryLegend[d]['average'].toFixed( 2 )} - ${secondaryLegend[d]['upperBand'].toFixed(2)}`; } }) .style('font-size', '0.8em') .style('fill', 'white') .attr('transform', 'translate(150,9)'), exit => exit.remove() ); } } 38:T449,MovingAverage = { Chart; if (ChartOptions.includes('Moving Average')) { if (zoom) { d3.select('#SVG') .transition() .duration(750) .call(zoom.transform, d3.zoomIdentity.scale(1)); } const movingAverageLine = d3 .line() .x(d => xScale(d['date'])) .y(d => yScale(d['average'])) .curve(d3.curveBasis); const movingAverageSelect = d3 .select('#chart') .select('#SVG') .select('g') .selectAll('.moving-average-line') .data([movingAverageData]); movingAverageSelect.join( enter => enter .append('path') .style('fill', 'none') .attr('class', 'moving-average-line') .attr('clip-path', 'url(#clip)') .attr('stroke', '#FF8900') .attr('stroke-width', '1.5') .attr('d', movingAverageLine), update => update .transition() .duration(750) .attr('d', movingAverageLine) ); } else { // Remove moving average line d3.select('.moving-average-line').remove(); } }39:T6df,Candlesticks={ Chart; if (ChartOptions.includes('Candlesticks')) { d3.select('#SVG') .transition() .duration(750) .call(zoom.transform, d3.zoomIdentity.scale(1)); const bodyWidth = 5; const candlesticksLine = d3 .line() .x(d => d['x']) .y(d => d['y']); const candlesticksSelection = d3 .select('#candlesticks-series') .selectAll('.candlestick') .data(currentData, d => d['volume']); candlesticksSelection.join(enter => { const candlesticksEnter = enter .append('g') .attr('class', 'candlestick') .append('g') .attr('class', 'bars') .classed('up-day', d => d['close'] > d['open']) .classed('down-day', d => d['close'] <= d['open']); candlesticksEnter .append('path') .classed('high-low', true) .attr('d', d => { return candlesticksLine([ { x: xScale(d['date']), y: yScale(d['high']) }, { x: xScale(d['date']), y: yScale(d['low']) } ]); }); candlesticksEnter .append('rect') .attr('x', d => xScale(d.date) - bodyWidth / 2) .attr('y', d => { return d['close'] > d['open'] ? yScale(d.close) : yScale(d.open); }) .attr('width', bodyWidth) .attr('height', d => { return d['close'] > d['open'] ? yScale(d.open) - yScale(d.close) : yScale(d.close) - yScale(d.open); }); }); } else { // remove candlesticks d3.select('#SVG') .select('g') .selectAll('.candlestick') .remove(); } }3a:Td41,BollingerBands = { Chart; if (ChartOptions.includes('Bollinger Bands')) { d3.select('svg') .transition() .duration(750) .call(zoom.transform, d3.zoomIdentity.scale(1)); const movingAverage = d3 .line() .x(d => xScale(d['date'])) .y(d => yScale(d['average'])) .curve(d3.curveBasis); const upperBand = d3 .line() .x(d => xScale(d['date'])) .y(d => yScale(d['upperBand'])) .curve(d3.curveBasis); const lowerBand = d3 .line() .x(d => xScale(d['date'])) .y(d => yScale(d['lowerBand'])) .curve(d3.curveBasis); // middle band - moving average const movingAverageSelect = d3 .select('#chart') .select('svg') .select('g') .selectAll('.middle-band') .data([bollingerBandsData]); movingAverageSelect.join( enter => enter .append('path') .style('fill', 'none') .attr('class', 'middle-band') .attr('clip-path', 'url(#clip)') .attr('stroke', 'darkgrey') .attr('stroke-width', '1.5') .attr('d', movingAverage), update => update .transition() .duration(750) .attr('d', movingAverage) ); // upper band const upperBandSelect = d3 .select('#chart') .select('svg') .select('g') .selectAll('.upper-band') .data([bollingerBandsData]); upperBandSelect.join( enter => enter .append('path') .style('fill', 'none') .attr('class', 'upper-band') .attr('clip-path', 'url(#clip)') .attr('stroke', 'darkgrey') .attr('stroke-width', '1') .attr('d', upperBand), update => update .transition() .duration(750) .attr('d', upperBand) ); // lower band const lowerBandSelect = d3 .select('#chart') .select('svg') .select('g') .selectAll('.lower-band') .data([bollingerBandsData]); lowerBandSelect.join( enter => enter .append('path') .style('fill', 'none') .attr('class', 'lower-band') .attr('clip-path', 'url(#clip)') .attr('stroke', 'darkgrey') .attr('stroke-width', '1') .attr('d', lowerBand), update => update .transition() .duration(750) .attr('d', lowerBand) ); const area = d3 .area() .x(d => xScale(d['date'])) .y0(d => yScale(d['upperBand'])) .y1(d => yScale(d['lowerBand'])); const areaSelect = d3 .select('#chart') .select('svg') .select('g') .selectAll('.band-area') .data([bollingerBandsData]); areaSelect.join( enter => enter .append('path') .style('fill', 'darkgrey') .style('opacity', 0.2) .style('pointer-events', 'none') //allow mouseover to propagate .attr('class', 'band-area') .attr('clip-path', 'url(#clip)') .attr('d', area), update => update .transition() .duration(750) .attr('d', area) ); } else { // remove bollinger bands d3.select('#chart') .select('g') .selectAll('.middle-band, .lower-band, .upper-band, .band-area') .remove(); } }3b:T6de,OHLC = { Chart; if (ChartOptions.includes('OHLC')) { d3.select('#SVG') .transition() .duration(750) .call(zoom.transform, d3.zoomIdentity.scale(1)); const tickWidth = 5; const ohlcLine = d3 .line() .x(d => d['x']) .y(d => d['y']); const ohlcSelection = d3 .select('#ohlc-series') .selectAll('.ohlc') .data(currentData, d => d['volume']); ohlcSelection.join(enter => { const ohlcEnter = enter .append('g') .attr('class', 'ohlc') .append('g') .attr('class', 'bars') .classed('up-day', d => d['close'] > d['open']) .classed('down-day', d => d['close'] <= d['open']); ohlcEnter .append('path') .classed('high-low', true) .attr('d', d => { return ohlcLine([ { x: xScale(d['date']), y: yScale(d['high']) }, { x: xScale(d['date']), y: yScale(d['low']) } ]); }); ohlcEnter .append('path') .classed('open-tick', true) .attr('d', d => { return ohlcLine([ { x: xScale(d['date']) - tickWidth, y: yScale(d['open']) }, { x: xScale(d['date']), y: yScale(d['open']) } ]); }); ohlcEnter .append('path') .classed('close-tick', true) .attr('d', d => { return ohlcLine([ { x: xScale(d['date']), y: yScale(d['close']) }, { x: xScale(d['date']) + tickWidth, y: yScale(d['close']) } ]); }); }); } else { // remove OHLC d3.select('#chart') .select('g') .selectAll('.ohlc') .remove(); } }3c:T401,bollingerBandsData = { let data=currentData; let numberOfPricePoints=50; let sumSquaredDifference = 0; return data.map((row, index, total) => { const start = Math.max(0, index - numberOfPricePoints); const end = index; const subset = total.slice(start, end + 1); const sum = subset.reduce((a, b) => { return a + b['close']; }, 0); const sumSquaredDifference = subset.reduce((a, b) => { const average = sum / subset.length; const dfferenceFromMean = b['close'] - average; const squaredDifferenceFromMean = Math.pow(dfferenceFromMean, 2); return a + squaredDifferenceFromMean; }, 0); const variance = sumSquaredDifference / subset.length; return { date: row['date'], average: sum / subset.length, standardDeviation: Math.sqrt(variance), upperBand: sum / subset.length + Math.sqrt(variance) * 2, lowerBand: sum / subset.length - Math.sqrt(variance) * 2 }; }); }3d:[] 2e:{"title":"Smooth Update","cells":[{"id":0,"value":"md`# Smooth Update`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2159,"value":"viewof SYMBOL=text({title:\"SYMBOL\", default:'enter symbol/ticker...',value:\"IBM\",description:\"Fetches realtime data \",submit:true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"viewof ChartOptions = checkbox({\n value: ['Candlesticks', 'Moving Average', \"Bollinger Bands\"],\n options: [\n 'Close',\n 'Moving Average',\n \"Bollinger Bands\",\n \"Candlesticks\",\n 'OHLC'\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"View = html` \n

\n \n

`\n// ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1987,"value":"xAxis=d3.axisBottom(xScale)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1992,"value":"yAxis=d3.axisRight(yScale)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1924,"value":"AxisRender ={\nChart\n let svg=d3.select('#SVG g');\n\n let xAxisSelection = svg.selectAll('.xAxis').data([null],(d,i)=>i).join('g')\n .attr('class', 'xAxis')\n .attr('transform', `translate(0, ${height})`)\n .call(xAxis)\n\n\n let yAxisSelection = svg.selectAll('.yAxis').data([null]).join('g')\n .attr('class', 'yAxis')\n .attr('transform', `translate(${width}, 0)`)\n .transition()\n .duration(750)\n .call(yAxis);\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1784,"value":"md`## Chart Configurations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"m=50","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"margin = ({ top: 50, right: 50, bottom: 50, left: 20 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1998,"value":"extent=[[0, 0], [width, height]];","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"md`## SCALES`","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"xMin = d3.min(currentData, d => d['date']);","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"xMax = d3.max(currentData, d => d['date']);","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"yMin = d3.min(currentData, d => d['close']);","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"yMax = d3.max(currentData, d => d['close']);","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"mutable xScale = d3\n .scaleTime()\n .domain([xMin, xMax])\n .range([0, width]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"mutable yScale = d3\n .scaleLinear()\n .domain([yMin - 5, yMax + 4])\n .range([height, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"md`## INTERACTIVITY`","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"zoom = d3\n .zoom()\n .scaleExtent([1, 10])\n.translateExtent(extent) // pan limit\n.extent(extent)\n .on('zoom', (d, i, nodes) => \n zoomed(d, i, nodes));\n \n// {\n// if (d3.event.sourceEvent || d3.event.transform.k !== 1) {\n// console.log(d.i.nodes,d3.event)\n// // create new scale ojects based on zoom/pan event\n// const updatedXScale = d3.event.transform.rescaleX(xScale);\n// const updatedYScale = d3.event.transform.rescaleY(yScale);\n// console.log(updatedXScale.domain(),updatedYScale.domain())\n// // update axes\n// mutable currentData=currentData.filter(x=>x.date>=updatedXScale.domain()[0] || x.date<=updatedXScale.domain()[1])\n// }})\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2792,"value":"md`## Rendering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"function updateChart() {\n\n /* Update the axes */\n // d3.select('.xAxis').call(d3.axisBottom(xScale));\n // d3.select('.yAxis').call(d3.axisRight(yScale));\n\n /* updating of crosshair */\n updateCrosshairProperties();\n\n /* Update the volume series bar chart */\n renderVolumeBarCharts();\n\n /* Update dividend indicators */\n renderDividendIndicators();\n\n \n \n }\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"updateCrosshairProperties=()=>{\n \n // select the existing crosshair, and bind new data\n const overlay = d3.select('.overlay');\n const focus = d3.select('.focus');\n\n // remove old crosshair\n overlay.exit().remove();\n\n // enter, and update the attributes\n overlay\n .enter()\n .append('g')\n .attr('class', 'focus')\n .style('display', 'none');\n\n overlay\n .attr('class', 'overlay')\n .attr('width', width)\n .attr('height', height)\n .on('mouseover', () => focus.style('display', null))\n .on('mouseout', () => focus.style('display', 'none'))\n .on('mousemove', (d, i, nodes) => generateCrosshair(nodes[i]));\n }\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1139,"value":"md`## Chart Components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"Close = {\n Chart;\n if (ChartOptions.includes('Close')) {\n if (zoom) {\n d3.select('#SVG')\n .transition()\n .duration(750)\n .call(zoom.transform, d3.zoomIdentity.scale(1));\n }\n\n const line = d3\n .line()\n .x(d => xScale(d['date']))\n .y(d => yScale(d['close']));\n const lineSelect = d3\n .select('#chart')\n .select('#SVG')\n .select('g')\n .selectAll('.price-chart')\n .data([currentData]);\n\n lineSelect.join(\n enter =>\n enter\n .append('path')\n .style('fill', 'none')\n .attr('class', 'price-chart')\n .attr('clip-path', 'url(#clip)')\n .attr('stroke', 'steelblue')\n .attr('stroke-width', '1.5')\n .attr('d', line),\n update =>\n update\n .transition()\n .duration(750)\n .attr('d', line)\n );\n } else {\n // Remove close price chart\n d3.select('.price-chart').remove();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"md`## DATA`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"data = {\n let fetchedData = await d3.json(\n `https://cors-anywhere.herokuapp.com/query1.finance.yahoo.com/v8/finance/chart/${SYMBOL}?symbol=${SYMBOL}&period1=${DT_to_unix(\n thisYearStartDate\n )}&period2=${DT_to_unix(\n nextYearStartDate\n )}&interval=1d&includePrePost=true&events=div%2Csplit`,\n d3.autoType\n );\n\n const chartResultsData = fetchedData['chart']['result'][0];\n const quoteData = chartResultsData['indicators']['quote'][0];\n\n return {\n dividends: Object.values(chartResultsData['events']['dividends']).map(\n res => {\n return {\n date: new Date(res['date'] * 1000),\n yield: res['amount']\n };\n }\n ),\n quote: chartResultsData['timestamp'].map((time, index) => ({\n date: new Date(time * 1000),\n high: quoteData['high'][index],\n low: quoteData['low'][index],\n open: quoteData['open'][index],\n close: quoteData['close'][index],\n volume: quoteData['volume'][index]\n }))\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1806,"value":"mutable currentData = data['quote'].filter(\n row => row['high'] && row['low'] && row['close'] && row['open']\n ).filter(row => {\n if (row['date']) {\n return (\n row['date'] >= thisYearStartDate && row['date'] < nextYearStartDate\n );\n }})\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1885,"value":"dividendData=data['dividends'].filter(row => {\n if (row['date']) {\n return (\n row['date'] >= thisYearStartDate && row['date'] < nextYearStartDate\n );\n }\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":1811,"value":"movingAverageData= { \n let data=currentData\n let numberOfPricePoints=21;\nreturn data.map((row, index, total) => {\n const start = Math.max(0, index - numberOfPricePoints);\n //const end = index + numberOfPricePoints;\n const end = index;\n const subset = total.slice(start, end + 1);\n const sum = subset.reduce((a, b) => {\n return a + b['close'];\n }, 0);\n\n return {\n date: row['date'],\n average: sum / subset.length\n };\n });\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"thisYearStartDate = new Date(2019, 0, 1);","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"nextYearStartDate = new Date(2020, 0, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2083,"value":"DT_to_unix = d3.timeFormat('%s')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1136,"value":"md`## ANX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"height=500;","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"import {text,select,radio,slider,checkbox} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2696,"value":"import { theme } from '@stroked/utils'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3d","stdlib":"1","titling":"auto"}