2f:T478,--- ## 2. Build the Line Chart The idea is to establish the overall style for the visualization, create a clear line chart using the specified data, then incorporate a subtle horizontal grid for reference, and finally include a horizontal line at the bottom for additional visual context. **Setting General Style Options:** - Use the Roboto font family with a font size of 12px (Note: Custom font is imported in the Appendix section). - Set the chart container height to 270px. - Adjust the chart to display a maximum of 5 ticks on the y-axis. **Creating the Line Chart:** - Utilize the [line mark](https://observablehq.com/plot/marks/line) for the line chart with tsla data - Define Date for the x-axis and Close for the y-axis. - Set the line color to green (#34A853) and a line width of 2px. **Adding Horizontal Grid:** - Integrate the [grid mark](https://observablehq.com/plot/marks/grid#grid-mark) for the horizontal grid. - Use a thinner line and adjust opacity to avoid drawing excessive attention. **Enhancing with Horizontal Line:** - Add a horizontal line at y=0 using the [rule mark](https://observablehq.com/plot/marks/rule). 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:T78b,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 = d3.format(".2f")(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:T4de,33:[{"id":"224e76b47aacf933e332b6530154f92ac13f2edefd35874480f2db4a04ca961021e17c519f69d89543eb54aa1eae67d003c745d0181b3429bf695961a34ee73c","href":"https://static.observableusercontent.com/files/224e76b47aacf933e332b6530154f92ac13f2edefd35874480f2db4a04ca961021e17c519f69d89543eb54aa1eae67d003c745d0181b3429bf695961a34ee73c","name":"tsla.csv","type":"text/csv","lastModified":1702078302687.508,"size":8177},{"id":"41cb62d6a491ac5e11a89e9bbd3dc93fa45f8c2f54b870e5e8950ecd54fbc0344ea5ce556e74c7b4094f53fe75c0cb30fdbf0d3691bd83ede661a31cde386e78","href":"https://static.observableusercontent.com/files/41cb62d6a491ac5e11a89e9bbd3dc93fa45f8c2f54b870e5e8950ecd54fbc0344ea5ce556e74c7b4094f53fe75c0cb30fdbf0d3691bd83ede661a31cde386e78","name":"image@4.png","type":"image/png","lastModified":1702086792935.841,"size":7880},{"id":"b4a971ae296d5247622ce00e405ffbe16680822e498b4dd319add3f2cc53a8d9372d2146f054cd4d28ca333cb55eb573f53f859b6c9fa24157d335a013517b41","href":"https://static.observableusercontent.com/files/b4a971ae296d5247622ce00e405ffbe16680822e498b4dd319add3f2cc53a8d9372d2146f054cd4d28ca333cb55eb573f53f859b6c9fa24157d335a013517b41","name":"tooltip-animation.gif","type":"image/gif","lastModified":1702135101942.501,"size":420218},{"id":"5b865c115556928bf23e1dfaa6380711c3173806b279c03761491a93d03c06cc3075827182069ab46e90792bb48a6d32974ae4f75adca8c5b94f7261af0f86d5","href":"https://static.observableusercontent.com/files/5b865c115556928bf23e1dfaa6380711c3173806b279c03761491a93d03c06cc3075827182069ab46e90792bb48a6d32974ae4f75adca8c5b94f7261af0f86d5","name":"Picture1.png","type":"image/png","lastModified":1702956246639.246,"size":277467},{"id":"8aee31f9421e683f3fb38fe3edf020723368fcddb4769acbd6422615a590bb52b3faffdbcae29400476ebd8ad3d68313738f48d818bcfba34514eb4f1dfbbccb","href":"https://static.observableusercontent.com/files/8aee31f9421e683f3fb38fe3edf020723368fcddb4769acbd6422615a590bb52b3faffdbcae29400476ebd8ad3d68313738f48d818bcfba34514eb4f1dfbbccb","name":"Picture4.png","type":"image/png","lastModified":1702963327989.066,"size":112695},{"id":"4709535d2ec98cb3b8782b322e3a05fe8562d2595719f3b6ec6e4cbc7c33ffb1b590061173ef6196ddf40c154f5e9646fac433814a6f67ae907fd5810a6b6f7f","href":"https://static.observableusercontent.com/files/4709535d2ec98cb3b8782b322e3a05fe8562d2595719f3b6ec6e4cbc7c33ffb1b590061173ef6196ddf40c154f5e9646fac433814a6f67ae907fd5810a6b6f7f","name":"Picture5.png","type":"image/png","lastModified":1702963657114.571,"size":618523}] 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":1296,"value":"This tutorial walks through 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). Here’s a preview of what we're trying to build:","pinned":false,"hidden":false,"mode":"md"},{"id":1299,"value":"FileAttachment(\"tooltip-animation.gif\").image({width: 800})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1356,"value":"details(htl.html`TLDR:Final code`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1304,"value":"---\n## Meet the data","pinned":false,"hidden":false,"mode":"md"},{"id":1319,"value":"For this implementation we're using *tesla prices* data (from the attached tsla.csv file) between 2018-12-07 and 2023-12-01 with a weekly update frequency.","pinned":false,"hidden":false,"mode":"md"},{"id":1316,"value":"await FileAttachment(\"tsla.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"## Planning the implementation\n\nNow, let's lay out the plan step by step:\n0. [Prepare 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)","pinned":false,"hidden":false,"mode":"md"},{"id":1335,"value":"picture1 = FileAttachment(\"Picture1.png\").image({width: 700})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"The 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":"---\n## 1. Prepare the 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":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":711,"value":"Plot.plot({\n // Plot general style options\n style: { fontFamily: \"Roboto\", fontSize: 12 },\n height: 270,\n y: { nice: 5 }, \n // Inside the marks array we define the plot marks we want to use\n marks: [\n // line chart\n Plot.line(tsla, {\n x: \"Date\",\n y: \"Close\",\n stroke: \"#34A853\",\n strokeWidth: 2\n }), \n // Grid mark\n Plot.gridY({ stroke: \"#E8EAED\", strokeWidth: 1, strokeOpacity: 0.5 }),\n // horizontal line at y=0\n Plot.ruleY([0], { stroke: \"lightgray\" }),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":787,"value":"---\n## 3. Build the Area Chart\n\nThe combination of line and area charts enhances the overall readability of the chart. The line chart provides a precise view of trends, while the filled area adds a layer of context without sacrificing clarity.\n\n**Creating the Area Chart**\n- Use the [area mark](https://observablehq.com/plot/marks/area).\n- Set Date for the x-axis and Close for the y-axis.\n\n**Color Gradient for Area**\n- Instead of a solid color, create a smooth gradient from green to transparent.\n- Achieve this effect using an [SVG Linear Gradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient).\n\n**Function for Gradient Addition**\n- Develop a function to add the gradient to the area mark.\n- The function should take a base color and a unique ID as parameters.","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 () => 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":"---\n## 4. Build the custom vertical pointer\n\nWe finished the main chart, now we need to add some interactivity to improve the user experience.\n\nThe 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)","pinned":false,"hidden":false,"mode":"md"},{"id":1439,"value":"picture4 = FileAttachment(\"Picture4.png\").image({width:300})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1445,"value":"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).\n\nFrom Observable docs:\n\n>*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.*\n\nNow, 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)","pinned":false,"hidden":false,"mode":"md"},{"id":567,"value":"function plotCustomPointer(data, {x, y, color}) {\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: color\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\", color: \"#34A853\"}),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":864,"value":"---\n## 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\nThe tooltip should behave similar from the gif below:\n- Tooltip is always at the top section of the chart\n- The vertical pointer is, most of the time, in the middle of the tooltip (except at the start and the end of the chart)","pinned":false,"hidden":false,"mode":"md"},{"id":1501,"value":"FileAttachment(\"tooltip-animation.gif\").image({width: 900})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1260,"value":"To avoid collisions with the margins and to try to keep the tooltip centered around the pointer position we need to consider three states: the initial, the default and the end state, described below:","pinned":false,"hidden":false,"mode":"md"},{"id":1449,"value":"picture5 = FileAttachment(\"Picture5.png\").image({width: 900})","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":556,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":554,"value":"---\n## Final Chart","pinned":false,"hidden":false,"mode":"md"},{"id":1525,"value":"FinalChart = GoogleFinanceChart(tsla, {x: \"Date\", y: \"Close\", color: \"#34A853\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1040,"value":"GoogleFinanceChart = (data, {x, y, color}) => Plot.plot({\n style: { fontFamily: \"Roboto\", fontSize: 12 },\n height: 270,\n marginTop: 30,\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(data, {\n x: x,\n y: y,\n stroke: color,\n strokeWidth: 2\n }),\n // Area Chart\n withGradient({color: color}, fill => Plot.areaY(data, {\n x: x,\n y: y,\n fill,\n })),\n // Custom Vertical Pointer\n plotCustomPointer(data, {x: x, y: y, color: color}),\n // Custom HTML tooltip\n plotCustomTooltip(data, {tooltipHeight: 30, tooltipWidth: 146, x: x, y: y, currency: \"USD\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1268,"value":"---\n## 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":1551,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":950,"value":"$32","pinned":false,"hidden":false,"mode":"html"},{"id":1352,"value":"import {note, details} from \"@observablehq/notes\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1661,"value":"svg","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}