Skip to content

Instantly share code, notes, and snippets.

@Sarah-W

Sarah-W/index.html

Last active December 22, 2015 01:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Sarah-W/6396302 to your computer and use it in GitHub Desktop.
Save Sarah-W/6396302 to your computer and use it in GitHub Desktop.
Download ZIP
D3 toy
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<!--<script type="text/javascript" src="./D3 Page Template_files/d3.v3.min.js"></script>-->
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
div{
background-color:darkgrey;
width:950px;
border:2px solid black;
text-align:center;
}
#control{ font: 11px sans-serif;
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
svg text { fill:black; stroke:none;
}
.tracer{stroke : black;
}
</style>
</head>
<body>
<div></div>
<div style= "display:inline-block;">
<button id=start>Start</button><button id=stop>Stop</button>
</div>
<script type="text/javascript">
var npoints = 16,
width = 500,
t =0,
lobes = 3,
started = false,
x = function(th,t){return (1.2+ Math.cos(t+th*lobes))*Math.cos(th)},
y = function(th,t){return (1.2+ Math.cos(t+th*lobes))*Math.sin(th)};
var thetas = d3.range(npoints).map(function (d){return 2*Math.PI*d/npoints});
var svg = d3.select("div").append("svg")
.attr("width",width+300)
.attr("height",width)
.append("g")
.attr("id","main");
d3.select("svg").append("g").attr("id","control")
//lobes stuff
//put the tracing circles on the display
var putCircles = function(){var tracers = d3.select("#main").selectAll("circle").data(thetas);
tracers.exit().remove();
tracers.enter().append("circle")
.attr("class","tracer")
.attr("r",5)
.attr("transform","translate(350,250)")
tracers.transition().duration(10)
.attr("cx",function(d){return 100*x(d,t)})
.attr("cy",function(d){return 100*y(d,t)})
.attr("fill",function(d){return "hsl(" + d*360/(2*Math.PI) + ",100%,50%)"});
};
//put the lines on the display
var putLines=function(){var lines = d3.select("#main").selectAll("line").data(thetas);
lines.exit().remove();
lines.enter().append("line");
lines.attr("stroke","lightgrey")
.attr("transform","translate(350,250)")
.transition().duration(10)
.attr("x1",function(d){return 20*Math.cos(d)})
.attr("y1",function(d){return 20*Math.sin(d)})
.attr("x2",function(d){return 220*Math.cos(d)})
.attr("y2",function(d){return 220*Math.sin(d)});
};
//Lobes
var lobeScale = d3.scale.log().domain([10,0.1]).range([0,400]);
var lobeax = d3.svg.axis().scale(lobeScale).orient("left");
d3.select("#control").append("g").attr("transform","translate (680,40)")
.attr("id","lobeg")
.append("rect")
.attr("height",400)
.attr("width",10)
.attr("fill","lightgrey")
.attr("stroke","black")
.attr("id","loberect");
d3.select("#lobeg").append("g")
.attr("transform", "translate(0,0)")
.call(lobeax);
//Put the pointer on the lobe bar
d3.select("#lobeg").append("circle")
.attr("cy",400)
.attr("cx",5)
.attr("r",5)
.attr("fill","darkgrey")
.attr("stroke","black");
var pointer = function(lobes){d3.select("#lobeg").select("circle")
.attr("cy", lobeScale(lobes));}
pointer(lobes);
//number of points control
var pointsScale = d3.scale.linear().domain([100,0]).range([0,400]);
//var lobeScale = d3.scale.linear().domain([10,0]).range([0,400]);
var pointsax = d3.svg.axis().scale(pointsScale).orient("right");
d3.select("#control").append("g").attr("transform","translate (700,40)")
.attr("id","pointsg")
.append("rect")
.attr("height",400)
.attr("width",10)
.attr("fill","lightgrey")
.attr("stroke","black")
.attr("id","pointsrect");
d3.select("#pointsg").append("g")
.attr("transform", "translate(10,0)")
.call(pointsax);
//Put the pointer on the bar
d3.select("#pointsg").append("circle")
.attr("cy",400)
.attr("cx",5)
.attr("r",5)
.attr("fill","darkgrey")
.attr("stroke","black");
var pointsPointer = function(npoints){d3.select("#pointsg").select("circle")
.attr("cy", pointsScale(npoints));}
pointsPointer(npoints);
// Do Eeeet
putLines();
putCircles();
d3.select("#start").on("click",function(){
stop=false
if (started == false){
started = true;
var myVar=setInterval(function(){
t= t + Math.PI/100;
d3.selectAll(".tracer")
.attr("cx",function(d){return 100*x(d,t)})
.attr("cy",function(d){return 100*y(d,t)});
//STOP!
if (stop == true){clearTimeout(myVar);
stop = false;
started = false}
},20);
};
});
d3.select("#stop").on("click",function(){stop=true;});
d3.select("#loberect").on("click",function(){var mouse_pos = d3.mouse(this);
lobes = lobeScale.invert(mouse_pos[1]);
pointer(lobes);
d3.selectAll(".tracer")
.attr("cx",function(d){return 100*x(d,t)})
.attr("cy",function(d){return 100*y(d,t)});
});
d3.select("#pointsrect").on("click",function(){var mouse_pos = d3.mouse(this);
npoints =Math.max(1, Math.round(pointsScale.invert(mouse_pos[1])));
pointsPointer(npoints);
thetas = d3.range(npoints).map(function (d){return 2*Math.PI*d/npoints});
putLines();
putCircles();
});
var lobesDrag = d3.behavior.drag().on("drag", function(){
dy=d3.event.dy;
newy = lobeScale(lobes)+dy
lobes = lobeScale.invert(newy);
lobes = Math.max(0.1, lobes);
lobes = Math.min(lobes, 10);
pointer(lobes);
d3.selectAll(".tracer")
.attr("cx",function(d){return 100*x(d,t)})
.attr("cy",function(d){return 100*y(d,t)});
});
d3.select("#lobeg circle").call(lobesDrag);
var pointsDrag = d3.behavior.drag().on("drag", function(){
dy=d3.event.dy;
newy=pointsScale(npoints)+dy
npoints = Math.round(pointsScale.invert(newy))
npoints =Math.max(1, npoints);
npoints =Math.min(100, npoints);
pointsPointer(npoints);
thetas = d3.range(npoints).map(function (d){return 2*Math.PI*d/npoints});
putLines();
putCircles();
});
d3.select("#pointsg circle").call(pointsDrag);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment