added and formatted poem

jordanlleslie · Nov 2, 2023 · 30ea1ad · 30ea1ad
1 parent 1b61153
commit 30ea1ad
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 35 deletions.
diff --git a/index.html b/index.html
@@ -6,17 +6,60 @@
     <script src="https://d3js.org/d3.v7.min.js"></script>
   </head>
   <body>
-    <header>
-      <h1 class="title">Static Vis Implementation</h1>
-    </header>
-    <div class="svg-container">
-      <svg id="svg"></svg>
-      <!-- TODO: Poem Layout -->
-      <!-- TODO: Add Poem -->
-    </div>
-    <div id="selection-bar">
-      <button id="select-numeracy" class="selection-btn active-button">Numeracy Chart</button>
-      <button id="select-pie" class="selection-btn">Pie Chart</button>
+      <div id="wrapper">
+        <div id="poem-container">
+          <h1 class="title">A typical conversation of mine <br> this summer in Taiwan</h1>
+          <ul class="verse" id="verse1">
+            <li>Hello, my (English) name is Jordan</li>
+            <li>Sorry, my Chinese isn't too good—</li>
+            <li>It's good! you insist,</li>
+            <li>But after a few minutes we move past formalities</li>
+            <li>And suddenly, defining</li>
+            <li>One word I don't know takes</li>
+            <li>Three words I don't know</li>
+            <li>And you try to help me, but language divides us</li>
+            <li>And I give up.</li>
+          </ul>
+          <ul class="verse" id="verse2">
+            <li>As a kid I learned Chinese from my mom</li>
+            <li>And from Sunday school.</li>
+            <li>As a kid I wasn't afraid</li>
+            <li>To open my mouth and speak in my family's language</li>
+            <li>But now, I think about</li>
+            <li>How the young clerk at the store insists on speaking English to me</li>
+            <li>And not his family's language,</li>
+            <li>How my friend laughs when I speak slowly,</li>
+            <li>How I use an app to translate with my own family,</li>
+            <li>How I can't remember how to write my own name,</li>
+            <li>And I hesitate.</li>
+          </ul>
+          <ul class="verse" id="verse3">
+            <li>It's hard to learn a language</li>
+            <li>In a world which treats language like an art,</li>
+            <li>In schools which teach language like a formula,</li>
+            <li>A middle school aged boy I taught</li>
+            <li>So afraid of being wrong</li>
+            <li>That he refused to open his lips.</li>
+          </ul>
+          <ul class="verse" id="verse4">
+            <li>Hello, my name is Jordan</li>
+            <li>I tell my grandmother's friend</li>
+            <li>He tells me that my Chinese is very good and I thank him.</li>
+            <li>He asks if he can practice his English with me, and</li>
+            <li>With every sentence, he smiles.</li>
+            <li>And then he tells me: </li>
+            <li>As long as we understand each other,</li>
+            <li>It doesn't matter how we speak.</li>
+          </ul>
+
+        </div>
+      <div class="svg-container">
+        <svg id="svg"></svg>
+        <div id="selection-bar">
+          <button id="select-numeracy" class="selection-btn active-button">Numeracy Chart</button>
+          <button id="select-pie" class="selection-btn">Pie Chart</button>
+        </div>
+      </div>
     </div>
     <script type="module" src="./main.js"></script>
   </body>

diff --git 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
@@ -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
@@ -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