complex 1 (click the buttons)

_.md

[ Launch: complex 1 ] 5087829 by elsherbini

config.json

{"description":"complex 1 (click the buttons)","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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var s = d3.select("svg")
.attr("width", 1138)
.attr("height", 1000)

var svg = s.append("g")

var x = 19
var dx = 159
var y = 200


var first = [x,y]
var second = [first[0]+dx,y]
var third = [second[0]+dx,y]
var fourth = [third[0]+dx,y]
var quinone = [fourth[0]+148,157]
var hlo = [70,224]
var hlr = [47,224]
var bho = [50,360]
var bhr = [24,360]
var nqoo = "0,0 140,0 140,100 140,0 150,0 190,100 150,200 85,200 85,100 45,200, 0,200 40,100"
var nqor = "0,0 65,0 65,100 105,0 150,0 110,100 150,200 10,200 10,100 10,200, 0,200 -40,100"
var hl = "0,0 500,0 500,20 0,20"
var bh = "0,0 500,0 500,20 0,20"

var oxidized = [
  {id: "first", points: nqoo, translate: first , color: "#CC58AC"},
  {id: "second", points: nqoo, translate: second, color: "#99B7DD"},
  {id: "third", points: nqoo, translate: third, color: "#ECBF4A"},
  {id: "fourth", points: nqoo, translate: fourth, color: "#58CC61"},
  {id: "HL" , points: hl, translate: hlo, color: "#9914B3"},
  {id: "BH" , points: bh, translate: bho, color: "#255BBB"}
];

var reduced = [
  {id: "first", points: nqor, translate: first , color: "#CC58AC"},
  {id: "second", points: nqor, translate: second, color: "#99B7DD"},
  {id: "third", points: nqor, translate: third, color: "#ECBF4A"},
  {id: "fourth", points: nqor, translate: fourth, color: "#58CC61"},
  {id: "HL" , points: hl, translate: hlr, color: "#9914B3"},
  {id: "BH" , points: bh, translate: bhr, color: "#255BBB"}
];


var hex ="M23.453,81.245 L0,40.623 L23.453,0 H70.36 l23.454,40.623 L70.36,81.245 H23.453z M69.205,79.246l22.299-38.622L69.205,1.999  H24.609L2.31,40.624l22.299,38.622H69.205 L69.205,81.245z"
var tail = "M10 0 L 20 20 L 35 5 L 50 30 L 65 15 L 80 40 L 95 25 L110 50 L125 35"
var back = "M -30 20 q 30 -60 60 0 L 30 30 L 25 35 L20 175 L-20 175 L-25 35 L -30 30 z"


var proteins = svg.selectAll("polygon")
	.data(oxidized)
  .enter().append("polygon")
	.attr("points" , function(d){return d.points;})
	.attr("transform" , function(d) {return "translate (" + d.translate + ")";})
	.attr("fill" , function(d) {return d.color;})
	.attr("stroke" , "#000000")

var button = svg.append("rect")
	.attr({
  		width: 100,
  		height: 30,
  		x: 600,
  		y: 450,
  		fill: "#e3e3e3",
  		stroke: "#000000"
	})
	.on("click", function() {
       svg.selectAll("polygon")
       .data(reduced, function(d) {return d.id})
       .transition()
       .duration(2000)
       .ease("bounce")
       .attr("points" , function(d){return d.points;})
       .attr("transform" , function(d) {return "translate (" + d.translate + ")";});
      

  });

var button = svg.append("rect")
	.attr({
  		width: 100,
  		height: 30,
  		x: 462,
  		y: 450,
  		fill: "#e3e3e3",
  		stroke: "#000000"
	})
	.on("click", function() {
    	svg.selectAll("polygon")
       	.data(oxidized, function(d) {return d.id})
       	.transition()
       	.duration(2000)
       	.ease("bounce")
       	.attr("points" , function(d){return d.points;})
        .attr("transform" , function(d) {return "translate (" + d.translate + ")";});
     });
var q = svg.append("g")
	.attr("transform", "translate (" + quinone +")")

var qback = q.append("path")
	.attr("d", back)
	.attr("transform", "translate (" + [-4,10] +") scale(.8) rotate(" + -33 + ")")
	.attr("fill" ,"#FFFFFF")
	.attr("stroke" , "#000000")
	.attr("stroke-width" , "2")

var qtext =q.append("text")
	.text("Q")
	.attr("x",3.84)
	.attr ("y",28)
	.attr("text-anchor", "middle")
	.style("font-size" , "20px")
	.style("fill" , "#000000")

var qring = q.append("path")
	.attr("d", hex )
    .attr("stroke","#000000")
//    .attr("transform", "translate (" + quinone +") scale(.35) rotate(" + 39 + ")")
	.attr("transform", "scale(.35) rotate(" + 39 + ")")
	.attr("stroke-width" , "1")

var qtail = q.append("path")
	.attr("d", tail )
    .attr("stroke","#000000")
	.attr("fill-opacity", "0")
//    .attr("transform", "translate (" + [quinone[0]+8,quinone[1]+24]+") scale (1) rotate(" + 36 + ")")
	.attr("transform", "translate (" + [8,24] +") scale (1) rotate(" + 36 + ")")	
	.attr("stroke-width" , "1")

svg.attr("transform", "scale(" + 0.7616 + ")")