Skip to content

Instantly share code, notes, and snippets.

@koaning

koaning/index.html

Last active December 27, 2015 14:49
Show Gist options
  • Save koaning/7343326 to your computer and use it in GitHub Desktop.
Save koaning/7343326 to your computer and use it in GitHub Desktop.
Download ZIP
2d slider ui idea with d3
Raw
index.html
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/css/bootstrap.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.9/d3.min.js"></script>
<style type="text/css">
body{
}
</style>
<body>
<div class="row">
<div class="col-md-6">
<svg class="ui"></svg>
</div>
<div class="col-md-2">
<br>
<h1> x-value: <p id="xvalue"></p> </h1>
<h1> y-value: <p id="yvalue"></p> </h1>
</div>
</div>
</body>
<script type="text/javascript">
var width = 400,
height = 400,
padding = 50,
pt = 0,
x = 0,
y = 0;
function update( coords ){
var xNew = (coords[0] - padding) / (width-padding);
var yNew = (coords[1] - padding) / (width-padding);
if( 0 < xNew && xNew < 1 ){
x = xNew
cursor.attr("cx", coords[0])
}
if( 0 < yNew && yNew < 1 ){
y = 1 - yNew
cursor.attr("cy", coords[1])
}
console.log(x,y)
$("#xvalue").html( x )
$("#yvalue").html( y )
}
var background = d3.select('svg.ui').append("rect")
.attr("x", padding)
.attr("y", padding)
.attr("width", width - padding)
.attr("height", height - padding )
.style("fill", "#ddd")
.on("mousemove", function(){
pt = d3.mouse(this);
update(pt);
});
var cursor = d3.select('svg').append("circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 10)
.attr("fill", "#fff")
.attr("stroke-width", 3)
.attr("stroke", "black")
.on("mousemove", function(){
pt = d3.mouse(this);
update(pt);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment