Final-Project/about.html at master · pseudodream/Final-Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<head>
    <meta charset="utf-8" />
    <title>About Page</title>
    <link rel="stylesheet" href="aboutStyle.css" />
</head>
<body>
    <div class="header">
        <div class="header-text">
          <h1>
            About Refusing to HesiTATE
          </h1>
          <p id="description">
            Out motivation with this project was to highligh female artists in the TATE collection because they are so under-represented
            in the gallery. Specifically, we wanted to use our webpage to highlight lesser-known artists and to put artists' artwork on full
            display. The point of this site is not only to display trends within the collection, but it is also to put the incorporate
            the artwork into the visualization. We used open-source data about the TATE collection's artwork and artists to achieve this
            goal.
          </p>
        </div>
      </div>

      <div class="navigation">
        <ul id="page-items">
          <li><a href="#processing">Data Processing</a></li>
          <li><a href="#design">Design Rationale and Processes</a></li>
          <li><a href="#showcase">Showcase Video</a></li>
          <!--<li><a href="#quiz">Test Your Knowledge</a></li>-->
        </ul>
      </div>

      <section id = "processing">
          <h2>Data Processing</h2>
          <div class = "processing-desc">
              Our primary dataset was a combination of two datasets was released by the TATE gallery in London. The first of the two
              datasets contained artists information such as an unique artist ID, artist name, artist gender, artist place of birth,
              artist place of death, artist year of birth and artist year of death. The second dataset contained information about different
              artworks in the TATE collection. This dataset included field such as artist, artist ID, artwork title, date of creation,
              date of acquistion, and links to the artwork on the TATE gallery website. <br><br>
              To create one cohesive dataset we joined these two datasets together by artist ID and then filtered them to create a dataset
              containing only artwork created by female artists. From here we had to perform some data cleaning to create concise
              and clear visualizations. The primary task we performed was normalizing medium names for the "Meet Popular Artists" visualization.
              We found that many of the same mediums were listed under different names, so we had to identify these duplicates
              and normalize the medium names accordingly. We used SQL to perform these analyses. <br><br>
              Addiotionally, the visualizations focussed on image color required a fair bit of data cleaning. We first extracted
              the colors of each artwork from the thumbnail url provided in the dataset. We then used a js library called Color Thief which
              grabs the primary color and the palette of 10 colors in each image. We then used the attributes collected by Color Thief in our
              visualizations. In order to save the website loading time, we used the combined dataset instead of performing color extraction
              every time we run the program. <br><br>
              Information about Color Thief can be found <a href = https://lokeshdhakar.com/projects/color-thief/#api> here</a>.
          </div>
      </section>
      <section id = "design">
          <h2>Design Rationale and Processes</h2>
          <div class = "design-desc">
              <b>Highlights:</b><br><br>
              We wanted to use the highlights section as a place to explain the rationale behind our project in the most simple way possible.
              First we wanted to adress the artist gender breakdown in the collection. To do this we created a simple bar chart because we
              believed that encoding artist count using the bar height was the best way to help usere see disparities between genders. <br><br>
              We used an area chart to show when female artists were creating work and when their work was being collected because we thought
              this visualization helped us best show patterns over time. Looking at this chart, users can see how women were excluded from the
              art scene for many centuries. <br><br>
              <b>Meet Popular Artists</b><br><br>
              We decided to focus our website on the female artists, so we thought it would be interesting to display the top ten female
              artists based on their number of artworks in the gallery. The visualization breaks each down by medium, in order to show which
              artists used which mediums.<br><br>
              For each artist we included an image, brief description of their history, and a horizontal bar
              chart encoding the number of artworks with each medium. By hovering over the image of the artist it displays the origin of the
              artist along with the type of artwork they specialized in.<br><br>
              For the entire collection of bar charts, each medium corresponds to a color to make the entire section cohesive. In addition
              the height of each bar encodes the number of mediums used. For example the more mediums an artist uses, the more bars are
              included in the visualization and the heights are smaller. This creates a visual to see that if the heights of the bars are
              larger, the less mediums the artist used.<br><br>
              This visualization allowed us to learn more about which artists were the most influential in different time periods and also
              see if there were any correlations between the mediums used and the time period of each artist. <br><br>
              <b>Explore the Collection:</b><br><br>
              We want the users to feel like they are walking through the museum, so we decided to embed the artwork images into the website.
              Since the entire dataset contains only around 1700 images, it is possible to create a large collage of all the artwork. <br><br>
              The artworks are sorted from newest to oldest, it makes the audiences feel like they are walking back in time in their journey of exploration. <br><br>
              We also added tooltips that pop up when hovering above a thumbnail image, they contain basic information and an enlarged picture
              of the artwork. If the user wants to see more details, he or she can click the image to jump to the original museum webpage. <br><br>
              <b>Pick a Color, Find a Piece:</b><br><br>
              Sometimes the audiences can get lost looking at the huge collage of images, therefore we provided a way for them to explore
              an individual image. We wanted to create a search function; however, we recognized that many of the users might not know
              enough about the artwork or artists, to run a specified search. To solve this problem, we decided to create a function that
              would allow users to explore the museum by their favorite colors, hopefully allowing them to uncover new favorite artists
              throughout the process.
              The user can pick a color of choice and be presented with an image containing colors most similar to the selected color. We found a
              JavaScript file online that makes it possible to calculate color difference and find a color that is the most similar to the input color in an
              array of colors.
              Additionally, the program returns the palette of 10 colors and their hex codes. This palette not only provides atheistic
              effects, but also helps the users that are seeking inspiration. We understand that many artists like browsing artworks and
              studying their color palettes, so we think the palette functionality will be especially useful to these people.<br><br>
              We appreciate <a href = https://github.com/sunpietro/color-finder>sunpietro</a> for creating this helpful file that makes the section possible
          </div>
      </section>
      <section id = "showcase">
          <h2>Final Showcase Video</h2>
          <div class = "showcase-vid">
              <div class = "center">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/x6E3vlUuRrM" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
              </div>
          </div>
      </section>
      <footer>
        <div class="citeNote">
          <p style="color:rgb(55, 52, 52);">View Source Code <a id = "link" href="https://github.com/ritalaplante/Final-Project">here</a>
        </div>
        <div class="authors">
            <p style="color:rgb(55, 52, 52);">Authors: Rita LaPlante, Kelly Burke, Amy Zhao
          </div>
        <div class="myfooter">
          <button id="views" onclick="scrollWin()">Back to top</button>
        </div>
      </footer>
</body>