Browse Source

fixed legend, changed some dimensions

master
alicestrt 4 years ago
parent
commit
d8008847f2
  1. 49
      static/css/style.css
  2. 8
      static/js/d3_map.js
  3. 3
      templates/hello.html

49
static/css/style.css

@ -27,6 +27,7 @@
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
margin-right: 10px; margin-right: 10px;
margin-left: 20px;
} }
.media_area { .media_area {
margin-top: 10px; margin-top: 10px;
@ -63,7 +64,7 @@ cursor: pointer;
.group2 { .group2 {
fill: #92817a ; fill: #92817a ;
font-size: 15px; font-size: 18px;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
} }
@ -71,14 +72,14 @@ cursor: pointer;
.group1 { .group1 {
fill: #bedbbb; fill: #bedbbb;
font-size: 15px; font-size: 18px;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
} }
.group4 { .group4 {
fill: #8db956; fill: #8db956;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
font-size: 15px; font-size: 18px;
} }
@ -86,12 +87,17 @@ cursor: pointer;
.group3 { .group3 {
fill: #707070; fill: #707070;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
font-size: 15px; font-size: 18px;
} }
svg{ width:100%; height:100%; margin:0 auto;} svg{
width:100%;
height:100%;
margin-left: 30px;
margin-top: 10px;
}
path{ path{
fill: transparent; fill: transparent;
stroke: #000; stroke: #000;
@ -109,18 +115,14 @@ stroke-dasharray:6px;
} }
#map_div p{ position:absolute; padding:50px; top:200px; width:0; height:0; border-radius:50%; }
.c1{ padding:20px; top:220px; left:10%; background:red; }
.c2{ left:50%; background:blue; }
.c3{ left:30%; background: yellow;}
/* map legend */ /* map legend */
.box1 { .box1 {
height: 15px; height: 15px;
width: 15px; width: 15px;
margin-left : 15px; margin-left : 10px;
margin-top: 10px; margin-top: 10px;
display: inline-block;
background-color: #bedbbb; background-color: #bedbbb;
} }
@ -128,38 +130,49 @@ stroke-dasharray:6px;
.box2 { .box2 {
height: 15px; height: 15px;
width: 15px; width: 15px;
margin-left : 15px; margin-left : 10px;
margin-top: 10px; margin-top: 10px;
background-color: #92817a; background-color: #92817a;
display: inline-block;
} }
.box3 { .box3 {
height: 15px; height: 15px;
width: 15px; width: 15px;
margin-left : 15px; margin-left : 10px;
margin-top: 10px; margin-top: 10px;
background-color: #707070; background-color: #707070;
display: inline-block;
} }
.box4 { .box4 {
height: 15px; height: 15px;
width: 15px; width: 15px;
margin-left : 15px; margin-left : 10px;
margin-top: 10px; margin-top: 10px;
display: inline-block;
background-color: #8db956; background-color: #8db956;
} }
.map_legend p { .map_legend p {
padding-left: 15px; padding-left: 5px;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
display: inline;
font-size: 15px;
}
#legend_title {
font-family: 'Vesper Libre', serif;
font-size: 20px;
padding-left: 10px;
} }
/* text area */ /* text area */
.thesis { .thesis {
overflow-y: scroll; overflow-y: scroll;
max-height:480px; max-height:450px;
scroll-behavior: smooth; scroll-behavior: smooth;
font-size: 1em; font-size: 1em;
border: 1px black solid; border: 1px black solid;

8
static/js/d3_map.js

@ -7,9 +7,9 @@ var svg = d3.select(".map_area").append("svg")
.attr("viewBox", `${-width/3.1} ${-height/2.3} ${width*2.5} ${height*2.5}`); .attr("viewBox", `${-width/3.1} ${-height/2.3} ${width*2.5} ${height*2.5}`);
var force = d3.layout.force() var force = d3.layout.force()
.gravity(0.01) .gravity(0.009)
.distance(300) .distance(250)
.charge(-50) .charge(-30)
.size([width, height]); .size([width, height]);
@ -70,7 +70,7 @@ d3.json("/static/js/group1.json", function(error, json) {
.attr("y2", function(d) { return d.target.y; }); .attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
// node.each(collide(0.5)); //Added
}); });

3
templates/hello.html

@ -10,8 +10,9 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<p id="legend_title">Map legend</p>
<div class="map_legend"> <div class="map_legend">
<p>Map legend</p>
<div class="box1"></div> <p>Folklore literature</p> <div class="box1"></div> <p>Folklore literature</p>
<div class="box2"></div> <p>Islamic Mysticism</p> <div class="box2"></div> <p>Islamic Mysticism</p>
<div class="box3"></div> <p>Contemporary poets</p> <div class="box3"></div> <p>Contemporary poets</p>

Loading…
Cancel
Save