Midnighter · August 6, 2018 17:33
diff --git a/.block b/.block
 license: apache-2.0
 height: 500
 border: no
diff --git a/README.md b/README.md
diff --git a/hypernode.js b/hypernode.js
 // Copyright (c) 2018, Moritz E. Beber

 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

 //     http://www.apache.org/licenses/LICENSE-2.0

 // Unless required by applicable law or agreed to in writing, software
 // distributed under the License is distributed on an "AS IS" BASIS,
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.

 // Define the dimensions.
 var width = 300;
 var height = 300;

 // Create the SVG element.
 var svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

 // Shift every element.
 var g = svg.append('g');
 //  .attr('transform', 'translate(0, 0)');

 var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(function(d) { return d.name; }))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(width / 2, height / 2));

 // Read the data and create the visualization.
 d3.json('./network.json', function(error, graph) {
  if (error) throw error;

  console.log(graph);

  var link = g
    .selectAll('.link')
    .data(graph.links)
    .enter().append('line')
    .attr('class', 'link');

  var node = g
    .selectAll('.node')
    .data(graph.nodes)
    .enter().append('g')
    .attr('class', 'node');

  node.append('circle')
    .attr('r', '5');

  node.append('text')
    .attr('dx', '12')
    .attr('dy', '.35em')
    .attr('text-anchor', 'start')
    .text(function(d) { return d.name });

  simulation
    .nodes(graph.nodes)
    .on("tick", ticked);

  simulation.force("link")
    .links(graph.links);

  function ticked() {
    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 + ')'; });
  }

  simulation.on('end', function() {
  });

 });
diff --git a/index.html b/index.html
 <!doctype html>
 <html class="no-js" lang="">

 <head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Hypernodes</title>
  <meta name="description" content="A prototype for hyper nodes in D3.js and their behavior given a mix of radial and force layouts.">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="styles.css">
 </head>

 <body>
  <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->
  <noscript>
    Please enable Javascript in order to view this demo.
  </noscript>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="./hypernode.js"></script>
 </body>

 </html>
diff --git a/network.json b/network.json
 {
  "nodes": [
    {
      "name": "Marc"
    },
    {
      "name": "Mary"
    },
    {
      "name": "John"
    },
    {
      "name": "Jona"
    },
    {
      "name": "Ernie"
    },
    {
      "name": "Bert"
    },
    {
      "name": "Dolly"
    }
  ],
  "relationships": [
    {
      "a": "Marc",
      "b": "Mary"
    },
    {
      "a": "Marc",
      "b": "Jona"
    },
    {
      "a": "Bert",
      "b": "Dolly"
    },
    {
      "a": "John",
      "b": "Jona"
    }
  ],
  "links": [
    {
      "source": "Marc",
      "target": "Bert"
    },
    {
      "source": "Mary",
      "target": "Bert"
    },
    {
      "source": "Marc",
      "target": "Ernie"
    },
    {
      "source": "Jona",
      "target": "Ernie"
    },
    {
      "source": "John",
      "target": "Dolly"
    },
    {
      "source": "Jona",
      "target": "Dolly"
    }
  ]
 }
diff --git a/styles.css b/styles.css
 .node {
  fill: steelblue;
 }

 .node text {
  font: 10px sans-serif;
 }

 .link {
  fill: none;
  stroke: black;
  stroke-opacity: 0.4;
  stroke-width: thin;
 }
	// Copyright (c) 2018, Moritz E. Beber

	// Licensed under the Apache License, Version 2.0 (the "License");
	// you may not use this file except in compliance with the License.
	// You may obtain a copy of the License at

	// http://www.apache.org/licenses/LICENSE-2.0

	// Unless required by applicable law or agreed to in writing, software
	// distributed under the License is distributed on an "AS IS" BASIS,
	// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	// See the License for the specific language governing permissions and
	// limitations under the License.

	// Define the dimensions.
	var width = 300;
	var height = 300;

	// Create the SVG element.
	var svg = d3.select('body')
	.append('svg')
	.attr('width', width)
	.attr('height', height);

	// Shift every element.
	var g = svg.append('g');
	// .attr('transform', 'translate(0, 0)');

	var simulation = d3.forceSimulation()
	.force("link", d3.forceLink().id(function(d) { return d.name; }))
	.force("charge", d3.forceManyBody())
	.force("center", d3.forceCenter(width / 2, height / 2));

	// Read the data and create the visualization.
	d3.json('./network.json', function(error, graph) {
	if (error) throw error;

	console.log(graph);

	var link = g
	.selectAll('.link')
	.data(graph.links)
	.enter().append('line')
	.attr('class', 'link');

	var node = g
	.selectAll('.node')
	.data(graph.nodes)
	.enter().append('g')
	.attr('class', 'node');

	node.append('circle')
	.attr('r', '5');

	node.append('text')
	.attr('dx', '12')
	.attr('dy', '.35em')
	.attr('text-anchor', 'start')
	.text(function(d) { return d.name });

	simulation
	.nodes(graph.nodes)
	.on("tick", ticked);

	simulation.force("link")
	.links(graph.links);

	function ticked() {
	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 + ')'; });
	}

	simulation.on('end', function() {
	});

	});
	<!doctype html>
	<html class="no-js" lang="">

	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>Hypernodes</title>
	<meta name="description" content="A prototype for hyper nodes in D3.js and their behavior given a mix of radial and force layouts.">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<link rel="stylesheet" href="styles.css">
	</head>

	<body>
	<!--[if lte IE 9]>
	<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
	<![endif]-->
	<noscript>
	Please enable Javascript in order to view this demo.
	</noscript>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="./hypernode.js"></script>
	</body>

	</html>
	{
	"nodes": [
	{
	"name": "Marc"
	},
	{
	"name": "Mary"
	},
	{
	"name": "John"
	},
	{
	"name": "Jona"
	},
	{
	"name": "Ernie"
	},
	{
	"name": "Bert"
	},
	{
	"name": "Dolly"
	}
	],
	"relationships": [
	{
	"a": "Marc",
	"b": "Mary"
	},
	{
	"a": "Marc",
	"b": "Jona"
	},
	{
	"a": "Bert",
	"b": "Dolly"
	},
	{
	"a": "John",
	"b": "Jona"
	}
	],
	"links": [
	{
	"source": "Marc",
	"target": "Bert"
	},
	{
	"source": "Mary",
	"target": "Bert"
	},
	{
	"source": "Marc",
	"target": "Ernie"
	},
	{
	"source": "Jona",
	"target": "Ernie"
	},
	{
	"source": "John",
	"target": "Dolly"
	},
	{
	"source": "Jona",
	"target": "Dolly"
	}
	]
	}
	.node {
	fill: steelblue;
	}

	.node text {
	font: 10px sans-serif;
	}

	.link {
	fill: none;
	stroke: black;
	stroke-opacity: 0.4;
	stroke-width: thin;
	}