orbitals

_.md

[ Launch: Tributary inlet ] 4981624 by seliopou

config.json

{"description":"orbitals","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var dim = 500,
    dimh = dim / 2,
    num = 13;

var x = d3.scale.linear().domain([0, num + 1]).range([dimh, dimh * 3]);

var svg = d3.select('svg')
	.attr('width', dim)
	.attr('height', dim);

var defs = svg.append('defs');

defs.append('clipPath')
	.attr('id', 'circle-clip')
  .append('circle')
	.attr('cx', x(0))
	.attr('cy', dimh)
	.attr('r', dimh);

defs.append('clipPath')
	.attr('id', 'rect-clip')
  .append('rect')
	.attr('x', 0)
	.attr('width', dimh + 10)
	.attr('height', dim)

svg.append('g')
	.attr('clip-path', 'url(#circle-clip)')
  .selectAll('circle')
	.data(d3.range(1, num + 1))
  .enter().append('circle')
	.attr('class', 'orbital')
	.attr('cx', x)
	.attr('cy', dimh)
	.attr('r', dimh);

svg.append('g')
	.attr('clip-path', 'url(#rect-clip)')
  	.datum(0)
  .append('circle')
	.attr('class', 'orbital')
	.attr('cx', x)
	.attr('cy', dimh)
	.attr('r', dimh);

style.css

.orbital {
 fill: none;
 stroke: rgb(2, 47, 98);
 stroke-width: 2px;
}