Hexagon

_.md

[ Launch: Hexagon ] 70bc5e998c801cbf03e5 by NoahMarconi

config.json

{"description":"Hexagon","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/rTWPeb1.png"}

inlet.js

var width =800, height = 800;

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


var makeHex = function makeHex(h, x_pos, y_pos, colour, i){
  var w = h*0.865;
  
  var hex =  svg.append("defs").append("g")
      .attr("width", h)
      .attr("height", w)
      .attr("id",  "hexagon_" + i);
  
  var rect1 = hex.append("rect")
  .attr({
    width: h/2,
    height: h/2,
    fill: colour,
    x: -h/4,
    y: -h/4
  });
  
  var rect2 = hex.append("rect")
  .attr({
    width: h/2,
    height: h/2,
    fill: colour,
    x: -h/4,
    y: -h/4
  });
  
  var rect3 = hex.append("rect")
  .attr({
    width: h/2,
    height: h/2,
    fill: colour,
    x: -h/4,
    y: -h/4 
  });

svg.append("use")
    .attr("xlink:href", "#hexagon_" + i)
    .attr("x", x_pos )
    .attr("y", y_pos );

svg.select("#hexagon_" + i)
    .selectAll("rect")
    .attr("rx", h/4)
  .transition()
    .duration(1000)
     .attr("x", -w/2)
    .attr("width", w)
  .transition()
     .each(function(x, i){
        d3.select(this)
        .transition()
            .attr("transform",  "rotate(" + (60 * i) +")")
    })
    .transition().attr("rx", 0)

}; 


makeHex(150, 100, 100, "#bada55", 1);
makeHex(500, 300, 300, "steelblue", 2);

svg.append("circle").attr({
  cy:100,
  cx:100,
  r: 2,
  fill: "steelblue"
})



svg.append("circle").attr({
  cy:300,
  cx:300,
  r: 10,
  fill: "#bada55"
})