28:null 29:["$","title",null,{"children":"d3fc - Stock Price Chart | Ajay | Observable"}] 2e:T7fa,Chart = html`

` // // // // // // // // // // // // // // // // 2f:T431,chart = { Chart; return ( fc .chartCartesian(xScale, yScale) .yOrient("right") .svgPlotArea(multi) .xTicks(xTickFilter) .xTickFormat(dateFormat) .yTickFormat(priceFormat) .yTicks(5) // https://github.com/d3/d3-axis/issues/32 .yTickSize(45) .yDecorate(sel => sel.select("text").attr("transform", "translate(10, -8)") ) .xDecorate(sel => sel .select("text") .attr("dy", undefined) .style("text-anchor", "start") .style("dominant-baseline", "hanging") .attr("transform", "rotate(0.5)") ) .decorate(sel => sel .enter() .append("d3fc-svg") .style("grid-column", 4) .style("grid-row", 3) .style("width", "45px") .on("draw.callout", (data, selectionIndex, nodes) => { d3.select(nodes[selectionIndex]) .select("svg") .call(yCallout); }) ) .xDomain(xExtent(data)) .yDomain(yDomain) ); }30:Ta2e,md`the hovering point on the line chart doesn't work for some reason. I tried a bunch of tricks but nothing seemed to work. From console.log I was able to understand that it uses some 'd3fc' was of handling it and the event doesn't seem to have any of the coordinates. I had a similar sort of problem when building out the VX candlestick charts in react. But that was unrelated Anyways, the pointer class is short SRC https://github.com/d3fc/d3fc/blob/master/packages/d3fc-pointer/src/pointer.js \`\`\` js import { dispatch } from 'd3-dispatch'; import { mouse } from 'd3-selection'; import { rebind } from '@d3fc/d3fc-rebind'; export default () => { const event = dispatch('point'); function mousemove() { const point = mouse(this); event.call('point', this, [{ x: point[0], y: point[1] }]); } function mouseleave() { void event.call('point', this, []); } const instance = (selection) => { selection .on('mouseenter.pointer', mousemove) .on('mousemove.pointer', mousemove) .on('mouseleave.pointer', mouseleave); }; rebind(instance, event, 'on'); return instance; }; \`\`\` The author for this made the chart a few different ways. blog entry ver 2. https://blog.scottlogic.com/2018/09/21/d3-financial-chart.html \`\`\` const pointer = fc.pointer().on("point", event => { data.crosshair = event.map(({x}) => { const closestIndex = d3.bisector(d => d.date) .left(chartData, xScale.invert(x)); return data[closestIndex]; }); render(); }); \`\`\` on github source code of the demo Ver 1. https://github.com/ColinEberhardt/yahoo-finance-d3fc/blob/master/chart.js \`\`\`js const pointer = fc.pointer().on("point", event => { chartData.crosshair = event.map(pointer => closest(chartData, d => Math.abs(xScale.invert(pointer.x).getTime() - d.date.getTime()) ) ); render(); }); \`\`\` On bl.ocks \`\`\`js const pointer = fc.pointer().on("point", function(event) { if (event.length) { const pointerDate = xScale.invert(event[0].x); const close = closest(mergedData, d => Math.abs(pointerDate.getTime() - d.date.getTime()) ); mergedData.crosshair = [ { x: xScale(close.value.date), y: yScale(close.value.high), value: close.value } ]; } else { mergedData.crosshair = []; } render(); }); d3.select("#chart-element .plot-area").call(pointer); }; \`\`\` `31:T533,callout = () => { let scale = d3.scaleIdentity(); const instance = selection => { const width = 40, height = 15, h2 = height / 2; const calloutJoin = fc.dataJoin("g", "callout"); selection.each((data, selectionIndex, nodes) => { // this component is tightly coupled to the shape of the input data, extracting // this high and moving average values from the last datapoint let calloutData = []; if (data.length) { const lastPoint = data[data.length - 1]; const calloutData = [lastPoint.high, lastPoint.ma]; } const element = calloutJoin( d3.select(nodes[selectionIndex]), calloutData ).attr("transform", d => `translate(7, ${scale(d)})`); element .enter() .append("path") .attr( "d", d3.area()([ [0, 0], [h2, -h2], [width, -h2], [width, h2], [h2, h2], [0, 0] ]) ); element .enter() .append("text") .attr("transform", `translate(${width - 3}, 0)`) .text(d => d3.format(".2f")(d)); }); }; instance.scale = (...args) => { if (!args.length) { return scale; } scale = args[0]; return instance; }; return instance; }32:T4f5,html``33:T892,CrosshairRendering = { Crosshair; // create some test data var sinewave = d3.range(50).map((d) => ({ x: d / 4, y: Math.sin(d / 4) })) // combine the sine wave with an empty array which will hold the // current crosshair value var data = { series: sinewave, crosshair: [] }; // use the extent component to compute the x / y domain var yExtent = fc.extentLinear() .accessors([d => d.y]) .pad([0.4, 0.4]) .padUnit('domain'); var xExtent = fc.extentLinear() .accessors([d => d.x]); // create a chart var chart = fc.chartCartesian( d3.scaleLinear(), d3.scaleLinear()) .yDomain(yExtent(sinewave)) .yLabel('Sine') .xDomain(xExtent(sinewave)) .xLabel('Value') .decorate(function(sel) { // decorate the cartesian chart to add the tooltip element on // the enter selection sel.enter() .append('div') .classed('sinewave_tooltip', true); // on the update selection, update the text sel.select('.sinewave_tooltip') .text(d => d.crosshair.length > 0 ? 'x: ' + d.crosshair[0].x.toFixed(0) + ', y: ' + d.crosshair[0].y.toFixed(0) : '' ); }) var sinLine = fc.seriesSvgLine() .crossValue(d => d.x) .mainValue(d => d.y); var crosshair = fc.annotationSvgCrosshair() .xLabel('') .yLabel(''); // Add the line and crosshair via a multi-series. Use the mapping function // to provide the correct data to each var multi = fc.seriesSvgMulti() .series([sinLine, crosshair]) .mapping((data, index, series) => { switch(series[index]) { case sinLine: return data.series; case crosshair: return data.crosshair; } }); chart.svgPlotArea(multi); /////////////////////////////////////////// // RENDERING function render(){ d3.select('#crosshair-chart') .datum(data) .call(chart); // add the pointer component to the plot-area, re-rendering // each time the event fires. var pointer = fc.pointer() .on('point', (event) => { data.crosshair = event; render(); }); d3.select('#crosshair-chart .plot-area') .call(pointer); } /////////////////////////////////////////// render(); }34:T836,{ MACD; let data=[...ohlcvData]; // construct the three series that render the different components of the MACD indicator const divergenceBarSeries = fc.seriesSvgBar() .crossValue(d => d.date) .mainValue(d => d.macd.divergence); const signalLineSeries = fc.seriesSvgLine() .crossValue(d => d.date) .mainValue(d => d.macd.signal) // use the decorator pattern to access the enter selection and add a class // to this series .decorate(sel => sel.enter() .classed('signal', true) ) const macdLineSeries = fc.seriesSvgLine() .crossValue(d => d.date) .mainValue(d => d.macd.macd) .decorate(sel => sel.enter() .classed('macd', true) ); // merge into a single seris which is associated with the chart const mergedSeries = fc.seriesSvgMulti() .series([divergenceBarSeries, signalLineSeries, macdLineSeries]); // adapt the d3 time scale to add discontinuities, so that weekends are removed const xScale = fc.scaleDiscontinuous(d3.scaleTime()) .discontinuityProvider(fc.discontinuitySkipWeekends()); const chart = fc.chartCartesian( xScale, d3.scaleLinear() ) .yOrient('left') .svgPlotArea(mergedSeries); // use the extent component to determine the x domain const xExtent = fc.extentDate() .accessors([d => d.date]); // the y domain should be symmetrical about the zero value and padded by 10% const yExtent = fc.extentLinear() .accessors([d => d.macd.macd]) .pad([0.1, 0.1]) .symmetricalAbout(0); const macdAlgorithm = fc.indicatorMacd() .fastPeriod(4) .slowPeriod(10) .signalPeriod(5) .value(d => d.close); // the CSV data is in reverse date order data = data.reverse(); // compute the MACD const macdData = macdAlgorithm(data); // merge into a single series const mergedData = data.map((d, i) => Object.assign({}, d, { macd: macdData[i] }) ); // set the domain based on the data chart.xDomain(xExtent(mergedData)) .yDomain(yExtent(mergedData)); // select and render d3.select('#macd-chart') .datum(mergedData) .call(chart); }35:T4bc,{ const data=[...ohlcvData]; const volumeSeries = fc.autoBandwidth(fc.seriesSvgBar()) .mainValue(d => d.volume) .crossValue(d => d.date) .decorate(sel => sel.enter() .attr('fill', d => d.open > d.close ? 'red' : 'green') ) // adapt the d3 time scale to add discontinuities, so that weekends are removed const xScale = fc.scaleDiscontinuous(d3.scaleTime()) .discontinuityProvider(fc.discontinuitySkipWeekends()); const chart = fc.chartCartesian( xScale, d3.scaleLinear() ) .yOrient('left') .yLabel('volume (millions of dollars)') .yTickFormat(d3.format(',.3s')) .svgPlotArea(volumeSeries); // use the extent component to determine the x and y domain const durationDay = 864e5; const xExtent = fc.extentDate() .accessors([d => d.date]) // pad by one day on either side of the scale .padUnit('domain') .pad([durationDay, durationDay]); const yExtent = fc.extentLinear() .accessors([d => d.volume]) .include([0]) // pad by 10% at the upper end .pad([0, 0.1]); // set the domain based on the data chart.xDomain(xExtent(data)) .yDomain(yExtent(data)) // select and render d3.select('#volume-chart') .datum(data) .call(chart); } 36:[] 2c:{"id":"08a23fd11350c998","slug":"financial-charts","title":"d3fc - Stock Price Chart","thumbnail":"8113038633c01822c9ae33615c3445e7dacf280cd30105709e715e0b056cc268","access_level":"public","create_time":"$D2019-08-04T20:04:44.551Z","update_time":"$D2021-07-25T03:41:38.654Z","view_time":null,"first_public_time":"$D2019-08-04T23:53:52.006Z","has_unpublished_edits":null,"fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"c4502285a4e37a76","login":"stroked","name":"Ajay","avatar_url":"https://avatars-next.observableusercontent.com/849d25192620761ccd4197b7433f5fb9328fa64b2eae6f2efeda3ec38d44931b","tier":"starter_2024"},"version":1723,"publish_version":1723,"role":null,"authored":false,"authors":[{"type":"individual","id":"598f272ebeef8654","login":"stroked","name":"Ajay","avatar_url":"https://avatars-next.observableusercontent.com/d44b451942fea52596b1c676ac370921eb7a9fcbafedb9695b15ef3e7e3adcd1","tier":null}],"members":[{"type":"individual","id":"598f272ebeef8654","login":"stroked","name":"Ajay","avatar_url":"https://avatars-next.observableusercontent.com/d44b451942fea52596b1c676ac370921eb7a9fcbafedb9695b15ef3e7e3adcd1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"2412ddc829531646","slug":"financial-charts","title":"Financial Charts","owner":{"id":"c4502285a4e37a76","login":"stroked","name":"Ajay"}},"type":"notebook","body":{"title":"d3fc - Stock Price Chart","cells":[{"id":0,"value":"md`# d3fc - Stock Price Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1441,"value":"md`

\n\n## Demo: Stock Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"viewof dataSelect=select({options:[\"intra-day\",\"end-of-day\"], value:\"intra-day\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"//shaded area under the line doesn't show up in firefox \n//works in chrome","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1556,"value":"d3.select('#multi-chart').attr('height',500).attr('viewBox',[-200,0,width,height])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"height=500;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"md`## Utility`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"financial=(x) => Number.parseFloat(x).toFixed(2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"dateFormat = d3.timeFormat(\"%a %H:%M%p\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"priceFormat = d3.format(\",.2f\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"legendData = datum => [\n { name: \"Open\", value: priceFormat(datum.open) },\n { name: \"High\", value: priceFormat(datum.high) },\n { name: \"Low\", value: priceFormat(datum.low) },\n { name: \"Close\", value: priceFormat(datum.close) },\n { name: \"Volume\", value: priceFormat(datum.volume) }\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"md`### d3 - Financial Charts\n#### Chart 1: Price`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"lineSeries = fc\n .seriesSvgLine()\n .mainValue(d => d.high)\n .crossValue(d => d.date);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"movingAverageSeries = fc\n .seriesSvgLine()\n .mainValue(d => d.ma)\n .crossValue(d => d.date)\n .decorate(sel => sel.enter().classed(\"ema\", true));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1269,"value":"md`#### Chart 2: Volume`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"volumeSeries = fc\n .seriesSvgBar()\n .bandwidth(2)\n .crossValue(d => d.date)\n .decorate(sel =>\n sel\n .enter()\n .classed(\"volumebar\", true)\n .attr(\"fill\", d => (d.open > d.close ? \"red\" : \"green\"))\n ).mainValue(d => volumeToPriceScale(d.volume));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":" areaSeries = fc\n .seriesSvgArea()\n .mainValue(d => d.high)\n .crossValue(d => d.date)\n .baseValue(d => yDomain[0]);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1275,"value":"md`#### AXIS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"gridlines = fc\n .annotationSvgGridline()\n .yTicks(5)\n .xTicks(0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"verticalAnnotation = fc.annotationSvgLine().orient(\"vertical\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"bands = fc\n .annotationSvgBand()\n .orient(\"vertical\")\n .fromValue(d => d[0][1])\n .toValue(d => d[1][0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"crosshair = fc.annotationSvgCrosshair();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":" chartLegend = legend();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1278,"value":"md`#### VISUALIZATION`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":" multi = {\n\n return fc\n .seriesSvgMulti()\n .series([\n gridlines,\n areaSeries,\n volumeSeries,\n movingAverageSeries,\n lineSeries,\n chartLegend,\n crosshair,\n verticalAnnotation,\n bands\n ])\n .mapping((data, index, series) => {\n const lastPoint = data[data.length - 1];\n const legendValue = data.crosshair.length\n ? data.crosshair[0].value\n : lastPoint;\n switch (series[index]) {\n case chartLegend:\n return legendData(legendValue);\n case crosshair:\n return data.crosshair;\n case verticalAnnotation:\n return flatten(\n data.tradingHoursArray.map(d => [d[0], ...exchangeOpeningHours(d[0])])\n );\n case bands:\n return d3.pairs(\n data.tradingHoursArray.map(d => exchangeOpeningHours(d[0]))\n );\n default:\n return data;\n }\n });\n\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"ma = fc.indicatorMovingAverage().value(d => d.high);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"xExtent = fc.extentDate().accessors([d => d.date]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"volumeExtent = fc\n .extentLinear()\n .pad([0, 2])\n .accessors([d => d.volume]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"yExtent = fc\n .extentLinear()\n .pad([0.1, 0.1])\n .accessors([d => d.high, d => d.low])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1254,"value":"md`### SCALES`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"xScale = fc\n .scaleDiscontinuous(d3.scaleTime())\n .discontinuityProvider(fc.discontinuityRange(...discontinuities))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"yScale = d3.scaleLinear()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"// map the volume scale to the price - a cunning way to use the price\n// scale for our volume series!\nvolumeToPriceScale = d3\n .scaleLinear()\n .domain(volumeDomain)\n .range(yDomain)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"yCallout = callout().scale(yScale)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"xTickFilter = d3.timeMinute\n .every(30)\n .filter(d => d.getHours() === 9 && d.getMinutes() === 30)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"md`## DATA`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"data = dataSelect === 'intra-day' ? intradayData : loadDataEndOfDay","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1587,"value":"intradayData[intradayData.length - 1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"intradayData = loadDataIntraday\n .slice(0, 700)\n // filter out any data that is > 2 hours outside of trading\n .filter(d => d.date.getHours() > 6 && d.date.getHours() < 18)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"loadDataEndOfDay = d3.csv(\n \"https://raw.githubusercontent.com/ColinEberhardt/yahoo-finance-d3fc/master/yahoo.csv\",\n d => ({\n date: new Date(d.Timestamp * 1000),\n volume: Number(d.volume),\n high: Number(d.high),\n low: Number(d.low),\n open: Number(d.open),\n close: Number(d.close)\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"loadDataIntraday = d3\n .json(\n \"https://raw.githubusercontent.com/ColinEberhardt/yahoo-finance-d3fc/master/yahoo.json\"\n )\n .then(json => {\n const chartData = json.chart.result[0];\n const quoteData = chartData.indicators.quote[0];\n return chartData.timestamp.map((d, i) => ({\n date: new Date(d * 1000),\n high: quoteData.high[i],\n low: quoteData.low[i],\n open: quoteData.open[i],\n close: quoteData.close[i],\n volume: quoteData.volume[i]\n }));\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"// compute the trading hours and use this to create our discontinuous scale\ntradingHoursArray = tradingHours(data.map(d => d.date))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"// compute the moving average data\nmaData = ma(data).map(x => (x ? +financial(x) : undefined))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"// merge into a single series\nmergedData = data.map((d, i) => ({ ma: maData[i], ...d }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"discontinuities = d3.pairs(tradingHoursArray).map(d => [d[0][1], d[1][0]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"Builder = {\n mergedData.crosshair = [];\n mergedData.tradingHoursArray = tradingHoursArray;\n // chart.xDomain(xExtent(data)).yDomain(yDomain);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"\nyDomain = yExtent(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"volumeDomain = volumeExtent(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"render = {\n // select and render\n d3.select(\"#stock-chart\")\n .datum(mergedData)\n .call(chart);\n\n d3.select(\"#stock-chart .plot-area\").call(pointer);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"pointer = fc.pointer().on(\"point\", function(event) {\n // console.log(event)\n // console.log(d3.event)\n // console.log(d3.mouse.x)\n if (event.length) {\n const pointerDate = xScale.invert(event[0].x);\n const close = closest(mergedData, d =>\n Math.abs(pointerDate.getTime() - d.date.getTime())\n );\n mergedData.crosshair = [\n {\n x: xScale(close.value.date),\n y: yScale(close.value.high),\n value: close.value\n }\n ];\n } else {\n mergedData.crosshair = [];\n }\n // render();\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"legend = () => {\n const labelJoin = fc.dataJoin(\"text\", \"legend-label\");\n const valueJoin = fc.dataJoin(\"text\", \"legend-value\");\n\n const instance = selection => {\n selection.each((data, selectionIndex, nodes) => {\n labelJoin(d3.select(nodes[selectionIndex]), data)\n .attr(\"transform\", (_, i) => \"translate(50, \" + (i + 1) * 15 + \")\")\n .text(d => d.name);\n\n valueJoin(d3.select(nodes[selectionIndex]), data)\n .attr(\"transform\", (_, i) => \"translate(60, \" + (i + 1) * 15 + \")\")\n .text(d => d.value);\n });\n };\n\n instance.xScale = () => instance;\n instance.yScale = () => instance;\n return instance;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"exchangeOpeningHours = day => [\n new Date(day.getFullYear(), day.getMonth(), day.getDate(), 9, 30, 0),\n new Date(day.getFullYear(), day.getMonth(), day.getDate(), 16, 0, 0)\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"isWithinOpeningHours = time => {\n const openingHours = exchangeOpeningHours(time);\n return time > openingHours[0] && time < openingHours[1];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"tradingHours = dates => {\n const getDateKey = date =>\n date.getMonth() + \"-\" + date.getDate() + \"-\" + date.getFullYear();\n\n const tradingHours = dates.reduce((acc, curr) => {\n const dateKey = getDateKey(curr);\n if (!acc.hasOwnProperty(dateKey)) {\n acc[dateKey] = [curr, curr];\n } else {\n acc[dateKey][1] = curr;\n }\n return acc;\n }, {});\n\n return Object.keys(tradingHours).map(d => tradingHours[d]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"closest = (arr, fn) =>\n arr.reduce(\n (acc, value, index) =>\n fn(value) < acc.distance ? { distance: fn(value), index, value } : acc,\n {\n distance: Number.MAX_VALUE,\n index: 0,\n value: arr[0]\n }\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"flatten = arr => [].concat.apply([], arr);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":" blueGrad = DOM.uid('area-gradient')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"fc = require('d3fc')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"import {select} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1589,"value":"md`Problems:\n1. crosshair doesnt work\n2. MACD demo '.signal' color doesn't change to red`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1652,"value":"md`\n\n---\n\n---\n\n---\nEXTRA\n----\n\n## Building Sub-Components for the Main Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1435,"value":"md`[d3fc- A better axis](https://blog.scottlogic.com/2019/05/09/building-a-better-d3-axis.html)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1508,"value":"md`## Demo: Crosshair tooltip interaction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1509,"value":"Crosshair=html`\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1579,"value":"{\n \n \n let crosshair = d3.select('.sinewave_tooltip').style('background-color','blue')\n let crosshair_chart = d3.select('#crosshair-chart').on('mouseover',mousehandler)\n function mousehandler(e,sel){\n \n const [x,y] = d3.event.mouse();\n console.log(x,y)\n \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1512,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1494,"value":"md`## Demo: MACD`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1497,"value":"MACD=html`\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1499,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1449,"value":"md`---\n## Demo: Volume Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1458,"value":"html`\n\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1461,"value":"ohlcvData =\n {\n let dateParser= d3.timeParse(\"%d-%b-%y\");\n let data = await d3.csv('https://gist.githubusercontent.com/ColinEberhardt/4846b01602f81d116a7769bcc4a5c4d9/raw/e6d068d91fc38bc877dcd12456f9f972a99333a9/data.csv',d3.autoType)\n \n let parsedData = data.map(row=>{\n return{ \t\n \n \topen: Number(row.Open),\n \tclose: Number(row.Close),\n \thigh: Number(row.High),\n \tlow: Number(row.Low),\n \tvolume: Number(row.Volume),\n \tdate: dateParser(row.Date)}\n \n \n \n})\n return parsedData.slice(0, 200);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1455,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2d:"$2c:body"