25:["$","title",null,{"children":"Visualization Project - Part 2 (final project) | Gabriela Gamez | Observable"}] 49:T7c3, cell = html`

Interactive Stock Comparison

${viewof yFeatures}${viewof xFeatures}

Correlation of ${xFeatures} and ${yFeatures}

${viewof scattertrend}

February 17, 2023 Max ${xFeatures}

${viewof bartMax}

Comparing the Stocks' Closing Price Over Time.

${viewof linechart}

${viewof selections} ${viewof reset}

Terminology

Open - The first price of the stock when the market opens.

Close - The price at the end of the day when the market closes.

High - The highest prices the stock reaches during the open market.

Low - The lowest prices the stock reaches during the open market.

Volume - The number of shares traded in for a particular stock.

`4a:T6aa,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. `4b: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.4c:T672,viewof selections = { reset; const rowHeight = 20; const fontSize = 15; const svg = d3.create('svg') .attr('width', 300) // origins is an array containing the strings USA, Europe, and Japan .attr('height', rowHeight * stock.length + 5); const rows = svg.selectAll('g') .data(stock) .join('g') // position the group for each row of the legend .attr('transform', (d, i) => `translate(5, ${i * rowHeight})`); // add colored square to each row rows.append('rect') .attr('width', fontSize) .attr('height', fontSize) .attr('stroke-width', 2) .attr('stroke', d => stockColor(d)) .attr('fill', d => stockColor(d)) .on('click', onclick); // add label to each row rows.append('text') .attr('font-size', fontSize) .attr('x', rowHeight) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(d => d); // Track which origins are selected in the legend. // This is a map from car origin to a boolean for // whether or not it the origin is selected. // To start, all origins are selected. const selected = new Map(stock.map(d => [d, true])); function onclick(event, d) { const isSelected = selected.get(d); // this refers to the square that was clicked const square = d3.select(this); // toggle the square square.attr('fill', d => isSelected ? 'white' : stockColor(d)); selected.set(d, !isSelected); svg.property('value', selected).dispatch('input'); } svg.property('value', selected).dispatch('input'); return svg.node(); }4d:Tec7,function multiline_chart() { //variable defenition const visWidth = 600 const visHeight = 400 const margin = ({top: 20, bottom: 50, left: 90, right: 60}) const selection = filtered_2.filter(aq.escape(d => selections.get(d.Company))); // set up outer svg container const svg = d3.create('svg') .attr('width', 700) .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]); // 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(linedata) .join("path") .attr("d", d => line(d.values)) .attr('stroke', d => stockColor(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(); }4e:Td7d, // set up function barchart_max() { const visWidth = 300 const visHeight = 400 const hoverColor = '#000000'; const x = d3.scaleLinear() .domain([0, d3.max(data_feb_17_sort, d => d[xFeatures])]).nice() .range([0, visWidth]); const y = d3.scaleBand() .domain(data_feb_17_sort.map(d => d.Company)) //.domain(d3.extent(carData, d => d[yFeatures])) .range([0, visHeight]) .padding(0.2); const margin = {top: 10, right: 100, bottom: 50, left: 130}; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); //-----------------------------------------------------------------------------Start axes const xAxisGroup = g.append("g") .attr('transform', `translate(0,${visHeight})`) .call(d3.axisBottom(x).tickFormat(format)) .call(g => g.select('.domain').remove()) // references https://observablehq.com/@d3/connected-scatterplot .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('y1', -visHeight) .attr('y2', 0))//; // add label .call(g => g.append('text') .attr('x', visWidth / 2) .attr('y', 40) .attr('fill', 'black') .attr('text-anchor', 'middle') .text(xFeatures)); //.text('horsepower')); const yAxisGroup = g.append("g") .call(d3.axisLeft(y)); //-----------------------------------------------------------------------------END axes ///-------------------------------------------------------------------------------------------Start 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('padding', '10px') .style('border-radius', '4px') .style('color', '#fff') .text('a simple tooltip'); ///-------------------------------------------------------------------------------------------END tooltip SVG text element //---------------------------------------------------------------------------- draw mark for each element in data g.selectAll('rect') // .data(data) .data(data_feb_17_sort.filter(d => selections.get(d.Company))) .join('rect') .attr('x', 0) .attr('y', d => y(d.Company)) .attr('width', d => x(d[xFeatures])) .attr('height', y.bandwidth()) .attr('fill', d => stockColor(d.Company)) //Change the contents and position of the tooltip .on('mouseover', function (event,d, i) { tooltip .html( `

Name: ${d.Company}

${xFeatures}: ${d[xFeatures]}

Name: ${d.Company}

${xFeatures}: ${d[xFeatures]}

${yFeatures}: ${d[yFeatures]}

` ) .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', d => stockColor(d.Company)); }); //-----------------------------------------------------------------------------------------Start-Zoom in const zoom = d3.zoom() .extent([ [margin.left, margin.top], [visWidth + margin.left, visHeight + margin.top] ]) // determine how much you can zoom out and in .scaleExtent([1, Infinity]) .on('zoom', onZoom); svg.call(zoom); function onZoom(event) { // get updated scales const xNew = event.transform.rescaleX(x); const yNew = event.transform.rescaleY(y); // update the position of the dots //.attr('cx', d => xScale(d[xFeatures])) dots.attr('cx', d => xNew(d[xFeatures])) .attr('cy', d => yNew(d[yFeatures])); // update the axes xAxisGroup.call(d3.axisBottom(xNew)) .call(g => g.selectAll('.domain').remove()); yAxisGroup.call(d3.axisLeft(yNew)) .call(g => g.selectAll('.domain').remove()); // update the grid yGrid.selectAll('line') .data(yNew.ticks()) .join('line') .attr('stroke', '#d3d3d3') .attr('x1', 0) .attr('x2', visWidth) .attr('y1', d => 0.5 + yNew(d)) .attr('y2', d => 0.5 + yNew(d)); xGrid.selectAll('line') .data(xNew.ticks()) .join('line') .attr('stroke', '#d3d3d3') .attr('y1', 0) .attr('y2', visHeight) .attr('x1', d => 0.5 + xNew(d)) .attr('x2', d => 0.5 + xNew(d)); } //-----------------------------------------------------------------------------------------END-Zoom in return svg.node(); }50:T858,* [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) * [HW4 - Dashboards and Interaction](https://observablehq.com/d/079a5ebd89de81a2) * [HTML Table Headers](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table5) * [d3.scaleBand](https://observablehq.com/@d3/d3-scaleband) * [height](https://observablehq.com/@fil/height)51:[{"id":"2e57dfaa240022f23a07a31b5b9d3b380d3eaaaa7d37f394d18bb0b4382f21434c7b82d184183c1ce18bfdcbc9342903d73d0ef8abaacbb100f827c14d3bd8be","href":"https://static.observableusercontent.com/files/2e57dfaa240022f23a07a31b5b9d3b380d3eaaaa7d37f394d18bb0b4382f21434c7b82d184183c1ce18bfdcbc9342903d73d0ef8abaacbb100f827c14d3bd8be","name":"Stocks-historical-data-more-info.csv","type":"text/csv","lastModified":1681238782092.927,"size":361333}] 29:{"id":"a08daf087a35896e","slug":null,"title":"Visualization Project - Part 2 (final project)","thumbnail":"af0a3c596f90896aa52cd1d491bfef355726c0b7130558542d94d276383eb1f5","access_level":"public","create_time":"$D2023-04-11T18:45:17.730Z","update_time":"$D2023-04-25T01:12:11.643Z","view_time":null,"first_public_time":"$D2023-04-11T18:45:17.730Z","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":486,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualization Project - Part 2 (final project)","cells":[{"id":0,"value":"# Visualization Project - Part 2 (final project)\n\nGabriela Gamez\nCS 725/825, Spring 2023 \nDue: April 10, 2023","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## Table of Contents\n\n- [_Dashboard_](#d3dash)\n- [_Data_](#data_section)\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":134,"value":"d3dash = md`\n

\n## Dashboard\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"//Referance https://observablehq.com/@fil/height\nfullscreen = {\n const button = html`

Interactive Stock Comparison

Correlation of ${xFeatures} and ${yFeatures}

February 17, 2023 Max ${xFeatures}

Comparing the Stocks' Closing Price Over Time.

Terminology

Open - The first price of the stock when the market opens.

Close - The price at the end of the day when the market closes.

High - The highest prices the stock reaches during the open market.

Low - The lowest prices the stock reaches during the open market.

Volume - The number of shares traded in for a particular stock.