made d3 experiments
This commit is contained in:
parent
2d92d16c0a
commit
73a29989a0
103
hello_copy
Normal file
103
hello_copy
Normal file
@ -0,0 +1,103 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Hello{% endblock %}
|
||||
{% block body %}
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="row">
|
||||
<div class="col-md-10">
|
||||
<div class="image_area">
|
||||
<p>image</p>
|
||||
<div id="show1"><audio controls>
|
||||
<source src="../static/audio/HNI_Soundinstall_3tracks_together1.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>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-10">
|
||||
<div class="iframe_area">
|
||||
<p>iframe area</p>
|
||||
<!-- <iframe src="../static/images/abstract.pdf" width="300px" height="500px"></iframe> -->
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$("#angela").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>
|
||||
|
||||
|
||||
{% endblock %}
|
83
index.html
Normal file
83
index.html
Normal file
@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<style media="screen">
|
||||
|
||||
svg{ width:100%; height:100%; }
|
||||
path{
|
||||
fill: transparent;
|
||||
stroke: #000;
|
||||
stroke-dasharray:6px;
|
||||
}
|
||||
|
||||
div{
|
||||
position:absolute;
|
||||
top:20px;
|
||||
left:0;
|
||||
right:0;
|
||||
margin:auto;
|
||||
height:500px;
|
||||
width:700px;
|
||||
}
|
||||
|
||||
p{ position:absolute; padding:30px; 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;}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<svg>
|
||||
<path class='p1'></path>
|
||||
<path class='p2'></path>
|
||||
|
||||
</svg>
|
||||
<p class='c1'>bha</b>
|
||||
<p class='c2'>etc</b>
|
||||
<p class='c3'>hello</p>
|
||||
</div>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
|
||||
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
|
||||
crossorigin="anonymous"></script>
|
||||
<script type="text/javascript">
|
||||
var path1 = document.querySelector(".p1"),
|
||||
path2 = document.querySelector(".p2");
|
||||
|
||||
var c1 = document.querySelector(".c1"),
|
||||
c1Pos = getPointPos(c1),
|
||||
c2 = document.querySelector(".c2"),
|
||||
c2Pos = getPointPos(c2),
|
||||
c3 = document.querySelector(".c3"),
|
||||
c3Pos = getPointPos(c3);
|
||||
|
||||
|
||||
function getPointPos(point){
|
||||
var pos = $(point).position();
|
||||
pos.left += point.clientWidth/2;
|
||||
return pos;
|
||||
}
|
||||
|
||||
|
||||
path1.setAttribute('d', createLine([c1Pos.left, c1Pos.top], [c2Pos.left, c2Pos.top]));
|
||||
path2.setAttribute('d', createLine([c3Pos.left, c3Pos.top], [c2Pos.left, c2Pos.top]));
|
||||
|
||||
function createLine(source, target){
|
||||
var dx = target[0] - source[0],
|
||||
dy = target[1] - source[1],
|
||||
dr = Math.sqrt(dx * dx + dy * dy)/1.5;
|
||||
|
||||
return "M" +
|
||||
source[0] + "," +
|
||||
source[1] + "A" +
|
||||
dr + "," + dr + " 0 0,1 " +
|
||||
target[0] + "," +
|
||||
target[1];
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
82
index2.html
Normal file
82
index2.html
Normal file
@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<canvas width="960" height="600"></canvas>
|
||||
<script src="https://d3js.org/d3.v4.min.js"></script>
|
||||
<script>
|
||||
|
||||
var canvas = document.querySelector("canvas"),
|
||||
context = canvas.getContext("2d"),
|
||||
width = canvas.width,
|
||||
height = canvas.height;
|
||||
|
||||
var simulation = d3.forceSimulation()
|
||||
.force("link", d3.forceLink().id(function(d) { return d.id; }))
|
||||
.force("charge", d3.forceManyBody())
|
||||
.force("center", d3.forceCenter(width / 2, height / 2));
|
||||
|
||||
d3.json("test.json", function(error, graph) {
|
||||
if (error) throw error;
|
||||
|
||||
simulation
|
||||
.nodes(graph.nodes)
|
||||
.on("tick", ticked);
|
||||
|
||||
simulation.force("link")
|
||||
.links(graph.links);
|
||||
|
||||
d3.select(canvas)
|
||||
.call(d3.drag()
|
||||
.container(canvas)
|
||||
.subject(dragsubject)
|
||||
.on("start", dragstarted)
|
||||
.on("drag", dragged)
|
||||
.on("end", dragended));
|
||||
|
||||
function ticked() {
|
||||
context.clearRect(0, 0, width, height);
|
||||
|
||||
context.beginPath();
|
||||
graph.links.forEach(drawLink);
|
||||
context.strokeStyle = "#aaa";
|
||||
context.stroke();
|
||||
|
||||
context.beginPath();
|
||||
graph.nodes.forEach(drawNode);
|
||||
context.fill();
|
||||
context.strokeStyle = "#fff";
|
||||
context.stroke();
|
||||
}
|
||||
|
||||
function dragsubject() {
|
||||
return simulation.find(d3.event.x, d3.event.y);
|
||||
}
|
||||
});
|
||||
|
||||
function dragstarted() {
|
||||
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
|
||||
d3.event.subject.fx = d3.event.subject.x;
|
||||
d3.event.subject.fy = d3.event.subject.y;
|
||||
}
|
||||
|
||||
function dragged() {
|
||||
d3.event.subject.fx = d3.event.x;
|
||||
d3.event.subject.fy = d3.event.y;
|
||||
}
|
||||
|
||||
function dragended() {
|
||||
if (!d3.event.active) simulation.alphaTarget(0);
|
||||
d3.event.subject.fx = null;
|
||||
d3.event.subject.fy = null;
|
||||
}
|
||||
|
||||
function drawLink(d) {
|
||||
context.moveTo(d.source.x, d.source.y);
|
||||
context.lineTo(d.target.x, d.target.y);
|
||||
}
|
||||
|
||||
function drawNode(d) {
|
||||
context.moveTo(d.x + 3, d.y);
|
||||
context.arc(d.x, d.y, 3, 0, 2 * Math.PI);
|
||||
}
|
||||
|
||||
</script>
|
@ -1,6 +1,6 @@
|
||||
/* Everything*/
|
||||
* {
|
||||
border: 1px black solid;
|
||||
border: 0px black solid;
|
||||
}
|
||||
|
||||
/*Main areas*/
|
||||
@ -20,6 +20,30 @@
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
svg{ width:100%; height:100%; }
|
||||
path{
|
||||
fill: transparent;
|
||||
stroke: #000;
|
||||
stroke-dasharray:6px;
|
||||
}
|
||||
|
||||
#map_div{
|
||||
position:absolute;
|
||||
top:20px;
|
||||
left:0;
|
||||
right:0;
|
||||
margin:auto;
|
||||
height:500px;
|
||||
width:700px;
|
||||
|
||||
}
|
||||
|
||||
#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;}
|
||||
|
||||
|
||||
/* text area */
|
||||
.thesis {
|
||||
overflow-y: scroll;
|
||||
|
@ -1,61 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Hello{% endblock %}
|
||||
{% block body %}
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<div class="map_area">Map area<div id="circle-1">
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="row">
|
||||
<div class="col-md-10">
|
||||
<div class="image_area">
|
||||
<p>image</p>
|
||||
<img src="../static/images/test_small.jpeg" alt="poem">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-10">
|
||||
<div class="iframe_area">
|
||||
<p>iframe area</p>
|
||||
<!-- <iframe src="../static/images/abstract.pdf" width="300px" height="500px"></iframe> -->
|
||||
<div class="thesis">
|
||||
<a href="#" onclick="linktext(event)">First Text</a>
|
||||
<script>
|
||||
function linktext(e) {
|
||||
e.preventDefault();
|
||||
$(window).scrollTop($("span:contains('Digging'):last").offset().top);
|
||||
}
|
||||
</script>
|
||||
<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>Digging</span> <span>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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
let firsttext='text text';
|
||||
function setup() {
|
||||
var canvas = createCanvas(400, 400);
|
||||
canvas.parent('circle-1');
|
||||
}
|
||||
function draw(){
|
||||
stroke(0);
|
||||
ellipse(252,144,72,72);
|
||||
text(firsttext,252,144,72,72);
|
||||
firsttext.id='firsttext';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
136
templates/hello_test.html
Normal file
136
templates/hello_test.html
Normal file
@ -0,0 +1,136 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Hello{% endblock %}
|
||||
{% block body %}
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
|
||||
<div class="map_area">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="container-fluid" id="map_div">
|
||||
<svg>
|
||||
<path class='p1'></path>
|
||||
<path class='p2'></path>
|
||||
|
||||
</svg>
|
||||
<p class='c1'>Dadaloglu</b>
|
||||
<p class='c2'>Muharrem Ertas</b>
|
||||
<p class='c3'>Asik Veysel</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="row">
|
||||
<div class="col-md-10">
|
||||
<div class="image_area">
|
||||
<p>image</p>
|
||||
<div id="show1"><audio controls>
|
||||
<source src="../static/audio/HNI_Soundinstall_3tracks_together1.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>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-10">
|
||||
<div class="iframe_area">
|
||||
<p>iframe area</p>
|
||||
<!-- <iframe src="../static/images/abstract.pdf" width="300px" height="500px"></iframe> -->
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$("#angela").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();
|
||||
}
|
||||
|
||||
var path1 = document.querySelector(".p1"),
|
||||
path2 = document.querySelector(".p2");
|
||||
|
||||
var c1 = document.querySelector(".c1"),
|
||||
c1Pos = getPointPos(c1),
|
||||
c2 = document.querySelector(".c2"),
|
||||
c2Pos = getPointPos(c2),
|
||||
c3 = document.querySelector(".c3"),
|
||||
c3Pos = getPointPos(c3);
|
||||
|
||||
|
||||
function getPointPos(point){
|
||||
var pos = $(point).position();
|
||||
pos.left += point.clientWidth/2;
|
||||
return pos;
|
||||
}
|
||||
|
||||
|
||||
path1.setAttribute('d', createLine([c1Pos.left, c1Pos.top], [c2Pos.left, c2Pos.top]));
|
||||
path2.setAttribute('d', createLine([c3Pos.left, c3Pos.top], [c2Pos.left, c2Pos.top]));
|
||||
|
||||
function createLine(source, target){
|
||||
var dx = target[0] - source[0],
|
||||
dy = target[1] - source[1],
|
||||
dr = Math.sqrt(dx * dx + dy * dy)/1.5;
|
||||
|
||||
return "M" +
|
||||
source[0] + "," +
|
||||
source[1] + "A" +
|
||||
dr + "," + dr + " 0 0,1 " +
|
||||
target[0] + "," +
|
||||
target[1];
|
||||
}
|
||||
// document.getElementById("audio-1").loop = true;
|
||||
</script>
|
||||
|
||||
|
||||
{% endblock %}
|
13
test.json
Normal file
13
test.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"nodes": [
|
||||
{"id": "Myriel", "group": 1},
|
||||
{"id": "Napoleon", "group": 1},
|
||||
{"id": "Mlle.Baptistine", "group": 1},
|
||||
|
||||
],
|
||||
"links": [
|
||||
{"source": "Napoleon", "target": "Myriel", "value": 1},
|
||||
{"source": "Mlle.Baptistine", "target": "Myriel", "value": 8},
|
||||
|
||||
]
|
||||
}
|
BIN
testing/circle.png
Normal file
BIN
testing/circle.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 16 KiB |
73
testing/index.html
Normal file
73
testing/index.html
Normal file
@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.link {
|
||||
stroke: #ccc;
|
||||
}
|
||||
|
||||
.node text {
|
||||
pointer-events: none;
|
||||
font: 10px sans-serif;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<script src="//d3js.org/d3.v3.min.js"></script>
|
||||
<script>
|
||||
|
||||
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("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")
|
||||
.call(force.drag);
|
||||
|
||||
node.append("image")
|
||||
.attr("xlink:href", "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 + ")"; });
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
19
testing/test.json
Normal file
19
testing/test.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"nodes": [
|
||||
{
|
||||
"name": "Dadaloglu",
|
||||
"group": 1
|
||||
},
|
||||
{
|
||||
"name": "Muharrem Ertas",
|
||||
"group": 1
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"source": 1,
|
||||
"target": 0,
|
||||
"value": 1
|
||||
}
|
||||
]
|
||||
}
|
1
testing/test2.json
Normal file
1
testing/test2.json
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user