-
Notifications
You must be signed in to change notification settings - Fork 0
/
datavisualization.html
52 lines (49 loc) · 2.35 KB
/
datavisualization.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Data Visualization</title>
<link href="styles/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<nav class="topnav" role="navigation">
<ul>
<li nav aria-current=page>
<a id="home" aria-haspopup="true" aria-expanded="false" href="index.html" tabindex="0">Home▽</a>
<ul id="home-pulldown" class="project-pulldown">
<li><a href="gallery.html">Art Gallery</a></li>
<li><a href="https://dl.acm.org/doi/10.1145/3494991">FaceBit Paper</a></li>
<li><a href="https://dl.acm.org/doi/10.1145/3560905.3568561">Protean Paper</a></li>
<li><a href="ppg.html">PPG Processing</a></li>
<li><a href="project2.html">JS Ray Tracer</a></li>
<li nav aria-current=page><a href="datavisualization.html">Data Visualization</a></li>
</ul>
</li>
<li><a href="resume.html">Resume</a></li>
<li><a href="biography.html">Biography</a></li>
<li><a id="contact" aria-haspopup="true" aria-expanded="false" tabindex="0">Contact▽</a>
<ul id="contact-pulldown" class="pulldown">
<li>jasonhuang2023[at]u[dot]northwestern[dot]edu</li>
<li><a href="https://github.com/jjh9397/">Github</a></li>
</ul>
</li>
</ul>
</nav>
<main role="main">
<article class="brick-container-container" aria-labelledby="palette" role="article">
<h1 id="palette">Data Visualization: Palette Generator</h1>
<p>
This visualizes the most used colors in artworks from the Art Institute of Chicago search API. Each row represents an image, and each column represents
a frequently used color. I created this project as a way to learn the use of APIs while making a tool that helps me with my artistic hobbies.
</p>
<a href="https://pyro-a7.glitch.me/">Generate palettes from other artists and read more project information</a>
<figure class="palette-wrapper" aria-labelledby="palette">
<img src="images/palette-generator.png" alt="color palette generated from artworks of Yoshida Hiroshi">
<figcaption>Palette generated from artworks of Yoshida Hiroshi</figcaption>
</figure>
</article>
</main>
<script src="scripts/main.js"></script>
</body>
</html>