<meta charset="utf-8">
<body>
<style>
#line{
width: 100%;
margin: 20px 0;
height: 300px;
background: #eee;
}
path {
stroke: steelblue;
stroke-width: 1;
fill: none;
}
</style>
<button id="randomize">Create random line</button>
<div id="line"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
</script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
</body>
</html>
var svg = d3.select("#line").append("svg:svg").attr("width", "100%").attr("height", "100%");
var data = d3.range(50).map(function(){return Math.random()*10})
var x = d3.scale.linear().domain([0, 10]).range([0, 700]);
var y = d3.scale.linear().domain([0, 10]).range([10, 290]);
var line = d3.svg.line()
.interpolate("cardinal")
.x(function(d,i) {return x(i);})
.y(function(d) {return y(d);})
var path = svg.append("svg:path").attr("d", line(data));
var circle =
svg.append("circle")
.attr("cx", 100)
.attr("cy", 350)
.attr("r", 3)
.attr("fill", "red");
var circleBehind =
svg.append("circle")
.attr("cx", 50)
.attr("cy", 300)
.attr("r", 3)
.attr("fill", "blue");
var circleAhead =
svg.append("circle")
.attr("cx", 125)
.attr("cy", 375)
.attr("r", 3)
.attr("fill", "green");
var pathEl = path.node();
var pathLength = pathEl.getTotalLength();
var BBox = pathEl.getBBox();
var scale = pathLength/BBox.width;
var offsetLeft = document.getElementById("line").offsetLeft;
var randomizeButton = d3.select("button");
var x = 100;
var y = 100;
var pos = {x: x, y: y}
var vx = 1;
var gravity = 0.2;
var previousY = 1;
var direction;
var firstDownhill = false;
function play() {
requestAnimationFrame(play);
//var x = 100//d3.event.pageX - offsetLeft;
var beginning = x,
end = pathLength,
target;
if (pos.x >= 1000 || pos.x <= 0) vx = -vx;
var difference = pos.y - previousY;
console.log("***")
console.log(difference)
if (vx > 0) {
if (difference > 0) {
console.log("down")
//firstDownhill = true;
vx = vx + (gravity * 0.7);
} else {
console.log("up")
vx = vx - (gravity * 0.7);
}
} else {
if (difference > 0) {
console.log("down")
//firstDownhill = true;
vx = vx - (gravity * 0.7);
} else {
console.log("up")
vx = vx + (gravity * 0.7);
}
}
x += vx;
previousY = pos.y;
pos = pathEl.getPointAtLength(x);
circle
.attr("opacity", 1)
.attr("cx", pos.x)
.attr("cy", pos.y);
posBehind = pathEl.getPointAtLength(x - 10);
circleBehind
.attr("opacity", 1)
.attr("cx", posBehind.x)
.attr("cy", posBehind.y);
posAhead = pathEl.getPointAtLength(x + 10);
circleAhead
.attr("opacity", 1)
.attr("cx", posAhead.x)
.attr("cy", posAhead.y);
}
play();
randomizeButton.on("click", function(){
data = d3.range(50).map(function(){return Math.random()*10});
circle.attr("opacity", 0)
path
.transition()
.duration(300)
.attr("d", line(data));
});
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |