D3 Examples - Dynamic Circles

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
    <head>
​
        <link href="https://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>
​
    