Skip to content

Commit 72094a2

Browse files
SpaceMercurySpaceMercury
authored
Merge pull request #15 from com-480-data-visualization/fuentes-additions
Fuentes additions
2 parents af74654 + bf4476a commit 72094a2

7 files changed

Lines changed: 127 additions & 1 deletion

File tree

‎website/content/_index.md‎

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

12-
# Visualizations
12+
# Visualizations {#visualizations}
1313

1414
## Project visualizations
1515

@@ -21,3 +21,5 @@ A powerful, lightweight visualization for COM-480 built with Hugo, Tailwind CSS.
2121
- [Languages](visualizations/languages/): see the distribution of books by language as a waffle chart.
2222
- [Publishers](visualizations/publishers/): compare gender representation across major publishers.
2323
- [Library](visualizations/library/): browse and filter books on an interactive shelf.
24+
25+
{{< team-profile >}}

‎website/content/visualizations/gender-explorator/index.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ tags: ["d3", "visualization"]
55
layout: "simple"
66
---
77

8+
This view explores gender disparity across book genres and author nationalities by showing whether each category leans more toward men-led or women-led authorship.
9+
10+
Change the sorting and number of rows to highlight the largest categories, the strongest disparities, or the categories closest to parity.
11+
12+
Move the row slider and change the sorting mode to make different stories surface: big categories first, sharpest gaps next, and quieter near-parity cases when you want a closer look.
13+
814
<!-- prettier-ignore-start -->
915
{{< d3 >}}
1016
const root = d3.select(container)

‎website/content/visualizations/gender-explorer/index.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ tags: ["d3", "visualization"]
55
layout: "simple"
66
---
77

8+
This filtered comparison lets you select either book genres or author nationalities, then compare the total number of books attributed to male, female, and other authorship groups.
9+
10+
Use the filters to focus on specific categories and see how the gender distribution changes across different slices of the Goodreads dataset.
11+
12+
Try switching between genres and nationalities, then raise the minimum-books slider to let the small categories step aside and reveal the bigger patterns.
13+
814
<!-- prettier-ignore-start -->
915
{{< d3 >}}
1016
const comparisonRoot = d3.select(container)

‎website/content/visualizations/gender-genre-scatter/index.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ tags: ["d3", "visualization"]
55
layout: "simple"
66
---
77

8+
This scatterplot compares average book price and average rating for male and non-male author groups across genres or author nationalities.
9+
10+
Each point summarizes one category, making it easier to see whether rating and price patterns differ between gender groups for the same part of the dataset.
11+
12+
Use the group selector and the minimum-books slider to clean up the cloud of points, then hover around to spot the categories that behave a little differently from the rest.
13+
814
<!-- prettier-ignore-start -->
915
{{< d3 >}}
1016
const scatterRoot = d3.select(container)

‎website/layouts/_partials/visualization-nav.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{{ $items := slice
2+
(dict "title" "Gender explorer - filtered comparison" "url" "/visualizations/gender-explorer/")
3+
(dict "title" "The gender-genre scatter" "url" "/visualizations/gender-genre-scatter/")
4+
(dict "title" "Gender explorator" "url" "/visualizations/gender-explorator/")
5+
(dict "title" "Cartogram" "url" "/visualizations/cartogram/")
6+
(dict "title" "Bar race" "url" "/visualizations/bar-race/")
7+
(dict "title" "Languages" "url" "/visualizations/languages/")
8+
(dict "title" "Publishers" "url" "/visualizations/publishers/")
9+
(dict "title" "Library" "url" "/visualizations/library/")
10+
}}
11+
12+
{{ $current := .RelPermalink }}
13+
{{ $currentIndex := -1 }}
14+
{{ range $index, $item := $items }}
15+
{{ if eq $current ($item.url | relURL) }}
16+
{{ $currentIndex = $index }}
17+
{{ end }}
18+
{{ end }}
19+
20+
{{ if ge $currentIndex 0 }}
21+
{{ $lastIndex := sub (len $items) 1 }}
22+
{{ $home := dict "title" "Home" "url" "/" }}
23+
{{ $previous := cond (eq $currentIndex 0) $home (index $items (sub $currentIndex 1)) }}
24+
{{ $next := cond (eq $currentIndex $lastIndex) $home (index $items (add $currentIndex 1)) }}
25+
26+
<nav class="not-prose mt-12 flex flex-wrap items-center justify-between gap-8 border-t border-neutral-200 pt-8 dark:border-neutral-700">
27+
<a
28+
class="group inline-flex max-w-full items-center gap-4 text-neutral-700 transition hover:text-primary-700 dark:text-neutral-200 dark:hover:text-primary-300"
29+
href="{{ $previous.url | relURL }}"
30+
>
31+
<span class="text-5xl leading-none transition group-hover:-translate-x-1" aria-hidden="true">&larr;</span>
32+
<span class="min-w-0">
33+
<span class="block text-sm font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Back</span>
34+
<span class="block text-2xl font-bold leading-tight">{{ $previous.title }}</span>
35+
</span>
36+
</a>
37+
38+
<a
39+
class="group inline-flex max-w-full items-center gap-4 text-right text-primary-800 transition hover:text-primary-950 dark:text-primary-200 dark:hover:text-primary-300"
40+
href="{{ $next.url | relURL }}"
41+
>
42+
<span class="min-w-0">
43+
<span class="block text-sm font-semibold uppercase tracking-wide text-primary-600 dark:text-primary-300">Next</span>
44+
<span class="block text-2xl font-bold leading-tight">{{ $next.title }}</span>
45+
</span>
46+
<span class="text-5xl leading-none transition group-hover:translate-x-1" aria-hidden="true">&rarr;</span>
47+
</a>
48+
</nav>
49+
{{ end }}

‎website/layouts/shortcodes/team-profile.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{{ $author := site.Language.Params.Author }}
2+
{{ $lazy := site.Params.enableImageLazyLoading | default true }}
3+
4+
<section class="not-prose mt-12 flex flex-col items-center text-center">
5+
{{ with $author.image }}
6+
{{ with resources.Get . }}
7+
{{ $teamImage := .Fill "96x96 Center" }}
8+
<img
9+
src="{{ $teamImage.RelPermalink }}"
10+
width="96"
11+
height="96"
12+
alt="{{ $author.name | default site.Title }}"
13+
class="mb-3 rounded-full"
14+
style="width: 96px; height: 96px; object-fit: cover;"
15+
{{ with $lazy }}loading="lazy" decoding="async"{{ end }}
16+
/>
17+
{{ end }}
18+
{{ end }}
19+
<h2 class="mb-1 text-2xl font-bold text-neutral-800 dark:text-neutral-100">
20+
{{ $author.name | default site.Title }}
21+
</h2>
22+
{{ with $author.headline }}
23+
<p class="mb-1 text-base text-neutral-500 dark:text-neutral-400">
24+
{{ . | markdownify | emojify }}
25+
</p>
26+
{{ end }}
27+
{{ with $author.bio }}
28+
<p class="mb-2 max-w-xl text-sm text-neutral-600 dark:text-neutral-300">
29+
{{ . | markdownify | emojify }}
30+
</p>
31+
{{ end }}
32+
<div class="text-xl">
33+
{{ partialCached "author-links.html" . }}
34+
</div>
35+
</section>

‎website/layouts/simple.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{{ define "main" }}
2+
<article class="max-w-full">
3+
<header>
4+
{{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
5+
{{ partial "breadcrumbs.html" . }}
6+
{{ end }}
7+
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
8+
{{ .Title | emojify }}
9+
</h1>
10+
</header>
11+
<section class="prose mt-6 max-w-full dark:prose-invert">
12+
{{ .Content | emojify }}
13+
</section>
14+
<footer class="pt-8">
15+
{{ if eq .Section "visualizations" }}
16+
{{ .Scratch.Set "visualizationNavPlacement" "bottom" }}
17+
{{ partial "visualization-nav.html" . }}
18+
{{ end }}
19+
{{ partial "sharing-links.html" . }}
20+
</footer>
21+
</article>
22+
{{ end }}

0 commit comments

Comments
 (0)