alicestrt/vvvw
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

changed colors, added class, legend, scroll

Browse Source
This commit is contained in:
alicestrt 2020-10-27 16:24:58 +01:00
parent c48a66303e
commit 90bd8affc9
4 changed files with 82 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
static/css/style.css
View File

@ -11,7 +11,7 @@
.container-fluid { .container-fluid {
overflow: hidden; overflow: hidden;
} }
/*
.bg { .bg {
/* background-image: url("/static/images/book.jpeg");*/ /* background-image: url("/static/images/book.jpeg");*/
/* background-image: linear-gradient(#CDCEC9, #9494A0, #652A2E); */ /* background-image: linear-gradient(#CDCEC9, #9494A0, #652A2E); */
@ -61,113 +61,34 @@ cursor: pointer;
/* Node styling */ /* Node styling */
#ahmed text { .group2 {
fill: #226270 ; fill: #92817a ;
font-size: 20px; font-size: 25px;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
} }
#mevlana text {
fill: #226270 ;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#haci text { .group1 {
fill: #226270 ; fill: #bedbbb;
font-size: 20px; font-size: 25px;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
} }
#dadaloglu text { .group4 {
fill: #703022; fill: #8db956;
font-size: 20px;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
font-size: 25px;
} }
#dedekorkut text { .group3 {
fill: #703022; fill: #707070;
font-size: 20px;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
} font-size: 25px;
#asikN text {
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#asikA text {
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#asikM text {
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#karacaoglan text {
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#asikV text {
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#neset text {
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#muharrem text {
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#aliekber text {
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#dedeoglu text {
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#pir text {
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#yunus text {
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#kulN text {
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
}
#kaygusuz text {
fill: #703022;
font-size: 20px;
font-family: 'Vesper Libre', serif;
} }
svg{ width:100%; height:100%; margin:0 auto;} svg{ width:100%; height:100%; margin:0 auto;}
@ -209,6 +130,12 @@ font-family: 'Vesper Libre', serif;
scrollbar-color: #cdcec9 #aeb10a; scrollbar-color: #cdcec9 #aeb10a;
} }
.scrollable {
overflow-y: scroll;
scroll-behavior: smooth;
overflow: hidden;
}
h1 { h1 {
font-size: 1.4em !important; font-size: 1.4em !important;

2
static/js/d3_map.js vendored
View File

@ -30,10 +30,12 @@ d3.json("/static/js/group1.json", function(error, json) {
.data(json.nodes) .data(json.nodes)
.enter().append("g") .enter().append("g")
.attr("class", "node ") .attr("class", "node ")
.attr("class", function(d){return "node group" + d.group})
// .node()classList.add(function(d){return d.group}); // .node()classList.add(function(d){return d.group});
.attr("id", function(d){return d.id}) .attr("id", function(d){return d.id})
// .style("fill",function (d) { return 'red'; }) // .style("fill",function (d) { return 'red'; })
// .on("click", function(d){ // .on("click", function(d){
// scrolldiv(d); // scrolldiv(d);

104
static/js/group1.json
View File

@ -3,315 +3,315 @@
"name": "Dadaloğlu", "name": "Dadaloğlu",
"group": 1, "group": 1,
"id": "dadaloglu", "id": "dadaloglu",
"time": "1" "time": 1
}, },
{ {
"name": "Dedekorkut", "name": "Dedekorkut",
"group": 1, "group": 1,
"id": "dedekorkut", "id": "dedekorkut",
"time": "1" "time": 1
}, },
{ {
"name": "Aşık Nesimi", "name": "Aşık Nesimi",
"group": 1, "group": 1,
"id": "asikN", "id": "asikN",
"time": "1" "time": 1
}, },
{ {
"name": "Aşık Ali İzzet", "name": "Aşık Ali İzzet",
"group": 1, "group": 1,
"id": "asikA", "id": "asikA",
"time": "1" "time": 1
}, },
{ {
"name": "Aşık Mahzuni Şerif", "name": "Aşık Mahzuni Şerif",
"group": 1, "group": 1,
"id": "asikM", "id": "asikM",
"time": "1" "time": 1
}, },
{ {
"name": "Karacaoğlan", "name": "Karacaoğlan",
"group": 1, "group": 1,
"id": "karacaoglan", "id": "karacaoglan",
"time": "1" "time": 1
}, },
{ {
"name": "Aşık Veysel", "name": "Aşık Veysel",
"group": 1, "group": 1,
"id": "asikV", "id": "asikV",
"time": "1" "time": 1
}, },
{ {
"name": "Neşet Ertaş", "name": "Neşet Ertaş",
"group": 1, "group": 1,
"id": "neset", "id": "neset",
"time": "1" "time": 1
}, },
{ {
"name": "Muharrem Ertaş", "name": "Muharrem Ertaş",
"group": 1, "group": 1,
"id": "muharrem", "id": "muharrem",
"time": "1" "time": 1
}, },
{ {
"name": "Ali Ekber Çiçek", "name": "Ali Ekber Çiçek",
"group": 1, "group": 1,
"id": "aliekber", "id": "aliekber",
"time": "1" "time": 1
}, },
{ {
"name": "Dedeoğlu", "name": "Dedeoğlu",
"group": 1, "group": 1,
"id": "dedeoglu", "id": "dedeoglu",
"time": "1" "time": 1
}, },
{ {
"name": "Pir Sultan Abdal", "name": "Pir Sultan Abdal",
"group": 1, "group": 1,
"id": "pir", "id": "pir",
"time": "1" "time": 1
}, },
{ {
"name": "Yunus Emre", "name": "Yunus Emre",
"group": 1, "group": 1,
"id": "yunus", "id": "yunus",
"time": "1" "time": 1
}, },
{ {
"name": "Kul Nesimi", "name": "Kul Nesimi",
"group": 1, "group": 1,
"id": "kulN", "id": "kulN",
"time": "1" "time": 1
}, },
{ {
"name": "Kaygusuz Abdal", "name": "Kaygusuz Abdal",
"group": 1, "group": 1,
"id": "kaygusuz", "id": "kaygusuz",
"time": "1" "time": 1
}, },
{ {
"name": "Ahmed Yesevi", "name": "Ahmed Yesevi",
"group": 2, "group": 2,
"id": "ahmedY", "id": "ahmedY",
"time": "1" "time": 1
}, },
{ {
"name": "Mevlana Celaleddin Rumi", "name": "Mevlana Celaleddin Rumi",
"group": 2, "group": 2,
"id": "mevlana", "id": "mevlana",
"time": "1" "time": 1
}, },
{ {
"name": "Hacı Bektaş-i Veli", "name": "Hacı Bektaş-i Veli",
"group": 2, "group": 2,
"id": "haci", "id": "haci",
"time": "1" "time": 1
}, },
{ {
"name": "Nazım Hikmet", "name": "Nazım Hikmet",
"group": 3, "group": 3,
"id": "nazim", "id": "nazim",
"time": "1" "time": 1
}, },
{ {
"name": "Ahmed Arif", "name": "Ahmed Arif",
"group": 3, "group": 3,
"id": "ahmedA", "id": "ahmedA",
"time": "1" "time": 1
}, },
{ {
"name": "Gülten Akın", "name": "Gülten Akın",
"group": 3, "group": 3,
"id": "gulten", "id": "gulten",
"time": "1" "time": 1
}, },
{ {
"name": "Nilgün Marmara", "name": "Nilgün Marmara",
"group": 3, "group": 3,
"id": "nilgun", "id": "nilgun",
"time": "1" "time": 1
}, },
{ {
"name": "Atilla İlhan", "name": "Atilla İlhan",
"group": 3, "group": 3,
"id": "atilla", "id": "atilla",
"time": "1" "time": 1
}, },
{ {
"name": "Lale Müldür", "name": "Lale Müldür",
"group": 3, "group": 3,
"id": "lale", "id": "lale",
"time": "1" "time": 1
}, },
{ {
"name": "Neyzen Tevfik", "name": "Neyzen Tevfik",
"group": 3, "group": 3,
"id": "neyzen", "id": "neyzen",
"time": "1" "time": 1
}, },
{ {
"name": "Melih Cevdet Anday", "name": "Melih Cevdet Anday",
"group": 3, "group": 3,
"id": "melih", "id": "melih",
"time": "1" "time": 1
}, },
{ {
"name": "Cahit Sıtkı Tarancı", "name": "Cahit Sıtkı Tarancı",
"group": 3, "group": 3,
"id": "cahit", "id": "cahit",
"time": "1" "time": 1
}, },
{ {
"name": "Orhan Veli Kanık", "name": "Orhan Veli Kanık",
"group": 3, "group": 3,
"id": "orhan", "id": "orhan",
"time": "1" "time": 1
}, },
{ {
"name": "Ruhi Su", "name": "Ruhi Su",
"group": 4, "group": 4,
"id": "ruhisu", "id": "ruhisu",
"time": "1" "time": 1
}, },
{ {
"name": "Asu Maralman", "name": "Asu Maralman",
"group": 4, "group": 4,
"id": "asu", "id": "asu",
"time": "1" "time": 1
}, },
{ {
"name": "Ceylan Ertem", "name": "Ceylan Ertem",
"group": 4, "group": 4,
"id": "ceylan", "id": "ceylan",
"time": "1" "time": 1
}, },
{ {
"name": "Ahmet Kaya", "name": "Ahmet Kaya",
"group": 4, "group": 4,
"id": "ahmet", "id": "ahmet",
"time": "1" "time": 1
}, },
{ {
"name": "Fazıl Say", "name": "Fazıl Say",
"group": 4, "group": 4,
"id": "fazil", "id": "fazil",
"time": "1" "time": 1
}, },
{ {
"name": "Selda Bağcan", "name": "Selda Bağcan",
"group": 4, "group": 4,
"id": "selda", "id": "selda",
"time": "1" "time": 1
}, },
{ {
"name": "Sezen Aksu", "name": "Sezen Aksu",
"group": 4, "group": 4,
"id": "sezen", "id": "sezen",
"time": "1" "time": 1
}, },
{ {
"name": "Büyük Ev Ablukada", "name": "Büyük Ev Ablukada",
"group": 4, "group": 4,
"id": "buyuk", "id": "buyuk",
"time": "1" "time": 1
}, },
{ {
"name": "Sümeyra Çakır", "name": "Sümeyra Çakır",
"group": 4, "group": 4,
"id": "sumeyra", "id": "sumeyra",
"time": "1" "time": 1
}, },
{ {
"name": "Cem Karaca", "name": "Cem Karaca",
"group": 4, "group": 4,
"id": "cem", "id": "cem",
"time": "1" "time": 1
}, },
{ {
"name": "Barış Manço", "name": "Barış Manço",
"group": 4, "group": 4,
"id": "baris", "id": "baris",
"time": "1" "time": 1
}, },
{ {
"name": "Ayfer Vardar", "name": "Ayfer Vardar",
"group": 4, "group": 4,
"id": "ayfer", "id": "ayfer",
"time": "1" "time": 1
}, },
{ {
"name": "Tülay German", "name": "Tülay German",
"group": 4, "group": 4,
"id": "tulay", "id": "tulay",
"time": "1" "time": 1
}, },
{ {
"name": "Ezhel", "name": "Ezhel",
"group": 4, "group": 4,
"id": "ezhel", "id": "ezhel",
"time": "1" "time": 1
}, },
{ {
"name": "Neşe Karaböcek", "name": "Neşe Karaböcek",
"group": 4, "group": 4,
"id": "nese", "id": "nese",
"time": "1" "time": 1
}, },
{ {
"name": "Erkin Koray", "name": "Erkin Koray",
"group": 4, "group": 4,
"id": "erkin", "id": "erkin",
"time": "1" "time": 1
}, },
{ {
"name": "Moğollar", "name": "Moğollar",
"group": 4, "group": 4,
"id": "mogollar", "id": "mogollar",
"time": "1" "time": 1
}, },
{ {
"name": "Fikret Kızılok", "name": "Fikret Kızılok",
"group": 4, "group": 4,
"id": "fikret", "id": "fikret",
"time": "1" "time": 1
}, },
{ {
"name": "3 Hürel", "name": "3 Hürel",
"group": 4, "group": 4,
"id": "3hurel", "id": "3hurel",
"time": "1" "time": 1
}, },
{ {
"name": "Levent Yüksel", "name": "Levent Yüksel",
"group": 4, "group": 4,
"id": "levent", "id": "levent",
"time": "1" "time": 1
}, },
{ {
"name": "Serdar Ateşer", "name": "Serdar Ateşer",
"group": 4, "group": 4,
"id": "serdar", "id": "serdar",
"time": "1" "time": 1
}, },
{ {
"name": "Hümeyra", "name": "Hümeyra",
"group": 4, "group": 4,
"id": "humeyra", "id": "humeyra",
"time": "1" "time": 1
}, },
{ {
"name": "MFÖ", "name": "MFÖ",
"group": 4, "group": 4,
"id": "mfo", "id": "mfo",
"time": "1" "time": 1
}, },
{ {
"name": "İlhan Mimaroğlu", "name": "İlhan Mimaroğlu",
"group": 4, "group": 4,
"id": "ilhan", "id": "ilhan",
"time": "1" "time": 1
} }
], ],
"links": [{ "links": [{

8
templates/hello.html
View File

@ -8,8 +8,14 @@
<div class="map_area"> <div class="map_area">
<script src="../static/js/d3_map.js"></script> <script src="../static/js/d3_map.js"></script>
</div> </div>
<div class="row">
<div class="col-md-12">
<p>Map legend</p>
</div>
</div>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<div class="scrollable">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<!-- <p>Merve's thesis</p> --> <!-- <p>Merve's thesis</p> -->
@ -33,7 +39,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>