2f:T48e,### 4. Build the custom vertical pointer We finished the main chart, now we need to add some interactivity to improve the user experience. The custom pointer is composed by a vertical dotted line and also a small circle. Both are native marks that are already included in Observable Plot: [ruleX](https://observablehq.com/plot/marks/rule#ruleX) and [dot](https://observablehq.com/plot/marks/dot) ![image@3.png](${await FileAttachment("image@3.png").url()}) However, in order to make this line and circle only appear when close to the data point I'm hovering, we need a special transform called [pointer](https://observablehq.com/plot/interactions/pointer#pointer-transform). From Observable docs: >*The pointer transform filters a mark interactively such that only the point closest to the pointer is rendered. It is typically used to show details on hover, often with a tip or crosshair mark, but it can be paired with any mark.* Now, to make my chart concise I'll group these two marks in one function called `plotCustomPointer` taking advantage that we can [compose a mark from a series of other marks](https://observablehq.com/plot/features/marks#marks) 30:T4be,### 5.4 Add the tooltip to the chart Finally we'll create a function to add the tooltip called `plotCustomTooltip`. We are going to extend the tip mark using the `render` function, this way we can add the HTML with the *Date* and *Price* values. From observable plot docs: >The mark’s render function is called with the following five arguments: * *index*: the index of the facet * *scales*: the scale functions and descriptors * *values*: the scaled and raw channels * *dimensions*: the dimensions of the facet * *context*: the context > The function is expected to return a single SVG node, or null or undefined if no output is desired for the current facet. Typically, it returns a [G element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g), with a child node (say, a [circle element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle)) for each valid data point. We can focus just in the values argument and ignore the rest for the moment. For each data point we: - Get the date from the x channel inside values: `values.channels.x.value[i]` - and the price from the y channel: `values.channels.y.value[i]` Then we add the required `g` node and finally append our htmlTooltip31:T778,function plotCustomTooltip( data, { tooltipHeight, tooltipWidth, x, y, currency } ) { return Plot.marks( Plot.tip( data, Plot.pointerX({ x: x, y: y, // extend the tip mark render function render: (index, scales, values, dimensions, context) => { const g = d3.select(context.ownerSVGElement).append("g"); const [i] = index; if (i !== undefined) { const formatTime = d3.utcFormat("%d %b %Y"); const priceDate = formatTime(values.channels.x.value[i]); const closePrice = values.channels.y.value[i]; // The tooltip starts after the left margin in the x-axis to avoid blocking the y-axis labels // We start to translate the tooltip when the pointer is halfway the initial tooltip location // We stop moving the tooltip when there's not enough width available within the container const currentXPosition = values.x[i]; const tooltipStartPosition = dimensions.marginLeft; const tooltipDefaultPosition = currentXPosition - tooltipWidth / 2; const tooltipEndPosition = dimensions.width - dimensions.marginRight - tooltipWidth; g.attr( "transform", `translate(${Math.min( currentXPosition <= tooltipWidth / 2 + dimensions.marginLeft ? tooltipStartPosition : tooltipDefaultPosition, tooltipEndPosition )}, 0)` ).append( () => svg`${htmlTooltip({ price: closePrice, date: priceDate, currency: currency, width: tooltipWidth, height: tooltipHeight })}` ); } return g.node(); } }) ) ); }32:[{"id":"3fa90a77af90a1614edb0a29999a2c8da33c59c5b7d169304aacf9669a3e9a474a6d25821f57de12386716367ef568ed4c358069949de0b32eba032a3a3ce1c3","href":"https://static.observableusercontent.com/files/3fa90a77af90a1614edb0a29999a2c8da33c59c5b7d169304aacf9669a3e9a474a6d25821f57de12386716367ef568ed4c358069949de0b32eba032a3a3ce1c3","name":"Screenshot 2023-12-08 125647.png","type":"image/png","lastModified":1702832187389.645,"size":58375},{"id":"224e76b47aacf933e332b6530154f92ac13f2edefd35874480f2db4a04ca961021e17c519f69d89543eb54aa1eae67d003c745d0181b3429bf695961a34ee73c","href":"https://static.observableusercontent.com/files/224e76b47aacf933e332b6530154f92ac13f2edefd35874480f2db4a04ca961021e17c519f69d89543eb54aa1eae67d003c745d0181b3429bf695961a34ee73c","name":"tsla.csv","type":"text/csv","lastModified":1702832187389.645,"size":8177},{"id":"b09298d300de82c5476cb9261e25560dc08658319ee27861d8032ba555b52b1196adae4c8350f44c4e2501572c606ee1dbe030786b66a314a0439b4f9fec163b","href":"https://static.observableusercontent.com/files/b09298d300de82c5476cb9261e25560dc08658319ee27861d8032ba555b52b1196adae4c8350f44c4e2501572c606ee1dbe030786b66a314a0439b4f9fec163b","name":"image@3.png","type":"image/png","lastModified":1702832187389.645,"size":15803},{"id":"41cb62d6a491ac5e11a89e9bbd3dc93fa45f8c2f54b870e5e8950ecd54fbc0344ea5ce556e74c7b4094f53fe75c0cb30fdbf0d3691bd83ede661a31cde386e78","href":"https://static.observableusercontent.com/files/41cb62d6a491ac5e11a89e9bbd3dc93fa45f8c2f54b870e5e8950ecd54fbc0344ea5ce556e74c7b4094f53fe75c0cb30fdbf0d3691bd83ede661a31cde386e78","name":"image@4.png","type":"image/png","lastModified":1702832187389.645,"size":7880},{"id":"a7cc076242311f088fefe751b2bd515442e6e49ad13881286ba52455a71e4e321937f4fefc8536728b0cada94cd9a92446eabd1f0d03179fcb77d4e82b695056","href":"https://static.observableusercontent.com/files/a7cc076242311f088fefe751b2bd515442e6e49ad13881286ba52455a71e4e321937f4fefc8536728b0cada94cd9a92446eabd1f0d03179fcb77d4e82b695056","name":"image@10.png","type":"image/png","lastModified":1702832187389.645,"size":50253},{"id":"b4a971ae296d5247622ce00e405ffbe16680822e498b4dd319add3f2cc53a8d9372d2146f054cd4d28ca333cb55eb573f53f859b6c9fa24157d335a013517b41","href":"https://static.observableusercontent.com/files/b4a971ae296d5247622ce00e405ffbe16680822e498b4dd319add3f2cc53a8d9372d2146f054cd4d28ca333cb55eb573f53f859b6c9fa24157d335a013517b41","name":"tooltip-animation.gif","type":"image/gif","lastModified":1702832187389.645,"size":420218},{"id":"09a5b33be3f89be4c749e15a51f63719e67e480f5865fa997885ee30d059a66d55920ed6a2a1ef001164cab7a419f8d27d60f290996c83e2ea75da1071af05c4","href":"https://static.observableusercontent.com/files/09a5b33be3f89be4c749e15a51f63719e67e480f5865fa997885ee30d059a66d55920ed6a2a1ef001164cab7a419f8d27d60f290996c83e2ea75da1071af05c4","name":"image@11.png","type":"image/png","lastModified":1702832187389.645,"size":185201}] 2d:{"title":"Google Finance Charts implementation in Observable Plot","cells":[{"id":0,"value":"# Google Finance Charts implementation in Observable Plot","pinned":false,"hidden":false,"mode":"md"},{"id":631,"value":"The goal of this notebook is to do a tutorial of my implementation of the **5Y line chart** from [Google Finance](https://www.google.com/finance/quote/TSLA:NASDAQ?sa=X&ved=2ahUKEwjuoIj-s4CDAxUASjABHcvsCx0Q3ecFegQIHhAX&window=5Y). See image below for reference:\n\n![Screenshot 2023-12-08 125647.png](${await FileAttachment(\"Screenshot 2023-12-08 125647.png\").url()})\n\nSome small notes before starting:\n- The focus is only on the chart, not the other features like compare or different time scenarios\n- I'm using Tesla close prices between `2018-12-7` and `2023-12-1` with a weekly update frequency\n\n**TLDR**: [Final code](https://observablehq.com/d/6eb190775d47fe25#cell-1040)","pinned":false,"hidden":false,"mode":"md"},{"id":658,"value":"## Planning the implementation\n\nNow this is the plan:\n0. [Get the data](https://observablehq.com/d/6eb190775d47fe25#cell-548)\n1. [Build the line chart](https://observablehq.com/d/6eb190775d47fe25#cell-709)\n2. [Build the area chart](https://observablehq.com/d/6eb190775d47fe25#cell-787)\n3. [Build the custom vertical pointer](https://observablehq.com/d/6eb190775d47fe25#cell-826)\n4. [Build the custom tooltip](https://observablehq.com/d/6eb190775d47fe25#cell-864)\n\n![image@10.png](${await FileAttachment(\"image@10.png\").url()})\n\nThe beautiful thing here is that you have full control of your chart. Starting from native primitives, called [marks](https://observablehq.com/plot/features/marks) in Observable Plot, that let you build your chart in layers. \n\nThis enables a lot of power and flexibility to build charts the way you want instead of trying to find the specific chart type for your needs.","pinned":false,"hidden":false,"mode":"md"},{"id":548,"value":"### 1. Get the TSLA price data\n\nThe TESLA prices CSV data is already [attached](https://observablehq.com/documentation/data/files/file-attachments) to this notebook. What we do next is to parse the CSV to a JavaScript array of objects using the `d3.csvParse` function.\n\nEach element of the array has these properties `Date`, `Close`, `Low` and `High`. e.g.:\n\n```javascript\n{\n Date: 2018-12-07, // JS Date\n Close: 23.86, // number\n Low: 23.38, // number\n High: 25.3 // number\n}```\n\nFor more detailed information regarding data loading to Observable notebooks, please check out [introduction-to-data](https://observablehq.com/@observablehq/introduction-to-data)","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"tsla = d3.csvParse(\n await FileAttachment(\"tsla.csv\").text(),\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":709,"value":"### 2. Build the Line chart and grid\n- The chart container will have a height of 270px and will try to adjust to a max number of 5 ticks on the *y-axis*\n- Use Roboto as font family with font size of 12px (The custom font is imported in the Appendix section)\n- Use the [line mark](https://observablehq.com/plot/marks/line) with the `tsla` data.\n- Set `Date` property for the *x-axis* and `Close` price for *y-axis*\n- The line color is this green: #34A853 with a width of 2px\n- Use the [grid mark](https://observablehq.com/plot/marks/grid#grid-mark) to add the horizontal grids\n- Use the [rule mark](https://observablehq.com/plot/marks/rule) to draw an horizontal line at `y=0`","pinned":false,"hidden":false,"mode":"md"},{"id":711,"value":"Plot.plot({\n style: { fontFamily: \"Roboto\", fontSize: 12 },\n height: 270,\n y: { nice: 5 }, \n marks: [\n Plot.lineY(tsla, {\n x: \"Date\",\n y: \"Close\",\n stroke: \"#34A853\",\n strokeWidth: 2\n }),\n // Grid and horizontal line at y=0\n Plot.ruleY([0], { stroke: \"lightgray\" }),\n Plot.gridY({ stroke: \"#E8EAED\", strokeWidth: 1, strokeOpacity: 0.5 }),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":787,"value":"### 3. Build the area chart\n\n- Use the [area mark](https://observablehq.com/plot/marks/area). Again, use `Date` and `Close` for x and y respectively\n- The area is not filled in a solid color, so we need a way to smooth the color from green to transparent (instead of white, so it also looks good on dark themes). We do that with a [SVG Linear Gradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient)\n- Create a function to add the gradient to the area mark. The function expects a base color and a unique ID.","pinned":false,"hidden":false,"mode":"md"},{"id":797,"value":"function withGradient({color, id = DOM.uid(\"gradient\").id}, callback) {\n return [\n callback(`url(#${id})`),\n () => htl.svg`\n \n \n \n \n \n \n `\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":800,"value":"Plot.plot({\n style: { fontFamily: \"Roboto\", fontSize: 12 },\n height: 270,\n y: { nice: 5 }, \n marks: [\n // Line Chart\n Plot.lineY(tsla, {\n x: \"Date\",\n y: \"Close\",\n stroke: \"#34A853\",\n strokeWidth: 2\n }),\n // Grid and horizontal line at y=0\n Plot.ruleY([0], { stroke: \"lightgray\" }),\n Plot.gridY({ stroke: \"#E8EAED\", strokeWidth: 1, strokeOpacity: 0.5 }),\n // Area Chart\n withGradient({color: \"#34A853\"}, fill => Plot.areaY(tsla, {\n x: \"Date\",\n y: \"Close\",\n fill,\n })), \n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":826,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":567,"value":"function plotCustomPointer(data, {x, y}) {\n return Plot.marks(\n Plot.ruleX(\n data,\n Plot.pointerX({\n x: x,\n py: y,\n stroke: \"#202124\",\n strokeDasharray: \"3,4\",\n opacity: 0.55,\n strokeWidth: 2\n })\n ),\n Plot.dot(\n data,\n Plot.pointerX({\n x: x,\n y: y,\n r: 5,\n fill: \"#34A853\"\n })\n )\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":856,"value":"Finally we add the function to our main chart. If you hover the chart you will see the custom pointer.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":858,"value":"Plot.plot({\n style: { fontFamily: \"Roboto\", fontSize: 12 },\n height: 270,\n y: { nice: 5 }, \n marks: [\n // Line Chart\n Plot.lineY(tsla, {\n x: \"Date\",\n y: \"Close\",\n stroke: \"#34A853\",\n strokeWidth: 2\n }),\n // Grid and horizontal line at y=0\n Plot.ruleY([0], { stroke: \"lightgray\" }),\n Plot.gridY({ stroke: \"#E8EAED\", strokeWidth: 1, strokeOpacity: 0.5 }),\n // Area Chart\n withGradient({color: \"#34A853\"}, fill => Plot.areaY(tsla, {\n x: \"Date\",\n y: \"Close\",\n fill,\n })),\n // Custom Pointer\n plotCustomPointer(tsla, {x: \"Date\", y: \"Close\"}),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":864,"value":"### 5. Build the custom tooltip\n\nThe tooltip consists in a white box with a shadow containing two text elements. The first one in black is the price and the second is the date in a lightgray color.\n![image@4.png](${await FileAttachment(\"image@4.png\").url()})\n\nSteps to build the custom tooltip:\n1. Create the tooltip HTML element\n2. Add the styles to the tooltip\n3. Define the tooltip position logic\n4. Add the tooltip to the chart","pinned":false,"hidden":false,"mode":"md"},{"id":1211,"value":"### 5.1 Tooltip HTML element\n\nObservable Plot does have a [tip mark](https://observablehq.com/plot/marks/tip), however I'd like to use something more custom made using HTML.\nThe way I found to embed HTML content into SVG is to use [foreignObject](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject) \n\nThen the first step is to create a `foreignObject` element with our desired HTML content. Let's create a function that receives price, date, currency, width and heigth as arguments and returns the tooltip HTML element ","pinned":false,"hidden":false,"mode":"md"},{"id":465,"value":"htmlTooltip = ({ price, date, currency, width, height }) =>\n`\n\n

\n ${price} ${currency}${date}\n

\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":544,"value":"### 5.2 Adding Styles to the tooltip\n\nNow let's add some css classes to the tooltip to make it look nicer (shadows, colors, fonts, etc):","pinned":false,"hidden":false,"mode":"md"},{"id":229,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":1220,"value":"

5.3 Tooltip Position Logic

The tooltip should behave similar from the gif below:

\n $\"tooltip-animation.gif\"$ ","pinned":false,"hidden":false,"mode":"html"},{"id":1260,"value":"To avoid collisions with the margins and to try to keep the tooltip centered around the current position we need to consider three states: the inital, the default and the end state, described below:\n\n![image@11.png](${await FileAttachment(\"image@11.png\").url()})","pinned":false,"hidden":false,"mode":"md"},{"id":889,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":556,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":554,"value":"## Final Chart","pinned":false,"hidden":false,"mode":"md"},{"id":1040,"value":"Plot.plot({\n style: { fontFamily: \"Roboto\", fontSize: 12 },\n height: 270,\n y: { nice: 5 },\n marks: [\n // Line Chart and horizontal grid\n Plot.ruleY([0], { stroke: \"lightgray\" }), // draw an horizontal line at 0\n Plot.gridY({ stroke: \"#E8EAED\", strokeWidth: 1, strokeOpacity: 0.5 }),\n Plot.lineY(tsla, {\n x: \"Date\",\n y: \"Close\",\n stroke: \"#34A853\",\n strokeWidth: 2\n }),\n // Area Chart\n withGradient({color: \"#34A853\"}, fill => Plot.areaY(tsla, {\n x: \"Date\",\n y: \"Close\",\n fill,\n })),\n // Custom Vertical Pointer\n plotCustomPointer(tsla, {x: \"Date\", y: \"Close\"}),\n // Custom HTML tooltip\n plotCustomTooltip(tsla, {tooltipHeight: 30, tooltipWidth: 146, x: \"Date\", y: \"Close\", currency: \"USD\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1268,"value":"## Special Thanks\n\n- https://observablehq.com/@fil *Helped me learn about render and also his notebooks were really useful for guide and inspiration to complete my goal on this notebook*\n- https://observablehq.com/@mootari *Helped me to have a better understanding about linear gradient and htl. Also helped me to code this function `withGradient()`*","pinned":false,"hidden":false,"mode":"md"},{"id":950,"value":"

Appendix

\n","pinned":true,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}