-
Notifications
You must be signed in to change notification settings - Fork 0
/
sikdar.html
156 lines (144 loc) · 9.34 KB
/
sikdar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Gender, Migration and Literature</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<script src='https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Customization files -->
<!-- Be sure to set the API key and layer style in the JS file -->
<style>
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
<link href='custom.css' rel='stylesheet' />
</head>
<body>
<!-- This is where your map goes -->
<div id='map'></div>
<div id="features">
<section id="part_1" class="active">
<img src="titleimage.png" class ="title" width="100%">
<h1>SIKDAR'S A LIFE LONG AGO</h1>
<p>This map wants to look at not only the fiction around partition, but the real-life character (Sikdar) who went through partition and then wrote about partition, hoping to give the people who experience the map multiple layers (quite literally) to think through.
</p>
</section>
<section id="part_2">
<h1>GENDER AND DISPLACEMENT</h1>
<i class="bi bi-square-fill" style = "color: #eb720f;"> Male Paths</i>
<br>
<i class="bi bi-square-fill" style = "color: #1492db;"> Female Paths</i>
<br>
<p>
As we zoom in, we have a chance to examine the paths taken by the Male and Female characters in A Life Long Ago by Sunanda Sikdar. Characters of different genders travel various distances to reach places supposed to be ‘safe’. But, the map doesn’t necessarily tell that story. The stories, just like routes, are not necessarily simple or direct. We can think about where did these characters come from and where do they go to? </p>
</section>
<section id="part_3">
<h1>PATH INTERACTIONS</h1>
<i class="bi bi-square-fill" style = "color: #eb720f;"> Male Paths</i>
<br>
<i class="bi bi-square-fill" style = "color: #1492db;"> Female Paths</i>
<br>
<i class="bi bi-circle" style = "color: #3cad10;"> Postive Interactions</i>
<br>
<i class="bi bi-circle" style = "color: #ae0a0a;"> Negative Interactions</i>
<br>
<p>
As we zoom in further, we see where the author writes about incidents of conflict/violence and harmony on the characters’ paths. Sikdar writes about a home lost, a home tried to be forgotten, a home that one is not able to forget. As characters move homes and move lives, where do negative interactions occur more often on the paths? What do these stories say about negative interactions and positive ones in relation to the space its characters occupy? Does the character’s gender matter in where they are facing the conflict? Are the women in the story more likely to be involved in matters of harmony versus the men while on their migratory path? And what does thinking about these questions tell us about the event of partition itself? </p>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedPaths" checked onclick="myFunction1()">
<label class="form-check-label" for="flexSwitchCheckChecked">Paths</label>
<br>
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedInt" checked onclick="myFunction1()">
<label class="form-check-label" for="flexSwitchCheckChecked">Interactions</label>
</div>
</section>
<section id="part_4">
<h1>SIKDAR'S ORIGINAL HOME</h1>
<i class="bi bi-circle" style = "color: #3cad10;"> Postive Interactions</i>
<br>
<i class="bi bi-circle" style = "color: #ae0a0a;"> Negative Interactions</i>
<br>
<i class="bi bi-square-fill" style = "color: #0745a2;"> 111 kilometers</i>
<br>
<i class="bi bi-square-fill" style = "color: #89bdec;"> 222 kilometeres</i>
<br>
<p>
Sunanda Sikdar was born in Dighpait (in present Bangladesh) in the year of the partition - 1947, but after the migratory exodus took place. Still, her family was forced to move to Indian Kolkata in the 1950s. Sunana moved across the border when she was very young. As we map how the characters in her story move, there is another question that becomes important. The question of the author. Since Sikdar’s book is a memoir, the question of the author becomes more obvious, but not less important. As Sikdar migrated from erstwhile Pakistan to India, does she write about characters that migrate the same way? And does she write about characters going through conflict closer to their home towns or the towns they migrated to? Does where Sikdar was from play any role in how she writes? How does this now complicate the question of partition further?
</p>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDistH" checked onclick="myFunction2()">
<label class="form-check-label" for="flexSwitchCheckChecked">Distances</label>
<br>
</div>
</section>
<section id="part_5">
<h1>SIKDAR'S MIGRATORY HOME </h1>
<i class="bi bi-circle" style = "color: #3cad10;"> Postive Interactions</i>
<br>
<i class="bi bi-circle" style = "color: #ae0a0a;"> Negative Interactions</i>
<br>
<i class="bi bi-circle" style = "color: #ae0a0a;"> Negative Interactions</i>
<br>
<i class="bi bi-square-fill" style = "color: #370c55;"> 111 kilometers</i>
<br>
<i class="bi bi-square-fill" style = "color: #b170eb;"> 222 kilometeres</i>
<br>
<p>
Sikdar Migrated to Kolkata when she was a young girl. How must it have been to leave young friends behind, to leave a life behind when you are a child? How does this impact how the author perceives violence and harmony in relation to where she migrated to?
</p>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDistD" checked onclick="myFunction3()">
<label class="form-check-label" for="flexSwitchCheckChecked">Distances</label>
<br>
</div>
</section>
<section id="part_6">
<h1>OVERVIEW</h1>
<p>
This map wants to look at not only the fiction around partition, but the real-life character who went through partition and then wrote about partition, hoping to give the people who experience the map multiple layers (quite literally) to think through; and also an understanding that at the end of it, all the narratives we visualize are narratives - like in the event of partition, perhaps fact is not always easy to discern and maybe it really isn’t about the facts we discern but about what people felt, or thought they felt. Thus, here, the author’s imagination (their stories) and what we know about their life - come together to let the viewers experience partition as a composite of all these narratives , and derive their own questions about migration, gender, violence/conflict and harmony. </p>
<br>
<a href="manto.html" style = "margin: 10px;"class="btn btn-outline-secondary">Explore Mottled Dawn</a>
<a href="index.html" style = "margin: 10px;"class="btn btn-outline-secondary">Go Back Home</a>
</section>
</div>
<script>
function myFunction1() {
var checkBox1 = document.getElementById("flexSwitchCheckCheckedPaths");
var checkBox2 = document.getElementById("flexSwitchCheckCheckedInt");
if (checkBox1.checked == true){
map.setLayoutProperty('paths', 'visibility', 'visible');
} else {
map.setLayoutProperty('paths', 'visibility', 'none');
}
if (checkBox2.checked == true){
map.setLayoutProperty('interactions', 'visibility', 'visible');
} else {
map.setLayoutProperty('interactions', 'visibility', 'none');
}
}
function myFunction2() {
var checkBox1 = document.getElementById("flexSwitchCheckCheckedDistH");
var checkBox2 = document.getElementById("flexSwitchCheckCheckedDistD");
if (checkBox1.checked == true){
map.setLayoutProperty('home-rings', 'visibility', 'visible');
} else {
map.setLayoutProperty('home-rings', 'visibility', 'none');
}
}
function myFunction3() {
var checkBox2 = document.getElementById("flexSwitchCheckCheckedDistD");
if (checkBox2.checked == true){
map.setLayoutProperty('destination-rings', 'visibility', 'visible');
} else {
map.setLayoutProperty('destination-rings', 'visibility', 'none');
}
}
</script>
<script src="sikdar_interaction.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>