Midnighter/.block

## .block
license: apache-2.0
height: 500
border: no

## README.md

      
    Raw
  

              README.md
            
          
    A prototype for hyper nodes in D3.js and their behavior given a mix of radial and force
layouts.
Copyright


Copyright © 2018, Moritz E. Beber, licensed
under the Apache License, Version 2.0.


## 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() {
  });

});

## 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>

## 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"
    }
  ]
}

## 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;
	}