2b:null 2c:["$","title",null,{"children":"IGME-460 Week 13 Day 3: Sparklines | Travis Stodter | Observable"}] 31:T4ea,{ const gmeSparkline = sparkline(gmePrices, {width: 120, height: 25}); const amcSparkline = sparkline(amcPrices, {width: 120, height: 25}); const bbbSparkline = sparkline(bbbPrices, {width: 120, height: 25}); return md` > GameStop (**GME**) ${gmeSparkline} shares surged Monday by as much as 10% in early trading following news that the video game retailer's CEO George Sherman is stepping down by July 31 after just two years on the job. The stock was still up 6.26% as of market close on Monday. > The news also follows moves by investor Keith Gill, who goes by "RoaringKitty" and "DeepF—ingValue" online, in which he exercised 500 call options on GameStop's stock at $12 giving him 50,000 additional shares, according to Bloomberg. > Gill also bought up another 50,000 shares of the company, bringing his total stake to 200,000 shares, or more than $33 million. > GameStop has been the king of the so-called meme stocks including AMC (**AMC**) ${amcSparkline} and Bed Bath & Beyond (**BBBY**) ${bbbSparkline} that took off as retail investors piled into the market amid the pandemic. Members of the Reddit board r/WallStreetBets were particularly heavy investors in GameStop, pushing the stock up more than 3,000% in the last 12 months.` }32:T562,sparkline = (data, {width = 100, height = 20} = {}) => { const xMargin = 30; const yMargin = 6; const xScale = d3.scaleLinear() .domain([0, data.length]) .range([xMargin, width - xMargin]); const yScale = d3.scaleLinear() .domain(d3.extent(data)) .range([height - yMargin, yMargin]); const line = d3.line() .x((_, i) => xScale(i)) .y((d) => yScale(d)); const firstPrice = data[0]; const lastPrice = data[data.length - 1]; return html` `; }33:[] 2f:{"id":"3d2cd501aef347ca","slug":"igme-460-week-13-day-3-sparklines","title":"IGME-460 Week 13 Day 3: Sparklines","thumbnail":"fd8a6b643b803b17f124d34bacf723738fc02b8f3bfd19ab6703444df23a46ae","access_level":"public","create_time":"$D2021-04-21T02:09:42.279Z","update_time":"$D2021-04-21T14:03:07.080Z","view_time":null,"first_public_time":"$D2021-10-06T01:32:14.047Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"825710bbc181247a","login":"tstodter","name":"Travis Stodter","avatar_url":"https://avatars-next.observableusercontent.com/13a6888a44b6a120d03ed3e83f80e89a67369f87bdb0dc4247e2e4082c7086c4","tier":"starter_2024"},"version":168,"publish_version":168,"role":null,"authored":false,"authors":[{"type":"individual","id":"ec330b2e51aa3a97","login":"tstodter","name":"Travis Stodter","avatar_url":"https://avatars-next.observableusercontent.com/13a6888a44b6a120d03ed3e83f80e89a67369f87bdb0dc4247e2e4082c7086c4","tier":null}],"members":[{"type":"individual","id":"fe3c2958bd86f26e","login":"argwood","name":"Arin R. Greenwood","avatar_url":"https://avatars-next.observableusercontent.com/0e7281933924e2f5a67bed997f51ec74290af9419352d285cbce893c25378fd8","tier":null,"role":"editor"},{"type":"individual","id":"ec330b2e51aa3a97","login":"tstodter","name":"Travis Stodter","avatar_url":"https://avatars-next.observableusercontent.com/13a6888a44b6a120d03ed3e83f80e89a67369f87bdb0dc4247e2e4082c7086c4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":6,"collection":{"id":"f8774940ee441908","slug":"igme-460-2021-spring","title":" IGME-460 2021 Spring","owner":{"id":"825710bbc181247a","login":"tstodter","name":"Travis Stodter"}},"type":"notebook","body":{"title":"IGME-460 Week 13 Day 3: Sparklines","cells":[{"id":0,"value":"md`# IGME-460 Week 13 Day 3: Sparklines`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"md`\n_A sparkline is a small intense, simple, word-sized graphic with typographic resolution.\nSparklines mean that graphics are no longer cartoonish special occasions with captions and boxes,\nbut rather sparkline graphics can be everywhere a word or number can be: embedded in a sentence,\ntable, headline, map, spreadsheet, graphic. Data graphics should have the resolution of typography._\n\n> Edward Tufte, Beautiful Evidence, 46-63.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"md`\nSome sparkline (and sparkline-inspired) examples: \n\n- [Covid Cases by State](https://observablehq.com/@mbostock/covid-cases-by-state)\n- [Tiny Charts](https://observablehq.com/@hamzaamjad/tiny-charts)\n- [Sparklines](https://observablehq.com/@maxim-k/sparkline)\n\nAnd some more information from [the man himself](https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=000AIr).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"md`For this notebook to work, you need to have an [Alpha Vantage API key](https://www.alphavantage.co/support/#api-key) stored in an [Observable secret](https://observablehq.com/@observablehq/secrets) in your settings named \\`ALPHA_VANTAGE_API_KEY\\`. \n\nGet one of those keys, store it as a new secret, and fork this notebook. Because Observable secrets only work in private notebooks, make sure your fork is kept private, un-shared, and un-published.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"alphaVantageApiKey = Secret(\"ALPHA_VANTAGE_API_KEY\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"getLastMonthStockPrices = async (symbol) => {\n const response = await fetch(\n `https://www.alphavantage.co/query` + \n `?function=TIME_SERIES_DAILY` +\n `&symbol=${symbol}` + \n `&outputsize=compact` + \n `&apikey=${alphaVantageApiKey}`, \n {\n method: 'GET',\n mode: 'cors',\n credentials: 'same-origin'\n }\n );\n\n // CAUTION: No error handling here\n const json = await response.json();\n \n if (json.Note) {\n throw new Error('API call frequency exceeded, wait up to one minute'); \n }\n \n return Object.entries(json['Time Series (Daily)'])\n .map(([time, prices]) => [new Date(time), prices['4. close']])\n .filter(([time, closingPrice]) => {\n const lastMonth = new Date(\n new Date().getFullYear(),\n new Date().getMonth() - 1, \n new Date().getDate()\n );\n \n return time > lastMonth;\n })\n .sort((first, second) => first[0] - second[0]) // Sort earlier to later\n .map(([time, price]) => parseFloat(price));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"gmePrices = getLastMonthStockPrices('GME')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"amcPrices = getLastMonthStockPrices('AMC')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"bbbPrices = getLastMonthStockPrices('BBBY')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"md`\nThe following text is excerpted from the Yahoo Finance article [\"GameStop shares soar after CEO departure news, 'RoaringKitty' doubles stake\"](https://finance.yahoo.com/news/gamestop-shares-sore-ceo-plans-to-step-down-roaringkitty-doubles-stake-140609509.html) by Daniel Howley, and is used here as a very recent example of the use of ticker symbols in text.\n\nSparklines have been added.\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"md`\n---\n\n### How's the sparkline done?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"md`\n---\n\n## Appendix\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"