25:["$","title",null,{"children":"🏁 Assignment: Upgrade Your Line Chart | berenice | Observable"}] 49:T5b1,howTo(` **The Issue You Will Likely Face**
If you try to access the values of the slider from another cell (e.g., by using 'mySlider[0]' or 'mySlider.value[0]'), it will not show you the latest value of the slider. To get the latest value, you will need to manually run the cell referring to the slider. This is not practical, of course. **The Solution**
To achieve reactive behavior we are used to on Observable (that is, to update all related cells automatically when the slider value changes), you simply need to add the 'viewof' keyword before the variable name of the time range slider. E.g., if your slider's code is 'mySlider = interval(...)', it should turn it into 'viewof mySlider = interval(..)'. The 'viewof' keyword will propagate any changes to the cells referring to the slider, making it reactive. Small annoyance; easy fix. **Why Didn't We Have This Issue During the Class?**
Because we used snippets when we created our dropdowns and sliders. The template codes the snippets had created for us already had the 'viewof' keyword in them. This time, however, you copy-pasted / used someone else's widget, which did not automatically come with the 'viewof' keyword. The 'viewof' trick is not unique to the slider you are importing; use it whenever you see a reactivity issue with a control widget. `, { title: "Hint: To make the slider reactive, you must add the `viewof` keyword before the slider's variable name." })4a:[{"id":"3d831ad228ffcd0b2983efa3f007671146a2df6a5808f404212353a85221f0f0e95333591764fd7f9e0ba30a12fd7d12f989dbc45e61c4be25326ecc0d57a969","href":"https://static.observableusercontent.com/files/3d831ad228ffcd0b2983efa3f007671146a2df6a5808f404212353a85221f0f0e95333591764fd7f9e0ba30a12fd7d12f989dbc45e61c4be25326ecc0d57a969","name":"CleanShot 2023-04-28 at 14.21.12-2x.png","type":"image/png","lastModified":1682693787068.92,"size":187578},{"id":"cef189712671c49bbc6ccd1a072884a7e5a1baf7f45686bf2e917a8ed1a928680cd6aa34b7353f14536799fd4da3b499e8f3f41c8b0057cd5d756ed8752e789d","href":"https://static.observableusercontent.com/files/cef189712671c49bbc6ccd1a072884a7e5a1baf7f45686bf2e917a8ed1a928680cd6aa34b7353f14536799fd4da3b499e8f3f41c8b0057cd5d756ed8752e789d","name":"CleanShot 2023-04-28 at 14.18.38-2x.png","type":"image/png","lastModified":1682693787068.92,"size":296185},{"id":"f630bc0a2a2806b63971053755613a598fea042d95422ee0237d9ba454865cf9e92263f7d65beaee09bae08b05c702660b25cf0e5df24436193c379a2e478ad3","href":"https://static.observableusercontent.com/files/f630bc0a2a2806b63971053755613a598fea042d95422ee0237d9ba454865cf9e92263f7d65beaee09bae08b05c702660b25cf0e5df24436193c379a2e478ad3","name":"CleanShot 2023-04-28 at 14.18.09-2x.png","type":"image/png","lastModified":1682693787068.92,"size":312958},{"id":"52f0daa79c7ce2d2660ac6e97eec99601506cef8f4dfc6dec4d7b9a17725d8ec19743d6ecb367dd0aa2ef03a81699ea06c983cafa49c1151b185827031be20a7","href":"https://static.observableusercontent.com/files/52f0daa79c7ce2d2660ac6e97eec99601506cef8f4dfc6dec4d7b9a17725d8ec19743d6ecb367dd0aa2ef03a81699ea06c983cafa49c1151b185827031be20a7","name":"CleanShot 2023-04-28 at 14.11.06-2x.png","type":"image/png","lastModified":1682693787068.92,"size":318627},{"id":"864657803d002f5de4dc14fd3162f25f89a76f4eaceaba2794911ac223891fa8b17ff24215bc0837b05be484b645e5a924cdd4a024b3ef2a22709788ff457e1f","href":"https://static.observableusercontent.com/files/864657803d002f5de4dc14fd3162f25f89a76f4eaceaba2794911ac223891fa8b17ff24215bc0837b05be484b645e5a924cdd4a024b3ef2a22709788ff457e1f","name":"CleanShot 2023-04-28 at 14.05.44-2x.png","type":"image/png","lastModified":1682693787068.92,"size":30385},{"id":"fd11ab51aa37e816d0a435d74bc4baded5f421114ea9762a437e51a578950c93e7686a5bbcb97f340d585667e111ef3551e327bcea2cff10eff1cbf6a38f0f5d","href":"https://static.observableusercontent.com/files/fd11ab51aa37e816d0a435d74bc4baded5f421114ea9762a437e51a578950c93e7686a5bbcb97f340d585667e111ef3551e327bcea2cff10eff1cbf6a38f0f5d","name":"CleanShot 2023-04-28 at 14.01.20-2x.png","type":"image/png","lastModified":1682693787068.92,"size":135851},{"id":"f601130a40fce75aa876eea08e72496a6c17d5789e5338b06bb079a84f81d2a510d7e08c7eaf58e50b7f25f2bc550d5beca7771d7ccc73fb30de2f9989b35c72","href":"https://static.observableusercontent.com/files/f601130a40fce75aa876eea08e72496a6c17d5789e5338b06bb079a84f81d2a510d7e08c7eaf58e50b7f25f2bc550d5beca7771d7ccc73fb30de2f9989b35c72","name":"CleanShot 2023-04-28 at 13.58.02-2x.png","type":"image/png","lastModified":1682693787068.92,"size":27453},{"id":"838bd5a316efe257027b343b271d843cb6403518f04be2b6e1dec9c3aa383623b5c264b35587bc802fa4952b0beb300e4b87bcbe0cf6fe965737c21447dc5ad5","href":"https://static.observableusercontent.com/files/838bd5a316efe257027b343b271d843cb6403518f04be2b6e1dec9c3aa383623b5c264b35587bc802fa4952b0beb300e4b87bcbe0cf6fe965737c21447dc5ad5","name":"CleanShot 2023-04-28 at 13.56.32-2x.png","type":"image/png","lastModified":1682693787068.92,"size":17424},{"id":"712255e355270c7588aa83ff215abe7010370636eb1de3a4ef4379386907f511004e11ff177a78404fa58af87135a992af4564b1ad42446b1a9a5fb9e3c950e3","href":"https://static.observableusercontent.com/files/712255e355270c7588aa83ff215abe7010370636eb1de3a4ef4379386907f511004e11ff177a78404fa58af87135a992af4564b1ad42446b1a9a5fb9e3c950e3","name":"CleanShot 2023-04-28 at 13.55.59-2x.png","type":"image/png","lastModified":1682693787068.92,"size":15654},{"id":"dd2c74647f8727714c07e8f0edb3ad1029811a1a49a76ad389e61deb609e52ecf0586bae0c2634ae0ef5594c9eb966f963004eedea1d8bc570c0f83b07410b23","href":"https://static.observableusercontent.com/files/dd2c74647f8727714c07e8f0edb3ad1029811a1a49a76ad389e61deb609e52ecf0586bae0c2634ae0ef5594c9eb966f963004eedea1d8bc570c0f83b07410b23","name":"CleanShot 2023-04-28 at 13.54.41-2x.png","type":"image/png","lastModified":1682693787068.92,"size":9542},{"id":"6ae1dc6831513bc94b3ae2c56dbb3637b85aa23475cadef12018ee745b8c58441fb611e72d997c0db5c20e355ec3ceeb0b03ab8801fbe1cc752289ed29e14882","href":"https://static.observableusercontent.com/files/6ae1dc6831513bc94b3ae2c56dbb3637b85aa23475cadef12018ee745b8c58441fb611e72d997c0db5c20e355ec3ceeb0b03ab8801fbe1cc752289ed29e14882","name":"CleanShot 2023-04-28 at 13.50.23-2x.png","type":"image/png","lastModified":1682693787068.92,"size":11098},{"id":"077764d0dd247cef5f3efbbc3cfb177baca00742cfd7506303723c9d02e82b7a9865d97e3fb24e8b100a392003738b038e34bf2c319b8b9860f07a5646a0995d","href":"https://static.observableusercontent.com/files/077764d0dd247cef5f3efbbc3cfb177baca00742cfd7506303723c9d02e82b7a9865d97e3fb24e8b100a392003738b038e34bf2c319b8b9860f07a5646a0995d","name":"CleanShot 2023-04-28 at 13.54.08-2x.png","type":"image/png","lastModified":1682693787068.92,"size":10318},{"id":"d5f565910119b806c88feca3839b2f71e80c1a66159fb91c637ed9b2dfb2fece9440d4387b4293c0f3da910ce6dcee8671a69a2bf65d5337e2d881779e5739c9","href":"https://static.observableusercontent.com/files/d5f565910119b806c88feca3839b2f71e80c1a66159fb91c637ed9b2dfb2fece9440d4387b4293c0f3da910ce6dcee8671a69a2bf65d5337e2d881779e5739c9","name":"CleanShot 2023-04-28 at 13.52.28-2x.png","type":"image/png","lastModified":1682693787068.92,"size":10978}] 29:{"id":"cca4a285f815697c","slug":null,"title":"🏁 Assignment: Upgrade Your Line Chart","thumbnail":"a2fe62f31f19370fb9e42ce7c4c00e3b6a7cba14812bc41f1c5cf02d232180c5","access_level":"public","create_time":"$D2023-04-28T14:56:27.068Z","update_time":"$D2023-04-30T09:45:56.321Z","view_time":null,"first_public_time":"$D2023-04-28T14:56:27.068Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a0e452ead1d939ca","login":"berenicej","name":"berenice","avatar_url":"https://avatars-next.observableusercontent.com/b327755b0108ca26bfd09be3f835d1d36d203720aba6ad569e40f5defe809f90","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":442,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"76b2824cdc4c9625","login":"berenice","name":"berenice jedersberger","avatar_url":"https://avatars-next.observableusercontent.com/1d6f3e2d02846d28c2985f6c248a9083535af1f4d37ab04ecc30bbe58ff5aaf3","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"76b2824cdc4c9625","login":"berenice","name":"berenice jedersberger","avatar_url":"https://avatars-next.observableusercontent.com/1d6f3e2d02846d28c2985f6c248a9083535af1f4d37ab04ecc30bbe58ff5aaf3","tier":null,"role":"editor"},{"type":"team","id":"a0e452ead1d939ca","login":"berenicej","name":"berenice","avatar_url":"https://avatars-next.observableusercontent.com/b327755b0108ca26bfd09be3f835d1d36d203720aba6ad569e40f5defe809f90","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"5abb8153609537cc","slug":"worksheets-learn-plot-berenice-jedersberger","title":"Worksheets: Learn Plot - Bérénice Jedersberger","owner":{"id":"a0e452ead1d939ca","login":"berenicej","name":"berenice"}},"type":"notebook","body":{"titling":"auto","title":"🏁 Assignment: Upgrade Your Line Chart","cells":[{"id":0,"value":"# 🏁 Assignment: Upgrade Your Line Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"## Import Your Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"Import your standardized data from your line chart notebook:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"import {data_standardized} from \"0f323afc5c8f1ff8\"\n\n// import {data_standardized} from ...","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"## Create a Range Slider","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"_See [Inputs](https://observablehq.com/@observablehq/inputs) and [Range Slider API](https://observablehq.com/@mootari/range-slider#test) on Observable._
\n_Optional: Also see [Data Driven Range Sliders](https://observablehq.com/@bumbeishvili/data-driven-range-sliders) on Observable._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"Make a new slider, but this time create it using the '`interval`' method from the [Range Slider notebook](https://observablehq.com/@mootari/range-slider#test) on Observable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"Start by importing the '`interval`' function from the [Range Slider notebook](https://observablehq.com/@mootari/range-slider#test):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"import {interval} from '@mootari/range-slider@1786'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"Create and configure the slider as follows: \n- Minimum possible value: 1985\n- Maximum possible value: 2023\n- Starting values: 2007-2017 (this range must be preselected on the slider, even after the page is reloaded.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"showMe(\n`\n// Get the earliest date in a dataset and assign it to a variable:\nearliestYearInData = d3.min(myData, d => d[\"Date\"])\n\n// Do the same for the latest date:\nlatestYearInData = d3.max(myData, d => d[\"Date\"])\n`,{dependencies:{d3}, label: 'Optional: Calculate minimum and maximum slider values automatically from your data', evaluate: false} \n \n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"// Get the earliest date in a dataset and assign it to a variable:\nearliestYearInData = d3.min(data_standardized, d => d[\"Date\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"// Do the same for the latest date:\nlatestYearInData = d3.max(data_standardized, d => d[\"Date\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"cleanshot20230428At1350232x = FileAttachment(\"CleanShot 2023-04-28 at 13.50.23-2x.png\").image({width: 350})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"viewof time_range_slider = interval([1985, 2023], {\n step: 1,\n value: [2007, 2017],\n label: 'Time Range'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"View the slider's current values (try playing with the slider to see if these values update correctly):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"cleanshot20230428At1352282x = FileAttachment(\"CleanShot 2023-04-28 at 13.52.28-2x.png\").image({width: 190})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"time_range_slider","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"Assign individual slider values to their own variables:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"howTo(`\nAfter adding the 'viewof' keyword, you can access the slider's values simply by referring to it by its name in another cell (e.g., 'mySlider'). To access individual values, you can use indexing. For example: if your slider's name is 'mySlider', you can access its individual values using the expressions 'mySlider[0]' and 'mySlider[1]'.\n`, {\n title: \"How do I access the values of the slider?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"cleanshot20230428At1354082x = FileAttachment(\"CleanShot 2023-04-28 at 13.54.08-2x.png\").image({width: 220})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"earliestYear_slider = time_range_slider[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"cleanshot20230428At1354412x = FileAttachment(\"CleanShot 2023-04-28 at 13.54.41-2x.png\").image({width: 205})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"latestYear_slider = time_range_slider[1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"Transform slider values to time:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":193,"value":"*See [Date getTime()](https://www.w3schools.com/jsref/jsref_gettime.asp) in [JavaScript Date Reference](https://www.w3schools.com/JSREF/jsref_obj_date.asp) on W3 Schools.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":195,"value":"cleanshot20230428At1355592x = FileAttachment(\"CleanShot 2023-04-28 at 13.55.59-2x.png\").image({width: 350})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"earliestYear_slider_asTime = new Date(earliestYear_slider, 1).getTime()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"cleanshot20230428At1356322x = FileAttachment(\"CleanShot 2023-04-28 at 13.56.32-2x.png\").image({width: 340})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"latestYear_slider_asTime = new Date(latestYear_slider, 1).getTime()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"## Filter Your Data According to Slider Values","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":219,"value":"_**Hint**: See your line chart notebook to see how we achieved this in the class._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":210,"value":"cleanshot20230428At1358022x = FileAttachment(\"CleanShot 2023-04-28 at 13.58.02-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"// filter out the relevant time range covered by the slider, i.e. years larger than earliest year and years smaller than latest year\ndata_standardized_filtered = aq.from(data_standardized)\n .filter(aq.escape(d => d[\"Date\"] > earliestYear_slider_asTime && d[\"Date\"] < latestYear_slider_asTime)) // use && to bear for the double conditional\n .objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"_**Hint**: Test if your data is being filtered correctly by playing with the slider. Feel free to move the slider cell here, and keep moving it down to further cells as necessary while you progress through the assignment. I won't penalize it if the slider is not on the top of the notebook._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":227,"value":"## Visualize Your Data Based on the Selected Range","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"Use the dataset (which should now be filtered according to slider values) in your visualization:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":229,"value":"cleanshot20230428At1401202x = FileAttachment(\"CleanShot 2023-04-28 at 14.01.20-2x.png\").image({width: 600})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"

${viewof time_range_slider}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":366,"value":"Plot.plot({\n grid: true,\n y: {\n label: \"↑ Z-Score\",\n nice: true\n },\n marks: [\n Plot.lineY(data_standardized_filtered, {\n x: \"Date\", \n y: \"CloseStandardized\", \n stroke: \"salmon\"\n }),\n Plot.lineY(data_standardized_filtered, {\n x: \"Date\", \n y: \"VolumeStandardized\", \n stroke: \"dodgerblue\",\n curve: \"step\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"_ 👆 Move your slider on the top/bottom of your visualization and play with it for testing. The plot should update as you change the slider's values. You probably also want to 'unpin' the code underneath the slider, so that the slider looks simply like an interface element._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":238,"value":"**Note**: Some of the template images will have the slider on top of them. This does not mean you are expected to create a new slider for each chart of this notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":241,"value":"\n## Make Tooltips Appear on Dots Instead of Lines","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"Showing tooltips per line segment does not offer precise lookup of values. For instance, it is not clear here whether the value in the tooltip belongs to the top of the highlighted line segment or to the bottom of it:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":245,"value":"cleanshot20230428At1405442x = FileAttachment(\"CleanShot 2023-04-28 at 14.05.44-2x.png\").image({width: 300, style:\"border:none\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"### Add a Dot Mark to Your Plot and Move the Tooltips Into It","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":255,"value":"Tooltips should appear when hovering over dots, not line segments. To achieve this, please add dot marks on top of the line marks, and move your tooltip code (i.e., `title` property) into the dot marks. You can go back to your Scatterplot worksheet if you need to recall how to work with the dot mark.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"Start with importing the tooltip library:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":259,"value":"// Uncomment to activate\n\nimport {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"Move the tooltips into dot marks:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":264,"value":"cleanshot20230428At1411062x = FileAttachment(\"CleanShot 2023-04-28 at 14.11.06-2x.png\").image({width:600})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"Plot.plot({\n grid: true,\n y: {\n label: \"↑ Z-Score\",\n nice: true\n },\n\n marks: [\n \n // Close Graph & Dot labels\n Plot.lineY(data_standardized_filtered, {\n x: \"Date\", \n y: \"CloseStandardized\", \n stroke: \"salmon\"\n }),\n Plot.dot(data_standardized_filtered,{\n x: \"Date\",\n y: \"CloseStandardized\",\n r: 1.5,\n fill: \"salmon\",\n title: \"Close\"\n }),\n\n // Volume Graph & Dot labels\n Plot.lineY(data_standardized_filtered, {\n x: \"Date\", \n y: \"VolumeStandardized\", \n stroke: \"dodgerblue\",\n curve: \"step\"\n }),\n Plot.dot(data_standardized_filtered,{\n x: \"Date\",\n y: \"VolumeStandardized\",\n r: 1.5,\n fill: \"dodgerblue\",\n title: d => d3.format (\".4s\") (d[\"Volume\"])\n }),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"### Optional: Make Your Dots Invisible","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":269,"value":"Depending on your dot size, dots may look your chart look ugly. If you think you could benefit from making the dots invisible, feel free to do so by setting their '`opacity`' to 0:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"cleanshot20230428At1418382x = FileAttachment(\"CleanShot 2023-04-28 at 14.18.38-2x.png\").image({width: 600})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"Plot.plot({\n grid: true,\n y: {\n label: \"↑ Z-Score\",\n nice: true\n },\n\n marks: [\n \n // Close Graph & Dot labels\n Plot.lineY(data_standardized_filtered, {\n x: \"Date\", \n y: \"CloseStandardized\", \n stroke: \"salmon\"\n }),\n Plot.dot(data_standardized_filtered,{\n x: \"Date\",\n y: \"CloseStandardized\",\n r: 2,\n fill: \"salmon\",\n opacity: 0,\n title: \"Close\"\n }),\n\n // Volume Graph & Dot labels\n Plot.lineY(data_standardized_filtered, {\n x: \"Date\", \n y: \"VolumeStandardized\", \n stroke: \"dodgerblue\",\n curve: \"step\"\n }),\n Plot.dot(data_standardized_filtered,{\n x: \"Date\",\n y: \"VolumeStandardized\",\n r: 2,\n fill: \"dodgerblue\",\n opacity: 0,\n title: d => d3.format (\".4s\") (d[\"Volume\"])\n }),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"*👆 If the tooltips do not appear easily when you hover your mouse over the (visible/invisible) dots, you might want to make the dots larger. Not too large, though: a dot too large could prevent hovering over its neighbors.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"## Fix the Units in Tooltips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"For volume the numbers in the tooltips appear with a 'G' unit, [an abbreviation of Giga](https://en.wikipedia.org/wiki/International_System_of_Units), which stands for 1 billion units. Make the volume tooltip show the word 'Billion USD' instead of 'G'. Also add the 'USD' after the numbers in the 'close' line:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":287,"value":"showMe(\n`\nPlot.plot({\n\n marks: [\n \n Plot.lineY(data_standardized_filtered, {\n x: \"Date\",\n y: \"Volume\",\n // This is how:\n title: d => (d[\"Volume\"] / 1_000_000_000).toFixed(1) + \" Billion USD\"\n // 👆 toFixed transforms a number to a string. The argument '1' tells it to produce a string with only one decimal. If you want more decimals, you can change it to another value.\n \n })\n ]\n})\n\n\n`,{dependencies:{}, label: 'How to add a custom unit text in tooltips?', evaluate: false} \n \n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"cleanshot20230428At1418092x = FileAttachment(\"CleanShot 2023-04-28 at 14.18.09-2x.png\").image({width: 600})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"Plot.plot({\n grid: true,\n y: {\n label: \"↑ Z-Score\",\n nice: true\n },\n\n marks: [\n\n // Close Graph & Dot labels\n Plot.lineY(data_standardized_filtered, {\n x: \"Date\", \n y: \"CloseStandardized\", \n stroke: \"salmon\"\n }),\n Plot.dot(data_standardized_filtered,{\n x: \"Date\",\n y: \"CloseStandardized\",\n r: 2,\n fill: \"salmon\",\n opacity: 0,\n title: d => (d[\"Close\"]).toFixed(1) + \" USD\"\n }),\n\n // Volume Graph & Dot labels\n Plot.lineY(data_standardized_filtered, {\n x: \"Date\", \n y: \"VolumeStandardized\", \n stroke: \"dodgerblue\",\n curve: \"step\"\n }),\n Plot.dot(data_standardized_filtered,{\n x: \"Date\",\n y: \"VolumeStandardized\",\n r: 2,\n fill: \"dodgerblue\",\n opacity: 0,\n title: d => (d[\"Volume\"] / 1_000_000_000).toFixed(1) + \" Billion USD\"\n }),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"## Move the `Volume` Line to a Smaller Chart Under the Main One","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":294,"value":"While useful, Z-Scores are not easily interpretable by a lay audience. Please move the 'close price' and the 'volume' lines into their own panels. \n\nAfter you do so, you can go back to using their original units: 'Close' instead of 'CloseStandardized', and 'Volume' instead of 'VolumeStandardized'.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":296,"value":"FileAttachment(\"CleanShot 2023-04-28 at 14.21.12-2x.png\").image({width:600})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"

${viewof time_range_slider}