Skip to content

final-AaronBrady #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BradyA25 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

final-AaronBrady #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ee85703
Submission
BradyA25 Mar 1, 2024
bf1082e
Update README.md
BradyA25 Mar 1, 2024
1707e8a
Update README.md
BradyA25 Mar 1, 2024
5bfd5f1
Update README.md
BradyA25 Mar 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions Presentation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!doctype html>

<html lang="en">


<head>
<meta charset="utf-8">
<title>2 Minute Presentation</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/styles.css" rel="stylesheet" type="text/css">
</head>

<body>

<header>
<h1>NFL Draft Visual</h1>
</header>

<nav tabindex="0">
<div class="menu_dropdown">
<p><a href="index.html">Home</p>
<p><a href="test2.html">Final Visualization</a></p>
<p><a href="ProcessBook.html">Process Book</a></p>
<p class = "thislink">Presentation</a></p>
</div>
</nav>


<main>
<section class = "content">
<h1>2 Minute Presentation</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/5SPrY1ti-Js?si=mwca6fO9W3vZVglq" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</section>
</main>

<footer>
<p><a href="index.html">Home</a></p>
</footer>
</body>
</html>
45 changes: 45 additions & 0 deletions ProcessBook.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!doctype html>

<html lang="en">

<head>
<meta charset="utf-8">
<title>Process Book</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/styles.css" rel="stylesheet" type="text/css">
</head>

<body>

<header>
<h1>NFL Draft Visual</h1>
</header>

<nav tabindex="0">
<div class="menu_dropdown">
<p><a href="index.html">Home</p>
<p><a href="test2.html">Final Visualization</a></p>
<p class = "thislink">Process Book</a></p>
<p><a href="Presentation.html">Presentation</a></p>
</div>
</nav>

<main>
<section class = "content">
<h1>Process Book</h1>
<section>
<object
type ='application/pdf'
data = 'ProcessBook.pdf'
width="800"
height="600"
></object>
</section>
</section>
</main>
<footer>
<p><a href="index.html">Home</a></p>
</footer>
</body>

</html>
Binary file added ProcessBook.pdf
View file
Open in desktop
Binary file not shown.
141 changes: 39 additions & 102 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,125 +1,62 @@
Final Project - Interactive Data Visualization
===
## Links
Website - https://bradya25.github.io/final/
Youtube Video - https://www.youtube.com/watch?v=5SPrY1ti-Js&t=1s&ab_channel=AaronBrady

The key learning experience of this course is the final project.
You will design a web site and interactive visualizations that answer questions you have, provide an exploratory interface to some topic of your own choosing, or take on a more ambitious experiment than A3.
You will acquire the data, design your visualizations, implement them, and critically evaluate the results.
## File Breakdown
"_images" folder contains the first sankey diagram we made in this project

The path to a good visualization is going to involve mistakes and wrong turns.
It is therefore important to recognize that mistakes are valuable in finding the path to a solution, to broadly explore the design space, and to iterate designs to improve possible solutions.
To help you explore the design space, we will hold events such as feedback sessions in which you propose your idea and initial designs and receive feedback from the class and staff.
"_python" folder contains all of the data scraping, cleaning, and data sets.

Proposals / Idea Generation
---

Submit project ideas using [this Google Form](https://docs.google.com/forms/d/e/1FAIpQLSc72vId8keotkEvLrB9Ef3Nt0e1uh_-mWmQ5okyPM5_q2a89Q/viewform?usp=sf_link).
"_results" folder within the python folder contains all the csvs used in the project. They are outputed by scraper.py and clean_data.py. The csvs are stored in their years folder. Each year folder contains the raw draft df (draftdf_XXXX.csv), raw player data (playerdf_XXXX.csv), a join of these (joindf_XXXX.csv), a cleaned csv (draftdf_XXXXcleaned.csv), source target value (stv_XXXX.csv), the round and conference stack folders contain csvs for each nfl data about the number of picks by each team in a round, and number of draft picks from a conference that year.

You're encouraged to submit many ideas-- staff will help you identify the most promising ones and possible roadblocks.
"scraper.py" uses BS4 to scrape the data. For each year it scrapes wiki nfl draft page to save the entire table as a csv. Then for each player it goes to the player link and collects player accomplishments. We did not end up using the player accomplishments in this visual.

Please stick to 1-4 folks per team.

Final Project Materials
---
For your final project you must hand in the following items.
"clean_data.py" cleans the data and creates the csvs used for the visuals. We cleaned multiple fields. For college conference if it was a major conference it would stay the same, else it would be 'Other' in the conf_clean column. For teams that had moved they had a team name change so had to ensure that those teams were saved as the same name. We also created a nfl division column based on the team name. Once this was done we would save the csv as draftdf_XXXX.csv. Then we would join this csv with the player data so we would have a df with player draft and stats. Then we appended all of the years together for the clean, player, and joined df. Using the cleaned dfs we created the source target values that would be the data source for the sankey. We did this by using pandas group by function and grouping by the source and target. The last two functions get aggregate measures for each team in a division and writes to a csv. The stack_conf is used for the stacked bar chart.

### Process Book
"ExploratoryNotebook.ipynb" uses pandas and seaborn to do simple EDA. It also has some of the preliminary data cleaning we did before creating the python data cleaning file.

An important part of your project is your process book. Your process book details your steps in developing your solution, including the alternative designs you tried, and the insights you got. Develop your process book out of the project proposal. Equally important to your final results is how you got there! Your process book is the place you describe and document the space of possibilities you explored at each step of your project. It is not, however, a journal or lab notebook that describes every detail - you should think carefully about the important decisions you made and insights you gained and present your reasoning in a concise way.
"styles" contains a styles css for the website.

We strongly advise you to include many figures in your process book, including photos of your sketches of potential designs, screen shots from different visualization tools you explored, inspirations of visualizations you found online, etc. Several images illustrating changes in your design or focus over time will be far more informative than text describing those changes. Instead, use text to describe the rationale behind the evolution of your project.
"index.html" is the homepage of the website. Links to the other parts of the project and contains brief project description.

Your process book should include the following topics. Depending on your project type the amount of discussion you devote to each of them will vary:
"Presentation.html" has my 2 minute youtube embedded in it.

- Overview and Motivation: Provide an overview of the project goals and the motivation for it. Consider that this will be read by people who did not see your project proposal.
- Related Work: Anything that inspired you, such as a paper, a web site, visualizations we discussed in class, etc.
- Questions: What questions are you trying to answer? How did these questions evolve over the course of the project? What new questions did you consider in the course of your analysis?
- Data: Source, scraping method, cleanup, etc.
- Exploratory Data Analysis: What visualizations did you use to initially look at your data? What insights did you gain? How did these insights inform your design?
- Design Evolution: What are the different visualizations you considered? Justify the design decisions you made using the perceptual and design principles you learned in the course. Did you deviate from your proposal?
- Implementation: Describe the intent and functionality of the interactive visualizations you implemented. Provide clear and well-referenced images showing the key design and interaction elements.
- Evaluation: What did you learn about the data by using your visualizations? How did you answer your questions? How well does your visualization work, and how could you further improve it?
"ProcessBook.html" has by process book pdf embedded in it.

As this will be your only chance to describe your project in detail make sure that your process book is a standalone document that fully describes your results and the final design.
[Here](http://dataviscourse.net/2015/assets/process_books/bansal_cao_hou.pdf) are a [few examples](http://dataviscourse.net/2015/assets/process_books/walsh_trevino_bett.pdf) of process books from a similar course final.
"ProcessBook.pdf" is my process book.

Tip: Start your process book on Day 1. Make entries after each meeting, and trim / edit as needed towards the end of the project. Many folks use either slides software (like PowerPoint) or Google Docs to make this book, as both allow for flexible layouts and export to PDF.
"sankey.js" is from the source at the bottom of the read me. Did not make any changes.

"test2.html" contains both of the visuals. Had source code from reference below. Changed colors and data source. Also added the stacked bar chart and interactive filters.

### Project Website
### Non-Obvious features
You can drag the nodes vertically and place them where you want.
Year filter applies to the stacked bar chart.

Create a public website for your project using GitHub pages or another web hosting service of your choice.
The web site should contain your interactive visualization, summarize the main results of the project, and tell a story.
Consider your audience (the site should be public if possible, unless you're running an experiment, etc.) and keep the level of discussion at the appropriate level.
Your process book and data should be linked from the web site as well.
Also embed your interactive visualization and your screen-cast in your website.
If you are not able to publish your work (e.g., due to confidential data) please let us know in your project proposal.
### Technical achievement
I believe I have achieved the technical aspect of this project with the development of a custom web scraper along with all the two interactive filters applied to the visual. The two of these aspects required a lot of data manipulation which brings along a lot of data validation.

### Project Screen-Cast
### Design achievement
I believe I have achieved the design aspect of this project with the customization of colors and the overall website design.

Each team will create a two minute screen-cast with narration showing a demo of your visualization and/or some slides.

You can use any screencast tool of your choice, such as Camtasia or Loom (new and recommended).
Please make sure that the sound quality of your video is good -- it may be worthwhile to invest in an external USB microphone-- campus IT should have some you can borrow.
Upload the video to an online video-platform such as YouTube or Vimeo and embed it into your project web page.
For our final project presentation day, we will show as many videos in class as possible, and ask teams to field questions.

We will strictly enforce the two minute time limit for the video, so please make sure you are not running longer.
Use principles of good storytelling and presentations to get your key points across. Focus the majority of your screencast on your main contributions rather than on technical details.
What do you feel is the best part of your project?
What insights did you gain?
What is the single most important thing you would like your audience to take away? Make sure it is front and center rather than at the end.

Outside Libraries/References
## References
---
Wiki pages scraped
- https://en.wikipedia.org/wiki/2010_NFL_draft
- https://en.wikipedia.org/wiki/2011_NFL_draft
- https://en.wikipedia.org/wiki/2012_NFL_draft
- https://en.wikipedia.org/wiki/2013_NFL_draft
- https://en.wikipedia.org/wiki/2014_NFL_draft
- https://en.wikipedia.org/wiki/2015_NFL_draft
- https://en.wikipedia.org/wiki/2016_NFL_draft
- https://en.wikipedia.org/wiki/2017_NFL_draft
- https://en.wikipedia.org/wiki/2018_NFL_draft
- https://en.wikipedia.org/wiki/2019_NFL_draft
- https://en.wikipedia.org/wiki/2020_NFL_draft

For this project you *do not* have to write everything from scratch.

You may *reference* demo programs from books or the web, and *include* popular web libraries like Material UI, React, Svelte, etcetera.

Please *do not* use libraries on top of d3 without consulting staff, however.
Libraries like nvd3.js look tempting, but such libraries often have poor defaults and result in poor visualizations.
There may be exceptions.
Instead, draw from the numerous existing d3 examples on the web.

If you use outside sources please provide a References section with links at the end of your Readme.

Resources
---
The "[Data is Plural](https://tinyletter.com/data-is-plural/archive)" weekly letter often contains interesting datasets.

KAGGLE IS BANNED! You may propose to use a dataset from there if you really have a deep/cool idea, but please run it by me first.

Think of something you're interested in, go find data on it! Include data collection and processing as part of your work on this project.

Requirements
---

Store the following in your GitHub repository:

- Code - All web site files and libraries assuming they are not too big to include
- Data - Include all the data that you used in your project. If the data is too large for github store it on a cloud storage provider, such as Dropbox or Yousendit.
- Process Book- Your Process Book in PDF format.
- README - The README file must give an overview of what you are handing in: which parts are your code, which parts are libraries, and so on. The README must contain URLs to your project websites and screencast videos. The README must also explain any non-obvious features of your interface.

GitHub Details
---

- Fork the repo. You now have a copy associated with your username.
- Make changes to index.html to fulfill the project requirements.
- Make sure your "main" branch matches your "gh-pages" branch. See the GitHub Guides referenced above if you need help.
- Edit the README.md with a link to your gh-pages or other external site: for example http://YourUsernameGoesHere.github.io/DataVisFinal/index.html
- To submit, make a [Pull Request](https://help.github.com/articles/using-pull-requests/) on the original repository.

Grading
---

- Process Book - Are you following a design process that is well documented in your process book?
- Solution - Is your visualization effective in answering your intended questions? Was it designed following visualization principles?
- Implementation - What is the quality of your implementation? Is it appropriately polished, robust, and reliable?
- Presentation - Are your web site and screencast clear, engaging, and effective?
Your individual project score will also be influenced by your peer evaluations.

References
---
D3 Sankey Starter Code
- https://gist.github.com/d3noob/06e72deea99e7b4859841f305f63ba85

- This final project is adapted from https://www.dataviscourse.net/2020/project/
Binary file added _images/first_Sankey.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 46 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!doctype html>

<html lang="en">


<head>
<meta charset="utf-8">
<title>NFL Draft Visual</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/styles.css" rel="stylesheet" type="text/css">
</head>

<body>

<header>
<h1>NFL Draft Visual</h1>
</header>

<nav tabindex="0">
<div class="menu_dropdown">
<p class = "thislink">Home</p>
<p><a href="test2.html">Final Visualization</a></p>
<p><a href="ProcessBook.html">Process Book</a></p>
<p><a href="Presentation.html">Presentation</a></p>
</div>
</nav>


<main>

<section class = "content">
<h1>Home Page</h1>
<p>This project aims to answer the questions of what college conferences produce the highest picked prospects, and if there exists pipelines between college conferences and NFL teams. To answer these questions we created a Sankey diagram and a stacked bar chart. The user can use interactive filters to successfully answer more specific questions with the visuals. To read more about the visual go to the Process Book page. To see the visual go to the Final Visual page.</p>
<p>Navigate to project requirements using navigation bar.</p>
</section>
</main>

<footer>
<p><a href="index.html">Home</a></p>
</footer>



</body>

</html>
Loading