b1 with ticks

_.md

[ Launch: b1 with ticks ] 5416334 by panamantis
[ Launch: b1 with ticks ] 5415695 by panamantis
[ Launch: b1 ] 5410219 by panamantis
[ Launch: Tributary inlet ] 4637557 by BruceHubbard

config.json

{"description":"b1 with ticks","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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}},"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,"fullscreen":false}

inlet.js

//height/width of our svg viewport and the amount of padding around it
//you can play around with these numbers and the graph should scale accordingly
var width = window.innerWidth * 0.9,
    height = window.innerHeight * 0.9,
    padding = 35;


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


var rect = svg.append("path")
    .attr("d", rightRoundedRect(200, 100, 480, 240, 20));


// Returns path data for a rectangle with rounded right corners.
// The top-left corner is ⟨x,y⟩.
function rightRoundedRect(x, y, width, height, radius) {
  return "M" + x + "," + y
       + "h" + (width - radius)
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
       + "v" + (height - 2 * radius)
       + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
       + "h" + (radius - width)
       + "z";
}





var rect3 = svg.append("path")
    .attr("d", rrect()
      .x(700)
      //.y(200)
    );



  
  var lavaPath = svg.append("path")
      .classed("lava", true)
      .style("fill", "none")
      .style("stroke", "#000")
      .style("stroke-width", 10)
      .attr("d", inkpath()
            );


//   lavaPathD="M -100.05947071593178 -173.17073170731706 A 200 200 0 1 0 100.05947071593178 -173.17073170731706A 110 110 0 0 1 73.85341886175915 -342.57839721254356a 100 100 0 1 0 -147.7068377235183 0A 110 110 0 0 1 -100.05947071593178 -173.17073170731706A 110 110 0 0 1 -100.05947071593178 -173.17073170731706";
//   lavaPath.attr("d", lavaPathD);


function inkpath() {
  
  // default values
  var x = 720,
      y=300,
      width=500,
      height=240,
      radius=20;
  
  
  function inkf() {
   lavaPathD="M -100.05947071593178 -173.17073170731706 A 200 200 0 1 0 100.05947071593178 -173.17073170731706A 110 110 0 0 1 73.85341886175915 -342.57839721254356a 100 100 0 1 0 -147.7068377235183 0A 110 110 0 0 1 -100.05947071593178 -173.17073170731706A 110 110 0 0 1 -100.05947071593178 -173.17073170731706";
   return lavaPathD; 

  }
  
  inkf.x=function(value) {
       if (!arguments.length) return x;  // Use default above
       x=value;
       //x=800;
       return inkf;
  }

  return inkf;
}

  



function rrect() {   // d3.svg.arc = function() {
  
  // default values
  var x = 720,
      y=300,
      width=500,
      height=240,
      radius=20;
  
  
  function rightRoundedRect() {
    
   //?not sure how to call func// var r0 = x.apply(this, arguments);
    
  return "M" + x + "," + y
       + "h" + (width - radius)
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
       + "v" + (height - 2 * radius)
       + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
       + "h" + (radius - width)
       + "z";
  }
  
  rightRoundedRect.x=function(value) {
       if (!arguments.length) return x;  // Use default above
       x=value;
       //x=800;
       return rightRoundedRect;
  }

  return rightRoundedRect;
}