Last active
December 18, 2015 14:50
-
-
Save jkeohan/186482e8ed4618d9272a to your computer and use it in GitHub Desktop.
Dynamic Circles
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"></link> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> | |
| <!--<link rel='stylesheet' type="text/css" href="w3.d4.assessment.css">--> | |
| </head> | |
| <style> | |
| h2,h3{ | |
| text-align: center; | |
| } | |
| .button { | |
| /*width: 50px;*/ | |
| height: 26px; | |
| display: block; | |
| border-top: 1px solid #96d1f8; | |
| background: #65a9d7; | |
| background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7)); | |
| background: -webkit-linear-gradient(top, #3e779d, #65a9d7); | |
| background: -moz-linear-gradient(top, #3e779d, #65a9d7); | |
| background: -ms-linear-gradient(top, #3e779d, #65a9d7); | |
| background: -o-linear-gradient(top, #3e779d, #65a9d7); | |
| padding: 5px 10px; | |
| -webkit-border-radius: 8px; | |
| -moz-border-radius: 8px; | |
| border-radius: 8px; | |
| -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; | |
| -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; | |
| box-shadow: rgba(0,0,0,1) 0 1px 0; | |
| text-shadow: rgba(0,0,0,.4) 0 1px 0; | |
| color: white; | |
| font-size: 14px; | |
| font-family: Georgia, serif; | |
| text-decoration: none; | |
| vertical-align: middle; | |
| } | |
| .button:hover { | |
| border-top-color: #28597a; | |
| background: #28597a; | |
| color: #ccc; | |
| } | |
| .button:active { | |
| border-top-color: #1b435e; | |
| background: #1b435e; | |
| } | |
| .leftDiv { | |
| width: 200; | |
| height: 200; | |
| float:left; | |
| /*border: solid 4px red;*/ | |
| } | |
| .rightDiv { | |
| overflow:hidden; | |
| padding:3px; | |
| /*border: solid 4px blue;*/ | |
| } | |
| .circle_data { | |
| /*border: solid 4px green;*/ | |
| text-align: left; | |
| width:auto; | |
| height:165px; | |
| overflow: scroll; | |
| } | |
| .wrapper { | |
| /*border: solid 4px black;*/ | |
| overflow:hidden; | |
| width:470px; | |
| padding:5px; | |
| } | |
| li { | |
| font-size: small; | |
| text-align: left; | |
| margin-left:-10px; | |
| } | |
| .selected { | |
| font-weight: bold; | |
| } | |
| .wrapper { | |
| margin:auto; | |
| } | |
| </style> | |
| <body> | |
| <div class="container-narrow wrapper"> | |
| <div class="row"> | |
| <h2>Exercise in Circles</h2> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-12"></div> | |
| <div class="recreate"> | |
| <h3>Circle Regeneration</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| var width = 200, | |
| height = 200; | |
| var body = d3.select("body"); | |
| var recreateText = "Clicking inside the rectangle will dynamically create " + | |
| "cirlces and populate a list with thier x,y,r and color attributes. Once you have decided " + | |
| "that enough circles have been created, clicking the 'Recreate All Circles' " + | |
| "button will regenerate those circles in the same order they were originally created" | |
| var wrapper = body.select(".wrapper") | |
| var recreate = d3.select(".recreate") | |
| recreate.append("p").text(recreateText) | |
| var leftDiv = recreate.append('div').attr("class","leftDiv") | |
| var rightDiv = recreate.append('div').attr("class","rightDiv") | |
| var svg = leftDiv.append("svg") | |
| .attr("class","svg") | |
| .attr("width",width) | |
| .attr("height",height) | |
| .on("mousedown",draw) | |
| .append('g') | |
| //.attr("transform","translate(1,1)") | |
| svg.append("rect") | |
| .attr("x", 0) | |
| .attr("y", 0) | |
| .attr("height", height) | |
| .attr("width", width) | |
| .style("stroke", "black") | |
| .style("fill", "none") | |
| .style("stroke-width", ".5"); | |
| var buttons_container = rightDiv.append('div') | |
| buttons_container.append("input") | |
| .attr("type","button") | |
| .attr("class","button") | |
| .attr("value","Recreate All Circles") | |
| .style("margin-left","40px") | |
| .on("click",replay); | |
| var circle_data = rightDiv.append('div') | |
| circle_data.attr("class","circle_data") | |
| var ol = circle_data.append("ol") | |
| var circleObj = function (x,y,r,fill) { | |
| this.x = x; | |
| this.y = y; | |
| this.r = r; | |
| this.fill = fill; | |
| this.stroke = "black"; | |
| this.opacity = ".2"; | |
| }; | |
| var allCircles = []; | |
| function draw () { | |
| //console.log(d3.mouse(this)); | |
| var r = Math.floor(Math.random()*250); | |
| var g = Math.floor(Math.random()*250); | |
| var b = Math.floor(Math.random()*250); | |
| var color = "rgb(" + r + "," + g + "," + b + ")"; | |
| var mouseCoordX = (d3.mouse(this)[0]); | |
| var mouseCorrdY = (d3.mouse(this)[1]); | |
| var r = 15; | |
| while(mouseCorrdY > height - r || mouseCorrdY < r || mouseCoordX > width - r || mouseCoordX < r) { | |
| r-- | |
| } | |
| var circle = svg.append("circle") | |
| .attr("cx",mouseCoordX) | |
| .attr("cy",mouseCorrdY) | |
| .attr("r",r) | |
| .style("fill", color) | |
| .style("stroke","black") | |
| .style("opacity", .2) | |
| //.style("fill", "rgb(" + r + "," + g + "," + b + ")") | |
| //.style("fill", "rgb(255,0,0)") | |
| var newCircle = new circleObj(mouseCoordX,mouseCorrdY,r,color); | |
| allCircles.push(newCircle); | |
| console.log(allCircles); | |
| var str = "x:" + newCircle.x + ", " + "y:" + newCircle.y + ", " + "r:" + newCircle.r + ", " + newCircle.fill | |
| //ol.append('li').text(str).attr("class","selected") | |
| d3.select(".selected").classed("selected",false); | |
| var li = ol.selectAll('li').data(allCircles).enter().append('li').text(function(d) { return str}) | |
| .attr("class",function(d){ | |
| if(d.x === newCircle.x) | |
| { return "selected"; console.log(d);} | |
| else | |
| {return "notselected"; console.log(d);}}) | |
| } | |
| function redraw (obj) { | |
| var circle = svg.append("circle") | |
| .attr("cx",obj.x) | |
| .attr("cy",obj.y) | |
| .attr("r",obj.r) | |
| .style("fill",obj.fill) | |
| .style("stroke",obj.stroke) | |
| .style("opacity",obj.opacity) | |
| d3.select(".selected").classed("selected",false); | |
| var li = d3.selectAll('li') | |
| .attr("class",function(d){ | |
| if(d.x === obj.x) | |
| { return "selected"; console.log(d);} | |
| else | |
| {return "notselected"; console.log(d);}}) | |
| } | |
| //replayAll.on('click', replay); | |
| function replay () { | |
| svg.selectAll("circle").remove(); | |
| var i = 0; | |
| playInterval = setInterval(function() { | |
| redraw(allCircles[i]); | |
| i++ | |
| if(i > allCircles.length-1) { clearInterval(playInterval) } | |
| },700 ); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment