[ Launch: b1 with ticks ] 5415695 by panamantis
[ Launch: b1 ] 5410219 by panamantis
[ Launch: Tributary inlet ] 4637557 by BruceHubbard
-
-
Save panamantis/5415695 to your computer and use it in GitHub Desktop.
b1 with ticks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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; | |
//the svg element, hey this looks like jQuery | |
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) | |
); | |
// Turn on the force | |
var nodes = {}; | |
var force = d3.layout.force() | |
.nodes(d3.values(nodes)) | |
.linkDistance(60) | |
.charge(-300) | |
.on("tick", tick) | |
.start(); | |
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; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment