-
-
+
+
+
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