From 30ea1adf9cad9f928ebceebbffb617818c3e7c6e Mon Sep 17 00:00:00 2001 From: Jordan Leslie Date: Thu, 2 Nov 2023 14:55:12 -0400 Subject: [PATCH] added and formatted poem --- index.html | 65 +++++++++++++++++++++++++++++++++++------- main.js | 6 ++-- styles.css | 56 ++++++++++++++++++++++-------------- utils/numeracyChart.js | 1 + 4 files changed, 93 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index e899e45..3ea353a 100644 --- a/index.html +++ b/index.html @@ -6,17 +6,60 @@ -
-

Static Vis Implementation

-
-
- - - -
-
- - +
+
+

A typical conversation of mine
this summer in Taiwan

+
    +
  • Hello, my (English) name is Jordan
    • +
  • Sorry, my Chinese isn't too good—
    • +
  • It's good! you insist,
    • +
  • But after a few minutes we move past formalities
    • +
  • And suddenly, defining
    • +
  • One word I don't know takes
    • +
  • Three words I don't know
    • +
  • And you try to help me, but language divides us
    • +
  • And I give up.
    • +
+
    +
  • As a kid I learned Chinese from my mom
    • +
  • And from Sunday school.
    • +
  • As a kid I wasn't afraid
    • +
  • To open my mouth and speak in my family's language
    • +
  • But now, I think about
    • +
  • How the young clerk at the store insists on speaking English to me
    • +
  • And not his family's language,
    • +
  • How my friend laughs when I speak slowly,
    • +
  • How I use an app to translate with my own family,
    • +
  • How I can't remember how to write my own name,
    • +
  • And I hesitate.
    • +
+
    +
  • It's hard to learn a language
    • +
  • In a world which treats language like an art,
    • +
  • In schools which teach language like a formula,
    • +
  • A middle school aged boy I taught
    • +
  • So afraid of being wrong
    • +
  • That he refused to open his lips.
    • +
+
    +
  • Hello, my name is Jordan
    • +
  • I tell my grandmother's friend
    • +
  • He tells me that my Chinese is very good and I thank him.
    • +
  • He asks if he can practice his English with me, and
    • +
  • With every sentence, he smiles.
    • +
  • And then he tells me:
    • +
  • As long as we understand each other,
    • +
  • It doesn't matter how we speak.
    • +
+ +
+
+ +
+ + +
+
diff --git a/main.js b/main.js index f4502ca..72a6199 100644 --- a/main.js +++ b/main.js @@ -2,8 +2,8 @@ import numeracyChart from "./utils/numeracyChart.js"; import pieChart from "./utils/pieChart.js"; let chart, chartWidth, chartHeight; -const svgWidth = 600; -const svgHeight = 400; +const svgWidth = 700; +const svgHeight = 450; let svg = d3.select("#svg"); let discrimination_experiences, correction_reasons; @@ -49,7 +49,7 @@ function initializeSVG() { .attr("x", svgWidth / 2) .attr("y", 40) .attr("text-anchor", "middle") - .style("font-size", "18px") + .style("font-size", "20px") .text(""); } diff --git a/styles.css b/styles.css index 2620ae0..ec008eb 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,5 @@ html { - font-family: sans-serif; + font-family: serif; } body, @@ -8,22 +8,26 @@ p { margin: 0; padding: 0; } -.title { - padding: 20px; - font-weight: normal; - text-align: center; -} body { - display: flex; - flex-direction: column; - align-items: center; + padding-left: 5%; +} + +.title { + padding: 40px 0; + font-weight: normal; } .svg-container { display: flex; - justify-content: center; align-items: center; + flex-direction: column; + margin-left: 100px; + background-color: #eee; + padding-top: 40px; + width: 100%; + flex: 3; + min-width: 600px; } #next-statement-btn, @@ -42,10 +46,6 @@ body { opacity: 0.1; } -#svg { - background-color: #eee; -} - #discrimination-statement { font-style: italic; } @@ -58,15 +58,12 @@ body { } #selection-bar { - margin: 16px; + margin-top: 16px; } .selection-btn { - background-color: #eee; border: none; margin: 0; - padding: 4px; - display: inline; color: #777; font-size: 16px; } @@ -75,7 +72,24 @@ body { color: #000; } -p { - margin-top: 30px; - width: 50%; +li { + list-style-type: none; +} + +.verse { + margin: 0; + margin-bottom: 2rem; + padding: 0; + font-size: 20px; +} + +#wrapper { + display: flex; + flex-direction: row; + width: 100%; + max-height: 100%; +} + +#poem-container { + flex: 2; } diff --git a/utils/numeracyChart.js b/utils/numeracyChart.js index 79aaee1..a29fc1d 100644 --- a/utils/numeracyChart.js +++ b/utils/numeracyChart.js @@ -107,6 +107,7 @@ function singleNumeracyChart(statement, chart) { .attr("y", chartHeight - padding * 3) .attr("x", xPosition) .style("visibility", "hidden") + .style("font-size", "20px") .style("fill", colors[key]); // Show label when hovering category