Skip to content

Commit a17823f

Browse files
SpaceMercurySpaceMercury
authored
Merge pull request #16 from com-480-data-visualization/fuentes-additions
vizes
2 parents 72094a2 + 0746e23 commit a17823f

2 files changed

Lines changed: 176 additions & 10 deletions

File tree

‎website/content/_index.md‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,12 @@ tags: ["d3", "sample", "graph", "shortcodes"]
99
A powerful, lightweight visualization for COM-480 built with Hugo, Tailwind CSS.
1010
{{< /lead >}}
1111

12-
# Visualizations {#visualizations}
12+
This project explores a Goodreads book dataset through questions of authorship, geography, language, publishing, and gender representation.
13+
14+
Instead of reading the dataset as a static table, each visualization gives you a different way to move through it: compare groups, follow changes over time, filter the library, or look for the categories where the patterns become surprising.
1315

14-
## Project visualizations
16+
# Visualizations {#visualizations}
1517

16-
- [Gender explorer - filtered comparison](visualizations/gender-explorer/): filter genres or author nationalities and compare male, female, and other authorship totals.
17-
- [The gender-genre scatter](visualizations/gender-genre-scatter/): compare average price and rating by gender group.
18-
- [Gender explorator](visualizations/gender-explorator/): inspect women-led and men-led representation by genre or author nationality.
19-
- [Cartogram](visualizations/cartogram/): scale countries by the number of books from authors with those nationalities.
20-
- [Bar race](visualizations/bar-race/): watch the leading author nationalities change over time, with optional population scaling.
21-
- [Languages](visualizations/languages/): see the distribution of books by language as a waffle chart.
22-
- [Publishers](visualizations/publishers/): compare gender representation across major publishers.
23-
- [Library](visualizations/library/): browse and filter books on an interactive shelf.
18+
{{< visualization-cards >}}
2419

2520
{{< team-profile >}}

‎website/layouts/shortcodes/visualization-cards.html‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
{{ $visualizations := slice
2+
(dict "title" "Gender explorer" "url" "/visualizations/gender-explorer/" "description" "Filter genres or author nationalities and compare male, female, and other authorship totals." "type" "bars")
3+
(dict "title" "Gender-genre scatter" "url" "/visualizations/gender-genre-scatter/" "description" "Compare average price and rating by gender group across genres or nationalities." "type" "scatter")
4+
(dict "title" "Gender explorator" "url" "/visualizations/gender-explorator/" "description" "Inspect women-led and men-led representation by genre or author nationality." "type" "diverging")
5+
(dict "title" "Cartogram" "url" "/visualizations/cartogram/" "description" "Scale countries by the number of books from authors with those nationalities." "type" "map")
6+
(dict "title" "Bar race" "url" "/visualizations/bar-race/" "description" "Watch the leading author nationalities change over time, with optional population scaling." "type" "race")
7+
(dict "title" "Languages" "url" "/visualizations/languages/" "description" "See the distribution of books by language as a waffle chart." "type" "waffle")
8+
(dict "title" "Publishers" "url" "/visualizations/publishers/" "description" "Compare gender representation across major publishers." "type" "publishers")
9+
(dict "title" "Library" "url" "/visualizations/library/" "description" "Browse and filter books on an interactive shelf." "type" "shelf")
10+
}}
11+
12+
<section class="viz-card-grid" aria-label="Project visualizations">
13+
<style>
14+
.viz-card-grid {
15+
display: grid;
16+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
17+
gap: 18px;
18+
margin: 1.5rem 0 2.5rem;
19+
}
20+
21+
.viz-card {
22+
display: grid;
23+
grid-template-rows: auto 1fr;
24+
min-height: 100%;
25+
overflow: hidden;
26+
border: 1px solid rgba(39, 40, 44, 0.14);
27+
border-radius: 8px;
28+
background: rgba(255, 255, 255, 0.76);
29+
color: inherit;
30+
text-decoration: none;
31+
box-shadow: 0 14px 32px rgba(30, 34, 42, 0.08);
32+
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
33+
}
34+
35+
.viz-card:hover {
36+
transform: translateY(-3px);
37+
border-color: #bd93f9;
38+
box-shadow: 0 18px 42px rgba(30, 34, 42, 0.14);
39+
}
40+
41+
.viz-card-visual {
42+
height: 135px;
43+
background: #fbfaf8;
44+
border-bottom: 1px solid rgba(39, 40, 44, 0.1);
45+
}
46+
47+
.viz-card-visual svg {
48+
display: block;
49+
width: 100%;
50+
height: 100%;
51+
}
52+
53+
.viz-card-body {
54+
padding: 16px 17px 18px;
55+
}
56+
57+
.viz-card-body h3 {
58+
margin: 0 0 7px;
59+
font-size: 1.08rem;
60+
line-height: 1.25;
61+
}
62+
63+
.viz-card-body p {
64+
margin: 0;
65+
color: #59565d;
66+
font-size: 0.93rem;
67+
line-height: 1.45;
68+
}
69+
70+
.dark .viz-card {
71+
border-color: rgba(245, 244, 241, 0.16);
72+
background: rgba(39, 41, 50, 0.78);
73+
}
74+
75+
.dark .viz-card-visual {
76+
background: #272932;
77+
border-bottom-color: rgba(245, 244, 241, 0.12);
78+
}
79+
80+
.dark .viz-card-body p {
81+
color: #d7d4ce;
82+
}
83+
</style>
84+
85+
{{ range $visualizations }}
86+
<a class="viz-card" href="{{ .url | relURL }}">
87+
<div class="viz-card-visual" aria-hidden="true">
88+
{{ if eq .type "bars" }}
89+
<svg viewBox="0 0 320 150" role="img">
90+
<rect width="320" height="150" fill="currentColor" opacity="0.02" />
91+
<line x1="38" y1="118" x2="292" y2="118" stroke="#c6c2ba" />
92+
<rect x="55" y="42" width="46" height="76" rx="4" fill="#a5d8ff" />
93+
<rect x="124" y="24" width="46" height="94" rx="4" fill="#bd93f9" />
94+
<rect x="193" y="78" width="46" height="40" rx="4" fill="#ffbd4a" />
95+
</svg>
96+
{{ else if eq .type "scatter" }}
97+
<svg viewBox="0 0 320 150" role="img">
98+
<g stroke="#ddd9d1" stroke-width="1">
99+
<line x1="42" y1="118" x2="282" y2="118" />
100+
<line x1="42" y1="30" x2="42" y2="118" />
101+
<line x1="42" y1="88" x2="282" y2="88" opacity="0.7" />
102+
<line x1="42" y1="58" x2="282" y2="58" opacity="0.7" />
103+
</g>
104+
<circle cx="92" cy="76" r="8" fill="#a5d8ff" stroke="#fff" />
105+
<circle cx="142" cy="52" r="7" fill="#a5d8ff" stroke="#fff" />
106+
<circle cx="205" cy="87" r="9" fill="#a5d8ff" stroke="#fff" />
107+
<path d="M108 105l8-8 8 8-8 8z" fill="#bd93f9" stroke="#fff" />
108+
<path d="M173 70l8-8 8 8-8 8z" fill="#bd93f9" stroke="#fff" />
109+
<path d="M240 45l8-8 8 8-8 8z" fill="#bd93f9" stroke="#fff" />
110+
</svg>
111+
{{ else if eq .type "diverging" }}
112+
<svg viewBox="0 0 320 150" role="img">
113+
<line x1="160" y1="24" x2="160" y2="126" stroke="#8a8580" stroke-dasharray="4 5" />
114+
<rect x="86" y="32" width="74" height="14" rx="3" fill="#a5d8ff" />
115+
<rect x="160" y="57" width="96" height="14" rx="3" fill="#bd93f9" />
116+
<rect x="114" y="82" width="46" height="14" rx="3" fill="#a5d8ff" />
117+
<rect x="160" y="107" width="52" height="14" rx="3" fill="#bd93f9" />
118+
</svg>
119+
{{ else if eq .type "map" }}
120+
<svg viewBox="0 0 320 150" role="img">
121+
<path d="M70 78c18-34 55-42 82-20 21-18 61-9 82 15 20 23-3 49-34 37-23 22-63 15-75-8-23 8-68 7-55-24z" fill="#d7c3ff" />
122+
<circle cx="112" cy="70" r="17" fill="#bd93f9" opacity="0.86" />
123+
<circle cx="184" cy="82" r="26" fill="#8fd3ff" opacity="0.82" />
124+
<circle cx="226" cy="63" r="12" fill="#ffbd4a" opacity="0.88" />
125+
</svg>
126+
{{ else if eq .type "race" }}
127+
<svg viewBox="0 0 320 150" role="img">
128+
<text x="42" y="34" fill="#59565d" font-size="13" font-weight="700">1998</text>
129+
<rect x="42" y="50" width="190" height="16" rx="4" fill="#bd93f9" />
130+
<rect x="42" y="77" width="145" height="16" rx="4" fill="#a5d8ff" />
131+
<rect x="42" y="104" width="104" height="16" rx="4" fill="#ffbd4a" />
132+
<path d="M249 45l24 20-24 20" fill="none" stroke="#59565d" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" opacity="0.55" />
133+
</svg>
134+
{{ else if eq .type "waffle" }}
135+
<svg viewBox="0 0 320 150" role="img">
136+
{{ range seq 0 9 }}
137+
{{ $row := . }}
138+
{{ range seq 0 13 }}
139+
{{ $col := . }}
140+
{{ $index := add (mul $row 14) $col }}
141+
<rect x="{{ add 46 (mul $col 16) }}" y="{{ add 24 (mul $row 11) }}" width="10" height="7" rx="2" fill="{{ if lt $index 88 }}#a5d8ff{{ else if lt $index 118 }}#bd93f9{{ else }}#ffbd4a{{ end }}" />
142+
{{ end }}
143+
{{ end }}
144+
</svg>
145+
{{ else if eq .type "publishers" }}
146+
<svg viewBox="0 0 320 150" role="img">
147+
<line x1="160" y1="28" x2="160" y2="124" stroke="#c6c2ba" />
148+
<circle cx="126" cy="42" r="8" fill="#a5d8ff" />
149+
<circle cx="196" cy="65" r="8" fill="#bd93f9" />
150+
<circle cx="152" cy="88" r="8" fill="#d6d3cd" />
151+
<circle cx="224" cy="111" r="8" fill="#bd93f9" />
152+
<g stroke="#ddd9d1"><line x1="70" y1="42" x2="250" y2="42"/><line x1="70" y1="65" x2="250" y2="65"/><line x1="70" y1="88" x2="250" y2="88"/><line x1="70" y1="111" x2="250" y2="111"/></g>
153+
</svg>
154+
{{ else }}
155+
<svg viewBox="0 0 320 150" role="img">
156+
<rect x="54" y="36" width="34" height="70" rx="3" fill="#bd93f9" />
157+
<rect x="96" y="24" width="34" height="82" rx="3" fill="#a5d8ff" />
158+
<rect x="138" y="46" width="34" height="60" rx="3" fill="#ffbd4a" />
159+
<rect x="180" y="31" width="34" height="75" rx="3" fill="#d7c3ff" />
160+
<rect x="222" y="55" width="34" height="51" rx="3" fill="#8fd3ff" />
161+
<rect x="44" y="108" width="222" height="12" rx="4" fill="#846358" />
162+
</svg>
163+
{{ end }}
164+
</div>
165+
<div class="viz-card-body">
166+
<h3>{{ .title }}</h3>
167+
<p>{{ .description }}</p>
168+
</div>
169+
</a>
170+
{{ end }}
171+
</section>

0 commit comments

Comments
 (0)