You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
487 lines
17 KiB
HTML
487 lines
17 KiB
HTML
5 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
|
|
<title>Network Advanced</title>
|
||
|
|
<script src="d3-force-apex-plugin/docs/scripts/prettify/prettify.js"></script>
|
||
|
|
<script src="d3-force-apex-plugin/docs/scripts/prettify/lang-css.js"></script>
|
||
|
|
<!--[if lt IE 9]>
|
||
|
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||
|
|
<![endif]-->
|
||
|
|
<style type="text/css">
|
||
|
|
body {margin: 0; overflow: hidden;}
|
||
|
|
|
||
|
|
svg{ background: black !important; border: none !important;}
|
||
|
|
|
||
|
|
circle {
|
||
|
|
cursor: grab;
|
||
|
|
fill: black !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.label {
|
||
|
|
font-size: 15px !important;
|
||
|
|
fill: white !important;
|
||
|
|
transform:translateY(22px);
|
||
|
|
}
|
||
|
|
|
||
|
|
circle.highlighted {
|
||
|
|
stroke: red !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
line.highlighted {
|
||
|
|
stroke: red !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
line{ stroke: black !important; }
|
||
|
|
|
||
|
|
.link {
|
||
|
|
fill: black !important;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="main">
|
||
|
|
<div id="example"></div><!--the graph container-->
|
||
|
|
<link href="d3-force-apex-plugin/docs/lib/d3-force-3.1.0.css" rel="stylesheet" type="text/css">
|
||
|
|
<script src="d3-force-apex-plugin/docs/lib/ResizeObserver-1.5.0.min.js"></script>
|
||
|
|
<script src="d3-force-apex-plugin/docs/lib/d3-3.5.6.min.js"></script>
|
||
|
|
<script src="d3-force-apex-plugin/docs/lib/d3-force-3.1.0.min.js"></script>
|
||
|
|
<script>
|
||
|
|
var w = window.innerWidth;
|
||
|
|
var h = window.innerHeight;
|
||
|
|
|
||
|
|
window.onload = function (){
|
||
|
|
window.example = netGobrechtsD3Force("example")
|
||
|
|
.width(w)
|
||
|
|
.height(h)
|
||
|
|
.customize(false)
|
||
|
|
.charge(-800)
|
||
|
|
.showLinkDirection(false)
|
||
|
|
.wrapLabels(true)
|
||
|
|
.zoomMode(true)
|
||
|
|
.charge(-100)
|
||
|
|
.gravity(0.05)
|
||
|
|
.friction(1)
|
||
|
|
.theta(0.05)
|
||
|
|
.debug(true) //also creates the "Customize Me" link
|
||
|
|
.render({
|
||
|
|
"data": {
|
||
|
|
"nodes": [{
|
||
|
|
"ID": "1",
|
||
|
|
"LABEL": "SITUATIONISM",
|
||
|
|
"COLORVALUE": "10",
|
||
|
|
"COLORLABEL": "Accounting",
|
||
|
|
"SIZEVALUE": 13000,
|
||
|
|
"LABELCIRCULAR": false,
|
||
|
|
"LINK": "http://apex.oracle.com/",
|
||
|
|
"INFOSTRING": "Situazionismo e libertà",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "2",
|
||
|
|
"LABEL": "First World Congress of Liberated Artists",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"LABELCIRCULAR": false,
|
||
|
|
|
||
|
|
"SIZEVALUE": 3500
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "3",
|
||
|
|
"LABEL": "Lettrist International",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2850
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "4",
|
||
|
|
"LABEL": "International Movement for an Imaginist Bauhaus",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2850,
|
||
|
|
"INFOSTRING": "cipollotti"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "5",
|
||
|
|
"LABEL": "London Psychogeography Association",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2850
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "6",
|
||
|
|
"LABEL": "Socialism ou Barbarie",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2850,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "7",
|
||
|
|
"LABEL": "Lettrism",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "8",
|
||
|
|
"LABEL": "COBRA",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "9",
|
||
|
|
"LABEL": "ULM",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 3500,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "10",
|
||
|
|
"LABEL": "BAUHAUS",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 13000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "11",
|
||
|
|
"LABEL": "SURREALISM",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 13000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "12",
|
||
|
|
"LABEL": "College of Sociology",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 3000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "13",
|
||
|
|
"LABEL": "College of Pataphysics",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 3000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "14",
|
||
|
|
"LABEL": "Oulipo",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "15",
|
||
|
|
"LABEL": "Lacan",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "16",
|
||
|
|
"LABEL": "LINGUISTICS / SEMIOTICS (Saussure)",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 13000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "17",
|
||
|
|
"LABEL": "Ogden & Richard (New Criticism)",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 5000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "18",
|
||
|
|
"LABEL": "Barthes",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "19",
|
||
|
|
"LABEL": "Levi-Strauss",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "20",
|
||
|
|
"LABEL": "Media Theory (Mc Luhan)",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "21",
|
||
|
|
"LABEL": "CYBERNETICS",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 13000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "22",
|
||
|
|
"LABEL": "Cyberculture",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "23",
|
||
|
|
"LABEL": "COUNTERCULTURE",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 13000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "24",
|
||
|
|
"LABEL": "AI",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "25",
|
||
|
|
"LABEL": "PostHuman",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "26",
|
||
|
|
"LABEL": "Beat Generation",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "27",
|
||
|
|
"LABEL": "PSYCHOANALYSIS",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 13000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "28",
|
||
|
|
"LABEL": "DADA",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 13000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "29",
|
||
|
|
"LABEL": "NEO-DADA",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 5000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "30",
|
||
|
|
"LABEL": "POP-ART",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 5000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "31",
|
||
|
|
"LABEL": "FLUXUS",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 5000,
|
||
|
|
}
|
||
|
|
|
||
|
|
],
|
||
|
|
"links": [
|
||
|
|
{
|
||
|
|
"FROMID": "2",
|
||
|
|
"TOID": "1",
|
||
|
|
"STYLE": "solid",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "3",
|
||
|
|
"TOID": "2",
|
||
|
|
"STYLE": "solid"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "4",
|
||
|
|
"TOID": "2",
|
||
|
|
"STYLE": "solid"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "5",
|
||
|
|
"TOID": "2",
|
||
|
|
"STYLE": "solid"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "6",
|
||
|
|
"TOID": "1",
|
||
|
|
"STYLE": "dashed"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "7",
|
||
|
|
"TOID": "3",
|
||
|
|
"STYLE": "solid"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "8",
|
||
|
|
"TOID": "4",
|
||
|
|
"STYLE": "solid"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "9",
|
||
|
|
"TOID": "4",
|
||
|
|
"STYLE": "dashed",
|
||
|
|
"COLOR": "red"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "10",
|
||
|
|
"TOID": "9",
|
||
|
|
"STYLE": "dotted"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "11",
|
||
|
|
"TOID": "7",
|
||
|
|
"COLOR": "red",
|
||
|
|
"STYLE": "dashed"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "11",
|
||
|
|
"TOID": "12",
|
||
|
|
"COLOR": "red",
|
||
|
|
"STYLE": "dashed"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "11",
|
||
|
|
"TOID": "13",
|
||
|
|
"STYLE": "dashed",
|
||
|
|
"COLOR": "red",
|
||
|
|
"LABEL": "Queneaux"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "13",
|
||
|
|
"TOID": "14",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
"LABEL": "Queneaux"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "12",
|
||
|
|
"TOID": "15",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "16",
|
||
|
|
"TOID": "17",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "17",
|
||
|
|
"TOID": "18",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "17",
|
||
|
|
"TOID": "19",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "17",
|
||
|
|
"TOID": "20",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "17",
|
||
|
|
"TOID": "15",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "17",
|
||
|
|
"TOID": "21",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "21",
|
||
|
|
"TOID": "22",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "21",
|
||
|
|
"TOID": "24",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "21",
|
||
|
|
"TOID": "25",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "26",
|
||
|
|
"TOID": "23",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "23",
|
||
|
|
"TOID": "22",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "21",
|
||
|
|
"TOID": "15",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "21",
|
||
|
|
"TOID": "20",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "27",
|
||
|
|
"TOID": "21",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "27",
|
||
|
|
"TOID": "15",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "27",
|
||
|
|
"TOID": "12",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "21",
|
||
|
|
"TOID": "9",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "17",
|
||
|
|
"TOID": "9",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "28",
|
||
|
|
"TOID": "11",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "28",
|
||
|
|
"TOID": "29",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "29",
|
||
|
|
"TOID": "30",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}); //sample data is provided when called without data
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|