/
index.html
56 lines (36 loc) · 3.49 KB
/
index.html
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
<html>
<head>
<title>Executive Colors</title>
<link href="https://fonts.googleapis.com/css?family=Hepta+Slab:300,400,600, 700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width; initial-scale=1;" />
</head>
<body>
<div id="container">
<div id="headline">
<h3>Executive Colors</h3>
<h4>A visual exploration of the colors of U.S. presidental portraits</h4>
</div>
<div id="bar-presidents"></div>
<p class="paragraphs">When I saw in person the vivid colors of <a href="https://npg.si.edu/learn/classroom-resource/barack-obama">Barack Obama's</a> presidential portrait at the <a href="https://npg.si.edu">National Portrait Gallery</a>, a question popped in my mind: Has the presidential portrait tradition changed over the years when it comes to its color palette? I set out to explore this in all the presidential portraits.</p>
<p class="paragraphs">What you see above are the most prevalent colors in the portraits. This project is just <strong>an experiment</strong>, if you want to know more about how I did it, you can read about it <a href="#methodology">here</a>.</p>
<div id="graph-3">
<h5>43 presidents, 16 Colors</h5>
<p class="graph-intro">Explore how the colors used in presidential portraits have evolved. Or look for what colors portrait your favorite president.</p>
<div class="buttons">
<button id="order-presidency">Chronological<div class="point">☟</div></button>
<button id="order-last-name">Alphabetical <div class="point">☟</div></button>
</div>
<div id="graphic-presidents"></div>
</div>
<p class="paragraphs" id="methodology"><strong>ABOUT THE DATA:</strong> The data used for this project was created using the programming language R and the package PaletteR. This package uses statistical analysis to extract the most prominent colors from an image (and, of course, it isn't perfect). You can read more about it <a href="http://www.andreacirillo.com/2018/05/08/how-to-use-paletter-to-automagically-build-palettes-from-pictures/">here.</a> I decided to extract 16 colors from each portrait. That number is arbitrary.</p>
<p class="paragraphs">The visualizations were made with JavaScript. You can find the R and JavaScript code <a href="https://github.com/lmelgar/presidential-colors">here.</a></p>
<p class="paragraphs">The goal of this project was just to play with this two tools, to have some fun.</p>
<p class="paragraphs">The portrait images came mostly from <a href="https://www.whitehousehistory.org/galleries/presidential-portraits">The White House Historical Association</a> and President Barack Obama's <a href="https://obamawhitehouse.archives.gov/photos-and-video/photogallery/official-portraits-us-presidents">White House website</a>.</p>
<p class="paragraphs">If you want to learn more about the portraits of the U.S. presidents (and the first ladies), you should listen to <a href="https://www.whitehousehistory.org/1600-sessions/presidential-portraits">this podcast.</a> And if you are in Washington, D.C., you should visit the National Portrait Gallery.</p>
<p class="paragraphs">If you have any thoughts, comments or ideas, you can find my contact in <a href="http://www.lmelgar.me">my website</a>.</p>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js"></script>
<script type="text/javascript" src="presidents.js"></script>
</body>
</html>