paulaanhaanen/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Branding option for Cubik using links of a network diagram inside different nets of a cube.
Based on the force-directed graph and applying a linear gradient. The cubes are used as a clipping mask over the force-directed links.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  background-color: #333;
}

.links line {
  stroke: url(#gradient);
}

#alpha{
  fill: rgb(255,255,255);
}

#base {
  fill: #333;
  mask: url(#mask);
}

.net-square {
  fill: none;
  stroke: url(#gradient);
  stroke-width: 3px;
}

</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.0.0-alpha.40.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    numberOfNodes = 1000,
    squareSize = 180;

svg.append("linearGradient")
  .attr("id", "gradient")
  .attr("gradientUnits", "userSpaceOnUse")
  .selectAll("stop")
  .data([
    {offset: "0%", color: "#18FFFF"},
    {offset: "50%", color: "#7C4DFF"},
    {offset: "100%", color: "#FF4081"}
  ])
  .enter().append("stop")
  .attr("offset", function(d) { return d.offset; })
  .attr("stop-color", function(d) { return d.color; });

var mask = svg.append("defs")
  .append("mask")
  .attr("id", "mask")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", "100%")
  .attr("height", "100%");

mask.append("rect")
  .attr("id", "alpha")
  .attr("width", "100%")
  .attr("height", "100%");

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));

var nodes = d3.range(numberOfNodes).map(function(i){ return {id: i}; });

var links = [];

d3.range(numberOfNodes).forEach(function(i){
    links.push({source: i, target: (i + 1) % numberOfNodes});
    links.push({source: i, target: i * 7 % numberOfNodes});
});

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

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

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

d3.json("nets.json", function(error, nets){
  if(error) throw error;

  var index = 0,
      net = nets[index],
      amountOfNets = nets.length;

  drawSquares(net);
  setInterval(moveNodes, 5000);

  function moveNodes() {
    index++;
    net = nets[index % amountOfNets];
    drawSquares(net);
  }
});

svg.append('rect')
  .attr("id", "base")
  .attr("width", "100%")
  .attr("height", "100%");

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

function drawSquares(data){
  var netParts = svg.selectAll('.net-square')
    .data(data.squares);

  netParts
    .enter().append('rect')
    .attr('class', 'net-square')
    .attr('x', function(d){ return d.x * squareSize + 20; })
    .attr('y', function(d){ return d.y * squareSize + 20; })
    .attr('width', squareSize)
    .attr('height', squareSize);

  netParts
    .transition()
    .duration(1000)
    .attr('x', function(d){ return d.x * squareSize + 20; })
    .attr('y', function(d){ return d.y * squareSize + 20; });

  var maskNetParts = mask.selectAll('.mask-square')
    .data(data.squares);

  maskNetParts
    .enter()
    .append("rect")
    .attr("class", "mask-square")
    .attr('x', function(d){ return d.x * squareSize + 20; })
    .attr('y', function(d){ return d.y * squareSize + 20; })
    .attr('width', squareSize)
    .attr('height', squareSize);

  maskNetParts
    .transition()
    .duration(1000)
    .attr('x', function(d){ return d.x * squareSize + 20; })
    .attr('y', function(d){ return d.y * squareSize + 20; });

}

</script>

## nets.json
[
  {
    "id": 1,
    "squares": [
      { "x": 0, "y": 0 },
      { "x": 1, "y": 0 },
      { "x": 1, "y": 1 },
      { "x": 2, "y": 1 },
      { "x": 3, "y": 1 },
      { "x": 2, "y": 2 }
    ]
  },
  {
    "id": 2,
    "squares": [
      { "x": 0, "y": 0 },
      { "x": 0, "y": 1 },
      { "x": 1, "y": 1 },
      { "x": 2, "y": 1 },
      { "x": 3, "y": 1 },
      { "x": 3, "y": 2 }
    ]
  },
  {
    "id": 3,
    "squares": [
      { "x": 0, "y": 0 },
      { "x": 0, "y": 1 },
      { "x": 1, "y": 1 },
      { "x": 2, "y": 1 },
      { "x": 3, "y": 1 },
      { "x": 2, "y": 2 }
    ]
  },
  {
    "id": 4,
    "squares": [
      { "x": 0, "y": 0 },
      { "x": 0, "y": 1 },
      { "x": 1, "y": 1 },
      { "x": 2, "y": 1 },
      { "x": 3, "y": 1 },
      { "x": 1, "y": 2 }
    ]
  },
  {
    "id": 5,
    "squares": [
      { "x": 2, "y": 0 },
      { "x": 3, "y": 0 },
      { "x": 0, "y": 1 },
      { "x": 1, "y": 1 },
      { "x": 2, "y": 1 },
      { "x": 2, "y": 2 }
    ]
  },
  {
    "id": 6,
    "squares": [
      { "x": 0, "y": 0 },
      { "x": 1, "y": 0 },
      { "x": 1, "y": 1 },
      { "x": 2, "y": 1 },
      { "x": 2, "y": 2 },
      { "x": 3, "y": 2 }
    ]
  },
  {
    "id": 7,
    "squares": [
      { "x": 0, "y": 0 },
      { "x": 1, "y": 0 },
      { "x": 2, "y": 0 },
      { "x": 2, "y": 1 },
      { "x": 3, "y": 1 },
      { "x": 4, "y": 1 }
    ]
  },
  {
    "id": 8,
    "squares": [
      { "x": 1, "y": 0 },
      { "x": 0, "y": 1 },
      { "x": 1, "y": 1 },
      { "x": 2, "y": 1 },
      { "x": 3, "y": 1 },
      { "x": 2, "y": 2 }
    ]
  },
  {
    "id": 9,
    "squares": [
      { "x": 2, "y": 0 },
      { "x": 0, "y": 1 },
      { "x": 1, "y": 1 },
      { "x": 2, "y": 1 },
      { "x": 3, "y": 1 },
      { "x": 2, "y": 2 }
    ]
  },
  {
    "id": 10,
    "squares": [
      { "x": 3, "y": 0 },
      { "x": 0, "y": 1 },
      { "x": 1, "y": 1 },
      { "x": 2, "y": 1 },
      { "x": 3, "y": 1 },
      { "x": 3, "y": 2 }
    ]
  },
  {
    "id": 11,
    "squares": [
      { "x": 0, "y": 0 },
      { "x": 1, "y": 0 },
      { "x": 1, "y": 1 },
      { "x": 2, "y": 1 },
      { "x": 3, "y": 1 },
      { "x": 3, "y": 2 }
    ]
  }
]

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	svg {
	background-color: #333;
	}

	.links line {
	stroke: url(#gradient);
	}

	#alpha{
	fill: rgb(255,255,255);
	}

	#base {
	fill: #333;
	mask: url(#mask);
	}

	.net-square {
	fill: none;
	stroke: url(#gradient);
	stroke-width: 3px;
	}

	</style>
	<svg width="960" height="600"></svg>
	<script src="https://d3js.org/d3.v4.0.0-alpha.40.min.js"></script>
	<script>

	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height"),
	numberOfNodes = 1000,
	squareSize = 180;

	svg.append("linearGradient")
	.attr("id", "gradient")
	.attr("gradientUnits", "userSpaceOnUse")
	.selectAll("stop")
	.data([
	{offset: "0%", color: "#18FFFF"},
	{offset: "50%", color: "#7C4DFF"},
	{offset: "100%", color: "#FF4081"}
	])
	.enter().append("stop")
	.attr("offset", function(d) { return d.offset; })
	.attr("stop-color", function(d) { return d.color; });

	var mask = svg.append("defs")
	.append("mask")
	.attr("id", "mask")
	.attr("x", 0)
	.attr("y", 0)
	.attr("width", "100%")
	.attr("height", "100%");

	mask.append("rect")
	.attr("id", "alpha")
	.attr("width", "100%")
	.attr("height", "100%");

	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));

	var nodes = d3.range(numberOfNodes).map(function(i){ return {id: i}; });

	var links = [];

	d3.range(numberOfNodes).forEach(function(i){
	links.push({source: i, target: (i + 1) % numberOfNodes});
	links.push({source: i, target: i * 7 % numberOfNodes});
	});

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

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

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

	d3.json("nets.json", function(error, nets){
	if(error) throw error;

	var index = 0,
	net = nets[index],
	amountOfNets = nets.length;

	drawSquares(net);
	setInterval(moveNodes, 5000);

	function moveNodes() {
	index++;
	net = nets[index % amountOfNets];
	drawSquares(net);
	}
	});

	svg.append('rect')
	.attr("id", "base")
	.attr("width", "100%")
	.attr("height", "100%");

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

	function drawSquares(data){
	var netParts = svg.selectAll('.net-square')
	.data(data.squares);

	netParts
	.enter().append('rect')
	.attr('class', 'net-square')
	.attr('x', function(d){ return d.x * squareSize + 20; })
	.attr('y', function(d){ return d.y * squareSize + 20; })
	.attr('width', squareSize)
	.attr('height', squareSize);

	netParts
	.transition()
	.duration(1000)
	.attr('x', function(d){ return d.x * squareSize + 20; })
	.attr('y', function(d){ return d.y * squareSize + 20; });

	var maskNetParts = mask.selectAll('.mask-square')
	.data(data.squares);

	maskNetParts
	.enter()
	.append("rect")
	.attr("class", "mask-square")
	.attr('x', function(d){ return d.x * squareSize + 20; })
	.attr('y', function(d){ return d.y * squareSize + 20; })
	.attr('width', squareSize)
	.attr('height', squareSize);

	maskNetParts
	.transition()
	.duration(1000)
	.attr('x', function(d){ return d.x * squareSize + 20; })
	.attr('y', function(d){ return d.y * squareSize + 20; });

	}

	</script>
	[
	{
	"id": 1,
	"squares": [
	{ "x": 0, "y": 0 },
	{ "x": 1, "y": 0 },
	{ "x": 1, "y": 1 },
	{ "x": 2, "y": 1 },
	{ "x": 3, "y": 1 },
	{ "x": 2, "y": 2 }
	]
	},
	{
	"id": 2,
	"squares": [
	{ "x": 0, "y": 0 },
	{ "x": 0, "y": 1 },
	{ "x": 1, "y": 1 },
	{ "x": 2, "y": 1 },
	{ "x": 3, "y": 1 },
	{ "x": 3, "y": 2 }
	]
	},
	{
	"id": 3,
	"squares": [
	{ "x": 0, "y": 0 },
	{ "x": 0, "y": 1 },
	{ "x": 1, "y": 1 },
	{ "x": 2, "y": 1 },
	{ "x": 3, "y": 1 },
	{ "x": 2, "y": 2 }
	]
	},
	{
	"id": 4,
	"squares": [
	{ "x": 0, "y": 0 },
	{ "x": 0, "y": 1 },
	{ "x": 1, "y": 1 },
	{ "x": 2, "y": 1 },
	{ "x": 3, "y": 1 },
	{ "x": 1, "y": 2 }
	]
	},
	{
	"id": 5,
	"squares": [
	{ "x": 2, "y": 0 },
	{ "x": 3, "y": 0 },
	{ "x": 0, "y": 1 },
	{ "x": 1, "y": 1 },
	{ "x": 2, "y": 1 },
	{ "x": 2, "y": 2 }
	]
	},
	{
	"id": 6,
	"squares": [
	{ "x": 0, "y": 0 },
	{ "x": 1, "y": 0 },
	{ "x": 1, "y": 1 },
	{ "x": 2, "y": 1 },
	{ "x": 2, "y": 2 },
	{ "x": 3, "y": 2 }
	]
	},
	{
	"id": 7,
	"squares": [
	{ "x": 0, "y": 0 },
	{ "x": 1, "y": 0 },
	{ "x": 2, "y": 0 },
	{ "x": 2, "y": 1 },
	{ "x": 3, "y": 1 },
	{ "x": 4, "y": 1 }
	]
	},
	{
	"id": 8,
	"squares": [
	{ "x": 1, "y": 0 },
	{ "x": 0, "y": 1 },
	{ "x": 1, "y": 1 },
	{ "x": 2, "y": 1 },
	{ "x": 3, "y": 1 },
	{ "x": 2, "y": 2 }
	]
	},
	{
	"id": 9,
	"squares": [
	{ "x": 2, "y": 0 },
	{ "x": 0, "y": 1 },
	{ "x": 1, "y": 1 },
	{ "x": 2, "y": 1 },
	{ "x": 3, "y": 1 },
	{ "x": 2, "y": 2 }
	]
	},
	{
	"id": 10,
	"squares": [
	{ "x": 3, "y": 0 },
	{ "x": 0, "y": 1 },
	{ "x": 1, "y": 1 },
	{ "x": 2, "y": 1 },
	{ "x": 3, "y": 1 },
	{ "x": 3, "y": 2 }
	]
	},
	{
	"id": 11,
	"squares": [
	{ "x": 0, "y": 0 },
	{ "x": 1, "y": 0 },
	{ "x": 1, "y": 1 },
	{ "x": 2, "y": 1 },
	{ "x": 3, "y": 1 },
	{ "x": 3, "y": 2 }
	]
	}
	]