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

added d3 map in hello.html and clisks are working

master
nglk 4 years ago
parent
19c2ba56f0
commit
039578bc1a
8 changed files with 256 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      hello.py
  2. 17
      static/css/style.css
  3. 109
      static/js/d3_map.js
  4. 21
      static/js/test.json
  5. 1
      templates/base.html
  6. 64
      templates/hello.html
  7. 72
      testing/index.html
  8. 6
      testing/test.json

17
hello.py
View File

@ -1,5 +1,6 @@
from flask import Flask
from flask import render_template
from flask import render_template, jsonify
app = Flask(__name__)
@ -22,12 +23,8 @@ def hello_world():
@app.route('/hello/<name>')
@app.route('/perspectiveB/')
def perspectiveB():
return render_template('perspectiveB.html')
@app.route('/perspectiveA/')
def perspectiveA():
return render_template('perspectiveA.html')
@app.route('/perspectiveC/')
def perspectiveC():
return render_template('perspectiveC.html')
@app.route("/get-data")
def get_data():
return jsonify({"a": 1, "b": 2})

17
static/css/style.css
View File

@ -47,8 +47,9 @@ stroke-dasharray:6px;
/* text area */
.thesis {
overflow-y: scroll;
max-height:500px;
max-height:300px;
scroll-behavior: smooth;
font-size: 1.2em;
}
/* background audio */
@ -106,8 +107,20 @@ draggable {
/* pop up */
#show1 {
#showdadaloglu,#showmuharrem {
display: none;
left: 20%;
width: 23% !important;
}
/*d3 map*/
.link {
stroke: #ccc;
}
.node text {
pointer-events: none;
font: 1em sans-serif;
}

109
static/js/d3_map.js
View File

@ -0,0 +1,109 @@
var width = 960,
height = 500
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var force = d3.layout.force()
.gravity(0.05)
.distance(100)
.charge(-100)
.size([width, height]);
d3.json("/static/js/test.json", function(error, json) {
if (error) throw error;
force
.nodes(json.nodes)
.links(json.links)
.start();
var link = svg.selectAll(".link")
.data(json.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", "node")
.attr("id", function(d){return d.id})
// .on("click", function(d){
// scrolldiv(d);
// play(d);
// popup(d);
// })
.call(force.drag);
node.append("image")
.attr("xlink:href", "/static/images/circle.png")
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16);
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
// scripts for mouse events
// popup
// function popup() {
$("#dadaloglu").click(function(){
$("#showdadaloglu").fadeIn()
console.log("around")
var dada = document.getElementById("textdadaloglu");
dada.scrollIntoView();
var audio1 = document.getElementById("audio-1");
audio1.currentTime = 12;
audio1.play();
});
$("#muharrem").click(function(){$("#showmuharrem").fadeIn()
console.log("around")
var muh = document.getElementById("textmuharrem");
muh.scrollIntoView();
var audio2 = document.getElementById("audio-1");
audio2.currentTime = 50;
audio2.play();
});
// };
$(document).click(function (e) {
if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
$("#showdadaloglu").fadeOut();
$("#audiodadaloglu").trigger('pause');
};
if (!$(e.target).parents().andSelf().is('#muharrem')) {
$("#showmuharrem").fadeOut();
$("audiomuharrem").trigger('pause');
};
});
// scroll
// $("#dadaloglu").click(function(){
// var elem = document.getElementById("ele");
// elem.scrollIntoView();
// });
});

21
static/js/test.json
View File

@ -0,0 +1,21 @@
{
"nodes": [
{
"name": "Dadaloglu",
"group": 1,
"id":"dadaloglu"
},
{
"name": "Muharrem Ertas",
"group": 1,
"id":"muharrem"
}
],
"links": [
{
"source": 1,
"target": 0,
"value": 1
}
]
}

1
templates/base.html
View File

@ -5,6 +5,7 @@
<title>{% block title %}VVVW{% endblock %}</title>
<link rel="stylesheet" href="../static/css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://d3js.org/d3.v3.min.js"></script>
</script>
{% endblock %}

64
hello.html → templates/hello.html
View File

@ -7,29 +7,13 @@
<div class="row">
<div class="col-md-9">
<div class="map_area">Map area
<div class="row">
<div class="col-md-1 col-sm-4">
<svg id="first_circle" onclick="scrolldiv();play();">
<circle cx="50" cy="50" r="2rem" stroke="green" stroke-width="4" fill="yellow" />
<text id="angela" x="50" y="50" text-anchor="middle">hello </text>
</svg>
</div>
<div class="col-md-1 col-sm-4">
<svg id="second_circle">
<circle cx="50" cy="50" r='2rem' stroke="red" stroke-width="2" fill="gray" />
<text x="50" y="50" text-anchor="middle">hello boys </text>
</svg>
</div>
</div>
<script src="../static/js/d3_map.js"></script>
</div>
<div class="col-md-9">
<audio id='audio-1' controls>
<source src="../static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</audio>
</div>
</div>
<div class="col-md-3">
@ -37,10 +21,14 @@
<div class="col-md-10">
<div class="image_area">
<p>image</p>
<div id="show1"><audio controls>
<div id="showdadaloglu"><audio id="audiodadaloglu" controls>
<source src="../static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio></div>
<div id="showmuharrem"><audio id="audiomuharrem" controls>
<source src="../static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio></div>
<img src="../static/images/test_small.jpeg" alt="poem">
</div>
</div>
@ -60,13 +48,13 @@
myself - A female artist from Turkey - and of us - the un/under/misrepresented multitude. I believe this endeavour will unravel not only the history of Turkey but will shed a light on the processes of modernism under the influence of
major global actors(?).</span>
<span id='ele'>Digging through my memory, I find myself in the Turquoise Impala of my grandfather, driving up the Kayseri mountain, hearing his voice chanting a poem out of the blue. Or suddenly I’m facing one of the spontaneous tests of
<span id='textdadaloglu'>Digging through my memory, I find myself in the Turquoise Impala of my grandfather, driving up the Kayseri mountain, hearing his voice chanting a poem out of the blue. Or suddenly I’m facing one of the spontaneous tests of
my other grand
father in Istanbul, asking me to name the tune of the Ottoman-Turkish music we are listening to. My personal memories are as scattered as the collective memory of our chaotic semi island, Anatolia. Yet if one wants to take a walk
towards
the roots of this land and it’s settlers, the tunes and poems will reveal them selves as the bread crumbs guiding the way.</span>
<span> How does the cultural knowledge travel and transform in time? What forms does it take, why and how do they sustain their presence in our lives? Not only as an artist but as an individual in search of a better present and in
<span id="textmuharrem"> How does the cultural knowledge travel and transform in time? What forms does it take, why and how do they sustain their presence in our lives? Not only as an artist but as an individual in search of a better present and in
anticipation
and aspiration of a revolution, I try to answer these questions by investigating cultural production methods and develop an alternative reading of the common history.</span>
<span> Knowledge in its most delicate form was first contained in the minds of people who would live in small communities. The elders, the more experienced, would be the ones to teach/pass on the knowledge that they would carry along
@ -80,24 +68,28 @@
</div>
</div>
</div>
<!-- scripts for mouse events -->
<script>
$("#angela").click(function() {
$("#show1").fadeIn()
console.log("around")
});
// function popup(d) {
// $(d).click(function(){
// $("#show1").fadeIn()
// console.log("around")
// })};
function scrolldiv() {
var elem = document.getElementById("ele");
elem.scrollIntoView();
}
function play() {
var audio = document.getElementById("audio-1");
audio.currentTime=12;
audio.play();
}
// document.getElementById("audio-1").loop = true;
</script>
// function scrolldiv() {
// var elem = document.getElementById("ele");
// elem.scrollIntoView();
// }
// function play() {
// var audio = document.getElementById("audio-1");
// audio.currentTime = 12;
// audio.play();
// }
</script>
{% endblock %}

72
testing/index.html
View File

@ -11,9 +11,47 @@
font: 10px sans-serif;
}
.thesis {
overflow-y: scroll;
max-height:100px;
scroll-behavior: smooth;
width:20%;
font-size: .5em;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<div class="thesis">
<span>People since the beginning have been gathering around certain sources of knowledge creating a specific reading/understanding of the world around them. Accumulated from different sources, what is inherited shapes the minds of
individuals,
communities and societies. Often times the cultural productions that happen in reverberance to these processes guide the researchers as they become an archive - a memory space for collective affects of former and contemporary societies.
Aware of my lack of knowledge on all the processes of inheriting from my own history; geographically, ethnically and politically, I attempt to understand the effects of the accumulated sets of knowledge on the actions and behaviour of
myself - A female artist from Turkey - and of us - the un/under/misrepresented multitude. I believe this endeavour will unravel not only the history of Turkey but will shed a light on the processes of modernism under the influence of
major global actors(?).</span>
<span id='ele'>Digging through my memory, I find myself in the Turquoise Impala of my grandfather, driving up the Kayseri mountain, hearing his voice chanting a poem out of the blue. Or suddenly I’m facing one of the spontaneous tests of
my other grand
father in Istanbul, asking me to name the tune of the Ottoman-Turkish music we are listening to. My personal memories are as scattered as the collective memory of our chaotic semi island, Anatolia. Yet if one wants to take a walk
towards
the roots of this land and it’s settlers, the tunes and poems will reveal them selves as the bread crumbs guiding the way.</span>
<span> How does the cultural knowledge travel and transform in time? What forms does it take, why and how do they sustain their presence in our lives? Not only as an artist but as an individual in search of a better present and in
anticipation
and aspiration of a revolution, I try to answer these questions by investigating cultural production methods and develop an alternative reading of the common history.</span>
<span> Knowledge in its most delicate form was first contained in the minds of people who would live in small communities. The elders, the more experienced, would be the ones to teach/pass on the knowledge that they would carry along
their
lives. The inherited knowledge can be the secrets of crafts, food processing- like cheese or meat-, healing methods/recipes, rituals, requiems or stories on braveries, travels, battles and looses. All of these resources relate to
specific
figures in the societies and they</span>
</div>
<script>
function scrolldiv() {
var elem = document.getElementById("ele");
elem.scrollIntoView();
}
</script>
<script>
var width = 960,
@ -46,6 +84,8 @@ d3.json("test.json", function(error, json) {
.data(json.nodes)
.enter().append("g")
.attr("class", "node")
.attr("id", function(d){return d.id})
.attr("onclick", "scrolldiv()")
.call(force.drag);
node.append("image")
@ -67,7 +107,37 @@ d3.json("test.json", function(error, json) {
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
// var nodeA=d3.select("#dadaloglou")
// .attr("id", "dadaloglou")
// .attr("onclick", "scrolldiv()")
// var nodeA=d3.select("dadaloglu")
// nodeA.on("click", function() {
// var elem = document.getElementById("ele");
// elem.scrollIntoView();
// });
// d3.selectAll('.node').each(function(d) {
// d.element = this;
// });
//
// var id, node = search(root, x, y);
// if (node) {
// id = node.element.getAttribute('id');
// }
//
//
// var nodeA=d3.select("#dadaloglu").attr('id')
// nodeA.on("click", scrolldiv);
});
});
</script>

6
testing/test.json
View File

@ -2,11 +2,13 @@
"nodes": [
{
"name": "Dadaloglu",
"group": 1
"group": 1,
"id":"dadaloglu"
},
{
"name": "Muharrem Ertas",
"group": 1
"group": 1,
"id":"muharrem"
}
],
"links": [

Write Preview
Loading…
Cancel
Save