25:["$","title",null,{"children":"HW4 - Dashboards and Interaction | Gabriela Gamez | Observable"}] 49:T839,data_section = md`

## Data Record from [U.S. BUREAU OF LABOR STATISTICS](https://data.bls.gov/timeseries/CUUR0000SA0L1E?output_view=pct_12mths) indicated the U.S. economy has fluctuated. Comparing the Inflation rate and consumer prices for the United States from 2012 (1.9 % rate )to 2022 (5.7 %rate ), we can see an increase of 3.8 %. This instability has made me worry and has motivated me to make data-driven investment decision. The data was obtained from [ National Association of Securities Dealers Automated Quotations (NASDAQ)](https://www.nasdaq.com/market-activity/quotes/historical), [Federal Reserve Economic Data (FRED)](https://fredhelp.stlouisfed.org/fred/about/about-fred/what-is-fred/) and [Yahoo Finance](https://finance.yahoo.com). [NASDAQ](https://www.nasdaq.com/market-activity/quotes/historical), a webpage site that contains stock historical information about Nasdaq investement. [FRED](https://fredhelp.stlouisfed.org/fred/about/about-fred/what-is-fred/), a government site that contains economic data time series related to national, international, public, and private sources. [Yahoo Finance](https://finance.yahoo.com) is a streaming platform that provides financial information and stock quotes. I download the stock data from well-known companies ( [Apple](https://finance.yahoo.com/quote/AAPL?p=AAPL), [Amazon](https://finance.yahoo.com/quote/AMZN?p=AMZN), [Cisco](https://finance.yahoo.com/quote/CSCO?p=CSCO), [Home Depot](https://finance.yahoo.com/quote/HD?p=HD), [Tesla](https://finance.yahoo.com/quote/TSLA?p=TSLA), [Walmart](https://finance.yahoo.com/quote/WMT?p=WMT), [Walt Disney](https://finance.yahoo.com/quote/DIS?p=DIS), etc.) and merge them using excel. This data selected is to familiarize me with the stock market since I am planning to build either investment or Dividend Portfolio for my semester project. The investment portfolio tracks investments in Stocks, Real Estate, Cash, and others. The Dividend Portfolio mainly focuses on monitoring investments and Stock dividends. The dividend is the money that companies give to the shareholders. `4a:T793,### Terminology - [Open](https://www.nerdwallet.com/article/investing/how-to-interpret-stock-charts-and-data) - The first price of the stock when the market opens. - [Close](https://www.nerdwallet.com/article/investing/how-to-interpret-stock-charts-and-data)- The price at the end of the day when the market closes. - [High](https://www.nerdwallet.com/article/investing/how-to-interpret-stock-charts-and-data)- The highest prices the stock reaches during the open market. - [Low](https://www.nerdwallet.com/article/investing/how-to-interpret-stock-charts-and-data) - The lowest prices the stock reaches during the open market. - [Volume]( https://www.fidelity.com/viewpoints/active-investor/stock-volume#:~:text=Volume%20is%20simply%20the%20number,million%20shares%20traded%20per%20day) - The number of shares traded in for a particular stock. - [Symbol](https://www.wallstreetmojo.com/stock-symbol/#:~:text=A%20stock%20symbol%20is%20an,stock%20from%20the%20other%20securities) - An abbreviation that refers to a company’s share. - [Sector](https://www.nerdwallet.com/article/investing/types-of-stocks#:~:text=Two%20major%20types%20of%20stocks,sector%2C%20location%20or%20investment%20style.) - It is the classification the stock receives based on the company's central purpose. For example, Apple is classified as the Technology sector because they sell electronics primarily. - [Type](https://www.investopedia.com/types-of-stocks-5215684) - They are different types of stocks; Blue chips, Growth stocks, ETFs, etc. This data contains these three types. Blue chip stocks are stocks from a company that is well established and has generated a significant profit for its stockholders. Growth stocks are stocks from a new company that is not well established or doesn't generate a substantial profit for its stockholders. [ETFs (exchanged traded funds)](https://www.investopedia.com/terms/e/etf.asp) aim to sell or purchase stocks.4b:T623,vegalite = md`

## Part 1 - Vega-Lite Dashboard For the Vega-Lite Dashboard, I follow the example [CS725, Vega-Lite Dashboard with Brushing and Linking](https://observablehq.com/@weiglemc/cs725-vega-lite-dashboard-with-brushing-and-linking?collection=@weiglemc/cs-725-825-spring-2023) and [Interaction](https://observablehq.com/@uwdata/interaction). I first began by filtering all stock within the technology sector since the heavy clustering makes it hard to distinguish the value for each company. The filter allows comparison between the technology stock's Number of Shares Traded and the closing price that were traded. I create two charts (scatterplot and histogram), then concatenate horizontally using \`vl.hconcat\`. I create a brushing and linking using \`vl.selectInterval()\` based on the selection of month and year (x-axis) values. To grey out the none selected values (months), I am combining a histogram with a layer chart that will turn all grey when selected and layer selected values on top in default blue. For the Scatterplot, use an \`if-condition\` that when the brush is being used, it will adjust the scatter plot opacity from light \`0.05\` to dark \`0.75\`. Aside from the brush interactivity, I am also using [CSE 412 Section 4: Interactive Vega-Lite as a reference](https://observablehq.com/@cse412/cse-412-section-4-interactive-vega-lite) for \`vl.selectInterval().bind('scales')\`, a line of code that allows the user to drag and zoom; this help with the distinction of the point that is located within heavy cluster areas. `4c:T665,{ const brush = vl.selectInterval() .encodings('x'); // limit selection to x-axis (month) values // dynamic query histogram const months = vl.markBar({width: 15}) .data(data_sector) .encode( vl.x().fieldT("Date").timeUnit("year,month").title('Date'), vl.y().count().title(null) ) // combined histogram with total in grey and selected in blue (when selected) const hist_layer = vl.layer( months.select(brush).encode(vl.color().value('lightgrey')), // turn all grey when selected months.transform(vl.filter(brush))) // layer selected values on top in default blue .width(200) .height(50); // scatter plot const appleData = vl.markCircle({filled: true,opacity: 0.6,tooltip: true}) .data(data_sector) .params( vl.selectInterval().bind('scales') // referance: https://observablehq.com/@cse412/cse-412-section-4-interactive-vega-lite ) .encode( vl.y().fieldQ('Volume').title('Number of Shares Traded'),//y-axis number of shares traded vl.x().fieldQ('Close').title('Close Price ($)'),//x-axis is the closing price for share vl.color().fieldN('Company'), // color sheme based on Company Name vl.tooltip(['Sector','Symbol','Company','Close']),// tooltip information display when havor vl.opacity().if(brush, vl.value(0.75)).value(0.05)//when the brush is being used, //it will adjust the scatter plot opacity from light 0.05 to dark 0.75. ) .width(600) .height(400); return vl.hconcat(hist_layer, appleData).spacing(5).render(); }4d:T6c0,To create the scatterplot using D3, start with the basic creation of the outer svg container using `d3.create('svg')` and define the size svg based on the variable margin and the visHeight and visWidth. Then I set the scale x-axis and y-axis using the `d3.scaleLinear()` and defined the domain regarding the column close and volume from the data. `svg.append("g")` set up an interior container containing all the svg groups for the chart. Within the `g container`, I add the configured the x-axis and y-axis label. The configuration says where to draw the axis when called: `xAxis = d3.axisBottom(x)` and `yAxis = d3.axisLeft(y)`. These configurations contain the axis format like font size, padding, color, and axis title. To create the dot for each element within scatterplot `g.append('g').selectAll("circle")`, I indicated the location of the data `.data(data_Apple)` and `.join("circle")` add a new svg circle for each data point. `cy` and `cy` define the position on where to draw the circle while `r` describe how big each circle will be. `svg.node()` draw all elements. After drawing the scatterplot, I add the tooltip. First, define the tooltip's characteristic using this example's [Animated Bar Chart with Tooltip D3 6.0](https://observablehq.com/@mbrownshoes/animated-bar-chart-with-tooltip-d3-6-0). Then attach the tooltip to each circle drawn and describe the behavior of the interaction. When the mouse is over the circle, this will display the company information and the coordinates of the tooltip. `d3.select(this).transition()` changes the element's color when hover-over. `.style('visibility', 'visible')` this makes the tooltip visible `.style('visibility', 'hidden')` this makes the tooltip invisible4e:Tc78,//Reference https://observablehq.com/@weiglemc/cs725-d3-intro-scatterplot //https://observablehq.com/@mbrownshoes/animated-bar-chart-with-tooltip-d3-6-0 { //variable defenition const visWidth = 600 const visHeight = 400 const hoverColor = '#eec42d'; const margin = ({top: 20, bottom: 50, left: 200, right: 120}) // set up outer svg container const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); // set up scales const x = d3.scaleLinear() //.domain(d3.extent(Databse name, d => d.quatitive value)).nice() .domain(d3.extent(data_Apple, d => d.Close)).nice() .range([0, visWidth]); const y = d3.scaleLinear() //.domain(d3.extent(Databse name, d => d.quatitive value)).nice() .domain(d3.extent(data_Apple, d => d.Volume)).nice() .range([visHeight, 0]); // set up svg group for chart const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); ///create a tooltip SVG text element const tooltip = d3 .select('body') .append('div') .attr('class', 'd3-tooltip') .style('position', 'absolute') .style('visibility', 'hidden') .style('background', 'rgba(0,0,0,0.6)') .style('color', '#fff') .text('a simple tooltip'); // set up axes const xAxis = d3.axisBottom(x); const yAxis = d3.axisLeft(y); // configure x-axis and label g.append('g') .attr('transform', `translate(0, ${visHeight})`) .call(xAxis) .append("text") .attr("x", visWidth / 2) .attr("y", 40) .attr("fill", "black") .attr('font-weight', 'bold') .attr("text-anchor", "middle") .text("Close Price ($)"); // configure y-axis and label g.append("g") .call(yAxis) .append("text") .attr("x", -60) .attr("y", visHeight/2) .attr('font-weight', 'bold') .attr("fill", "black") .attr("dominant-baseline", "middle") .text("Number of Shares Traded"); // draw mark for each element in data g.append('g').selectAll("circle") //Databse name .data(data_Apple) .join("circle") ///d.quatitive value .attr("cx", d => x(d.Close)) //d.quatitive value .attr("cy", d => y(d.Volume)) .attr('fill', 'steelblue') .attr("r", 3) // Change the contents and position of the tooltip .on('mouseover', function (event,d, i) { tooltip .html( `

Company: ${d.Company}

Number of Shares Traded: ${d.Volume}

Close Price: ${d.Close}

Company: ${d.Company}

Close Price: ${d.Close}

` ) .style('visibility', 'visible'); d3.select(this).transition().attr('fill',hoverColor); }) .on('mousemove', function (event) { tooltip .style('top', event.pageY - 10 + 'px') .style('left', event.pageX + 10 + 'px'); }) .on('mouseout', function (event) { tooltip.html(``).style('visibility', 'hidden'); d3.select(this).transition().attr('fill', 'steelblue'); }); return svg.node(); }50:Tf07,{ //variable defenition const visWidth = 900 const visHeight = 420 const margin = ({top: 20, bottom: 50, left: 90, right: 60}) const selection = filtered_2.filter(aq.escape(d => ComanyName.has(d.Company))); // set up outer svg container const svg = d3.create('svg') .attr('width', 1000) .attr('height', 500); // set up svg group for chart const g = svg.append("g") .attr('transform', `translate(${margin.left}, ${margin.top})`); // set up scales const x = d3.scaleTime() // .domain(d3.extent(domains.x)) .domain(d3.extent(selection, d => d.date))//.nice() .range([0, visWidth]); const y = d3.scaleLinear() //.domain(domains.y).nice() .domain(d3.extent(selection, d => d.close)).nice() .range([visHeight, 0]); const color = d3.scaleOrdinal() .domain(ComanyName) .range(d3.schemeTableau10); // set up path generator const line = d3.line() .x(d => x(d.date)) .y(d => y(d.close)); // set up axes const xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat('%m/%Y')); const yAxis = d3.axisLeft(y); // create tooltip // Reference: https://observablehq.com/@nyuvis/interaction const tooltip = g.append("g") .attr('visibility', 'hidden'); // add a rectangle to the tooltip to serve as a background const tooltipRect = tooltip.append('rect') .attr('fill', 'black') .attr('rx', 5) .attr('height', 16); // define the tooltip text const tooltipText = tooltip.append('text') .attr('fill', 'white') .attr('font-family', 'sans-serif') .attr('font-size', 12) .attr('y', 4) // offset it from the edge of the rectangle .attr('x', 3) // offset it from the edge of the rectangle .attr('dominant-baseline', 'hanging') // configure x-axis and label g.append('g') .attr('transform', `translate(0, ${visHeight})`) .call(xAxis); // configure y-axis and label g.append('g') .call(yAxis) .call(g => g.selectAll('.domain')) .append('text') .attr('fill', 'black') .attr('text-anchor', 'start') .attr('dominant-baseline', 'hanging') .attr('font-weight', 'bold') .attr('y', -margin.top + 5) .attr('x', -margin.left ) .text('Close price $'); // draw mark for each element in data g.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .selectAll("path") .data(companyData) .join("path") .attr("d", d => line(d.values)) .attr('stroke', d => color(d.Company)) .on('mouseover', function (event,d) { tooltip.attr('visibility', 'visible'); /// when move the mouseover show the tooltip }) .on('mousemove', function (event,d) { //move the tooltip to the position of line const ypositon = d3.pointer(event, g.node())[1] const xpositon = d3.pointer(event, g.node())[0] // The tooltip text displays the company name and close price value // y.invert(ypositon) - To display the close price, I need to invert the y-axis value based on the mouse position on the line. // toFixed(2) - I rounded the money value to the nearest hundreds. tooltipText.text ( d.Company + ' $ ' + (ypositon).toFixed(2)); // update the label's text and get its width const labelWidth = tooltipText.node().getComputedTextLength(); tooltipRect.attr('width', labelWidth + 6); tooltip.attr('transform', `translate(${xpositon},${ypositon})`)//diplay the tooltip base on the position of the mouse .attr('visibility', 'visible'); }) .on('mouseout', function (event,d) { tooltip.attr('visibility', 'hidden'); /// when move the mouseout hide the tooltip }); return svg.node(); }51:T740,* [CS725, Interaction in Vega-Lite](https://observablehq.com/@weiglemc/cs725-interaction-in-vega-lite) * [CS725, D3 Intro - Bar Chart](https://observablehq.com/@weiglemc/cs725-d3-intro-bar-chart) * [CS725, D3 Intro - Scatterplot](https://observablehq.com/@weiglemc/cs725-d3-intro-scatterplot) * [CS725, D3 Intro - Line and Area Charts](https://observablehq.com/@weiglemc/cs725-d3-intro-line-and-area-charts) * [CS725, D3 Intro - Layered Line and Area Charts](https://observablehq.com/@weiglemc/cs725-d3-intro-layered-line-and-area-charts) * [CS725, Multi-Line Chart Arquero Data Setup](https://observablehq.com/@weiglemc/cs725-multi-line-chart-arquero-data-setup) * [CS725, Vega-Lite Dashboard with Brushing and Linking](https://observablehq.com/@weiglemc/cs725-vega-lite-dashboard-with-brushing-and-linking?collection=@weiglemc/cs-725-825-spring-2023) * [Dashboard with Brushing and Linking Example in Vega-Lite](https://observablehq.com/@weiglemc/brushing-and-linking-example-with-vega-lite) * [Learn D3: Interaction](https://observablehq.com/@d3/learn-d3-interaction) * [Multi-Line Chart Focus + Context w/ Mouseover Tooltip](https://observablehq.com/@brianjlee11/multi-line-chart-focus-context-w-mouseover-tooltip) * [Animated Bar Chart with Tooltip D3 6.0](https://observablehq.com/@mbrownshoes/animated-bar-chart-with-tooltip-d3-6-0) * [Interaction](https://observablehq.com/@nyuvis/interaction) * [d3 v6 pointer function not adjusting for scale and translate](https://stackoverflow.com/questions/64189608/d3-v6-pointer-function-not-adjusting-for-scale-and-translate) * [U.S. BUREAU OF LABOR STATISTICS](https://data.bls.gov/timeseries/CUUR0000SA0L1E?output_view=pct_12mths) * [Yahoo! finance](https://finance.yahoo.com) * [HW1 - Vega-Lite](https://observablehq.com/d/1a8c01149a686720) * [HW3 - D3 Intro](https://observablehq.com/d/5e55e7e98ccf1200)52:[{"id":"09aea778852d1616cde93ed555623436ad00a8c4d5ff27bfa9a3f2267a6ad55d449846a04fcde29cd86728b1f52194f46550c1a02f0c07ab6ae7b181692f489e","href":"https://static.observableusercontent.com/files/09aea778852d1616cde93ed555623436ad00a8c4d5ff27bfa9a3f2267a6ad55d449846a04fcde29cd86728b1f52194f46550c1a02f0c07ab6ae7b181692f489e","name":"Stocks-historical-data-more-info.csv","type":"text/csv","lastModified":1678828237772.691,"size":344536}] 29:{"id":"079a5ebd89de81a2","slug":null,"title":"HW4 - Dashboards and Interaction","thumbnail":"abc097abc25f1751ec1f86ac653466b5764f23302f7343312b5868b5c9334f84","access_level":"public","create_time":"$D2023-03-14T20:53:45.947Z","update_time":"$D2023-03-20T13:40:42.926Z","view_time":null,"first_public_time":"$D2023-03-14T20:53:45.947Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8a4b0b01f276585e","login":"csggame001","name":"Gabriela Gamez","avatar_url":"https://avatars-next.observableusercontent.com/5e7ee8e08bffcdd5a7536f27651dbf684eb03e47ed2daca4018ff56055197b99","tier":"starter_2024","bio":"","following":false},"version":682,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"435839829bcad1f9","login":"csggame001","name":"Gabriela Gamez","avatar_url":"https://avatars-next.observableusercontent.com/5e7ee8e08bffcdd5a7536f27651dbf684eb03e47ed2daca4018ff56055197b99","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"435839829bcad1f9","login":"csggame001","name":"Gabriela Gamez","avatar_url":"https://avatars-next.observableusercontent.com/5e7ee8e08bffcdd5a7536f27651dbf684eb03e47ed2daca4018ff56055197b99","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"HW4 - Dashboards and Interaction","cells":[{"id":0,"value":"# HW4 - Dashboards and Interaction\n\nGabriela Gamez\nCS 725/825, Spring 2023 \nDue: March 20, 2023","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"## Table of Contents\n\n- [_Data_](#data_section)\n- [_Part 1 - Vega-Lite Dashboard_](#vegalite)\n- [_Part 2 - D3 Interactions_](#d3_d)\n - [_Scatterplot Chart_](#scatterplot)\n - [_Horizontal Bar Chart_](#horizontal_bar)\n - [_Multi Line Chart_](#multi_line)\n- [_Reference_](#reference)\n- [_Appendix_](#appendix)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":555,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"Yahoo_Stockdata = FileAttachment(\"Stocks-historical-data-more-info.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"viewof yahoo_data = aq.from(Yahoo_Stockdata).view({height:150})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"viewof data_sector = yahoo_data.filter(d=> d.Sector==\"Technology\").view({height:150})//filtering all stock within the technology sector","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"### The Technology Sector Stocks Trading is Not Affected by Price.\n###### Data Source: https://finance.yahoo.com","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":399,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"d3_d = md`\n

\n## Part 2 - D3 Interactions\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"scatterplot = md`\n

\n## Scatterplot Chart\nA scatterplot chart is used to find a correlation, trends, and outliers within data. It is encoded using two quantitative value attributes along the horizontal and vertical spatial position. It uses point marks for expressing values, and the graph below fulfills this requirement. The horizontal spatial position describes the closing prices for the Apple share from February 22, 2022 to February 17, 2023. The vertical spatial position signifies the Number of Shares Traded traded-in for Apple throughout this timeline as well. \n\nFor the scatterplot, I decided to filter data based on the Symbol AAPL since the heavy clustering makes it hard to distinguish the value for each company. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"viewof data_Apple = yahoo_data.filter(d=> d.Symbol==\"AAPL\").view({height:150}) // filter based on Apple's Symbol","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":679,"value":"### Apple, Inc. Stocks Trading is Not Affected by Price.\n###### Data Source: https://finance.yahoo.com","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"horizontal_bar = md`\n

\n## Horizontal Bar Chart\n\nA bar chart is an excellent tool for comparing and looking up values within data. \nIt is encoded using one quantitative and one categorical attribute using a line mark. Aligned along the vertical axis are the companies' close stock prices for January 20, 2023. The companies are ordered by greatest to least close stock price.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"viewof data_jan_20 = yahoo_data.filter(d=> d.Date==\"1/20/2023\" & d.Type==\"Blue Chip\" ).view({height:150})// filter based on January 20, 2023 and type is blue chip","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"data_jan_20_sort = d3.sort(data_jan_20,(a, b) => d3.descending(a.Close, b.Close)) /// sorting by the highest to lowest closing price \n// Reference https://observablehq.com/@devneeharika/data-transformation","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"To create the Horizontal Bar Chart using D3, I follow the same procedure as the scatterplot with the slight difference of using `y = d3.scaleBand()` to represent the categorical attribute of the company names.\nAsind from the different y-axis, I also draw rectangles `g.selectAll('rect')` instead of circles `g.selectAll(\"circle\")`.\n\nAfter drawing the Horizontal Bar Chart, I add the tooltip. First, define the tooltip's characteristic using this example's [Animated Bar Chart with Tooltip D3 6.0](https://observablehq.com/@mbrownshoes/animated-bar-chart-with-tooltip-d3-6-0). Then attach the tooltip to each rectangle drawn and describe the behavior of the interaction. When the mouse is over the rectangle, this will display the company information and Closing price.\n`d3.select(this).transition()` changes the element's color when hover-over.\n`.style('visibility', 'visible')` this makes the tooltip visible\n`.style('visibility', 'hidden')` this makes the tooltip invisible","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":677,"value":"### Home Depot, Inc. Stocks Are Currently Most Expensive Blue Chip \n###### Data Source: https://finance.yahoo.com","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":" multi_line = md`\n

\n## Multi-Line Chart\n`\n//https://observablehq.com/@weiglemc/clustering-example-with-d3?collection=@weiglemc/cs-725-825-spring-2021","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"First, start by grouping the categories I will be graphing. I selected well-known consumer companies like Walmart, Amazon. and Home Depot.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":211,"value":"symbols_stock = new Set([\"Walmart Inc.\", \"Amazon.com, Inc.\", \"The Home Depot, Inc.\"])// create the selection obtions","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"Then, I filtered and transformed the data into the appropriate datatypes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"viewof filtered_2 = yahoo_data\n .filter(aq.escape(d => symbols_stock.has(d.Company)))// filter the data base on the selection obtions\n \n .derive({ \n date: d => op.parse_date(d.Date), // reformate the date into date type\n close: d => op.parse_float(d.Close), // reformate the close into date float\n }) \n .select('date', 'Symbol', 'Company','close','Sector') // select the columns \n .view({height: 150})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"Just link the [example from class](https://observablehq.com/@weiglemc/cs725-multi-line-chart-arquero-data-setup). I created an Array of Objects with one element for each line.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":207,"value":"linedata = filtered_2\n .groupby('Company') // group data by company name\n .orderby('date') /// order the company data by date\n .rollup({\n values: d => op.array_agg(op.row_object('date', 'close')) /// aggriate the date close price into a object per row\n })\n .objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"I am computing all of the domains in one data structure.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":588,"value":"domains = filtered_2.rollup({\n x: d => [op.min(d.date), op.max(d.date)], // [min, max] domain array\n y: d => [op.min(d.close), op.max(d.close)], // [min, max] domain array\n groups: d => op.array_agg_distinct(d.Company) // array of unique values\n })\n .objects()[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"Create a variable that will store the drop-down menu selection option from the user of which items/categories should be shown.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":585,"value":"ComanyName = new Set([y_value,y_value2]) // create a variable the will store the use selection ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"Filter the linedata so that it will only show the user selection.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":497,"value":"companyData = linedata.filter(d => ComanyName.has(d.Company)) // filter the linedata base on the user selection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":" I am creating the color scheme base on the user selection.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"test_color = d3.scaleOrdinal()\n .domain(ComanyName)\n .range(d3.schemeTableau10);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"To create the Multi-Line Chart with a drop-down menu to select the categories to drop, I am using the [`Select( options, {value: defult_value, label: name})`](https://observablehq.com/@observablehq/input-select). I created two input options to create two lines and display the ledger color for only the option selected using the `Swatches`.\nTo dynamically update the y-axis base on the selected option \n[`.call(g => g.selectAll('.domain'))`](https://observablehq.com/@nyuvis/interaction) this line was added within the configuration of the y-axis.\n\n[Creating the tooltip](https://observablehq.com/@nyuvis/interaction) was tricky since I needed an invert y-axis to display the value closing price. [`d3.pointer(event, g.node())`](https://stackoverflow.com/questions/64189608/d3-v6-pointer-function-not-adjusting-for-scale-and-translate) to determine the exact position of the mouse.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":505,"value":"### Among the consumer store, Home Depot, Inc seems to have the most expensive stocks.\n###### Data Source: https://finance.yahoo.com","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":493,"value":"viewof y_value = Select(symbols_stock, {value: \"Walmart Inc.\", label: \"Select Company\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"viewof y_value2 = Select(symbols_stock, {value: \"The Home Depot, Inc.\", label: \"Select Company\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"Swatches(test_color)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"$50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"reference = md`\n

\n## Reference\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"$51","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"appendix = md`\n

\n## Appendix \nThis section contains all the essential libraries need to complete this assignment.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"import {visualizeTicks} from \"@d3/continuous-scales\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"import {uniqueValid} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"import {printTable} from \"@uwdata/data-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"format = d3.format('~s')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"formatDate = d3.utcFormat(\"%b %-d, ’%y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"formatClose = d3.format(\"$.2f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"import {Select} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W52","stdlib":"1"}} 24:null