Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@ericsun153
ericsun153 authored Feb 17, 2024
1 parent 97c988f commit e872e58
Showing 1 changed file with 31 additions and 1 deletion.
32 changes: 31 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1,31 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><title>K-line Stock Market Visualization</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css"><style>iframe{width:100%;height:700px;border:0;margin-top:100px}body{overflow-x:hidden}</style></head><body><div id="root"></div><iframe src="./stock.html"></iframe><script type="text/javascript" src="/static/js/main.ecd7e6dc.js"></script><script type="text/javascript" src="/Stock-Visualization/static/js/main.fefe5a90.js"></script></body></html>
<!doctype html><html lang="en"><head><div>
<p>
The dataset we selected for our analysis encompasses the stock price of Apple Inc. over the past several years. Given the extensive volume of data, which includes daily stock prices from the 1990s to the present, we narrowed our focus to the period from 2022 to the current date. This timeframe is interesting as it allows us to examine the impact of Apple's breakthrough product, the 'Vision Pro', on the stock price surrounding its release in June 2023.
</p>
<p>
While considering various methods to visualize this data, we ruled out line graphs and bar charts. Line graphs, although straightforward, fail to provide detailed price range information within each period. Similarly, bar charts fall short in effectively conveying the progression of opening and closing stock values. Finally, we chose candlestick chart enhanced with interactive tooltips.
</p><p>
Our visual encodings utilize the finance industry's standard color conventions: green signifies upward trends, while red indicates declines. This color coding is designed to be recognizable to individuals accustomed to stock market charts, thus aiding in quick and efficient comprehension.
To further our chart's utility, we embedded tooltips that reveal exact data points as the cursor moves over individual elements. This feature maintains a streamlined chart appearance while simultaneously offering in-depth data upon request, striking a balance between visual clarity and comprehensive information.
</p>
<p>
We also incorporating trading volume data at the bottom, presented in a histogram format with interactive capabilities that highlight specific daily volumes. The histogram's subdued gray color and placement beneath the main chart keep the focus on the candlestick patterns while still providing context regarding market activity. Volume can help us confirm the strength or weakness of a price trend. For instance, an upward trend accompanied by increasing volume is generally seen as stronger and more likely to continue than a trend with decreasing volume.
</p>
</div>

<div id="root"></div>
<iframe src="./stock.html"></iframe>
<script type="text/javascript" src="/static/js/main.ecd7e6dc.js"></script>

<div>

<p>
In terms of division of labor, Eric handled the data loading and construction of the candlestick chart, while Sunan focused on illustrating trading volume and implementing interactive features, ensuring each element was optimally sized for the overall website. Eric brought our efforts together, managing the final compilation, uploading to GitHub, and deploying the website. We each dedicated five hours, totaling ten in this project. We spend most of our time adjusting the elements to achieve a clear and informative representation of our data.
</p>
<p>
From our analysis, it is evident that Apple's stock price has experienced a consistent rise following the mid-2023 release of Vision Pro. Moreover, we observed a recurring trend where the stock price tends to surge after every Worldwide Developers Conference when new software features are announced. Overall, this project offered insights into the tangible market reactions to Apple's product innovations.
</p>
<p>
In addition to the basic chart, we integrated a more sophisticated graph using the 'react-stockcharts' package. This enhancement offers improved visual appeal and interactive functionalities like zooming and precise coordinate positioning. Although we utilized additional packages, this advanced chart serves to demonstrate how our initial design can be augmented with supplementary tools.
</p>
</div><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><title>K-line Stock Market Visualization</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css"><style>iframe{width:100%;height:700px;border:0;margin-top:100px}body{overflow-x:hidden}</style></head><body><div id="root"></div><iframe src="./stock.html"></iframe><script type="text/javascript" src="/static/js/main.ecd7e6dc.js"></script><script type="text/javascript" src="/Stock-Visualization/static/js/main.fefe5a90.js"></script></body></html>

0 comments on commit e872e58

Please sign in to comment.