fresh block

forked from anonymous's block: fresh block

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

var holder = d3.select("body") // select the 'body' element
      .append("svg")           // append an SVG element to the body
      .attr("width", 950)      
      .attr("height", 500);

// draw main rectangle
holder.append("rect")        // attach a rectangle
    .attr("x", 0)         // position the left of the rectangle
    .attr("y", 0)          // position the top of the rectangle
    .attr("height", 500)    // set the height
    .attr("width", 950)    // set the width
    .style("stroke-width", 5)    // set the stroke width
    .style("stroke", "#001400")    // set the line colour
    .style("fill", "#80B280");    // set the fill colour

// draw the two halves
holder.append("rect")        // attach a rectangle
    .attr("x", 0)         // position the left of the rectangle
    .attr("y", 0)          // position the top of the rectangle
    .attr("height", 500)    // set the height
    .attr("width", 475)    // set the width
    .style("stroke-width", 5)    // set the stroke width
    .style("stroke", "#001400")    // set the line colour
    .style("fill", "#80B280");    // set the fill colour

// draw a circle - center circle
holder.append("circle")          // attach a circle
    .attr("cx", 475)             // position the x-centre
    .attr("cy", 250)             // position the y-centre
    .attr("r", 60)               // set the radius
    .style("stroke-width", 5)    // set the stroke width
    .style("stroke", "#001400")      // set the line colour
    .style("fill", "none");      // set the fill colour

// this is drawing paint 1
holder.append("rect")        // attach a rectangle
    .attr("x", 0)         // position the left of the rectangle
    .attr("y", 170)          // position the top of the rectangle
    .attr("height", 160)    // set the height
    .attr("width", 190)    // set the width
    .style("stroke-width", 5)    // set the stroke width
    .style("stroke", "#001400")    // set the line colour
    .style("fill", "#80B280");    // set the fill colour

// drawing paint 2
holder.append("rect")        // attach a rectangle
    .attr("x", 760)         // position the left of the rectangle
    .attr("y", 170)          // position the top of the rectangle
    .attr("height", 160)    // set the height
    .attr("width", 190)    // set the width
    .style("stroke-width", 5)    // set the stroke width
    .style("stroke", "#001400")    // set the line colour
    .style("fill", "#80B280");    // set the fill colour

// drawing the 3P lines
var vis = d3.select("body").append("svg")
var pi = Math.PI;
    
var arc = d3.svg.arc()
    .innerRadius(245)
    .outerRadius(250)
    .startAngle(.46) //radians
    .endAngle(2.68) //just radians
    
var arc2 = d3.svg.arc()
    .innerRadius(245)
    .outerRadius(250)
    .startAngle(-.46) //radians
    .endAngle(-2.68) //just radians

holder.append("path")
    .attr("d", arc)
    .attr("fill", "#001400")
    .attr("transform", "translate(33,250)")
    
    
    holder.append("path")
    .attr("d", arc2)
    .attr("fill", "#001400")
    .attr("transform", "translate(920,250)");

//drawing the baskete
holder.append("circle")          // attach a circle
    .attr("cx", 52.5)             // position the x-centre
    .attr("cy", 250)             // position the y-centre
    .attr("r", 9)               // set the radius
    .style("stroke-width", 5)    // set the stroke width
    .style("stroke", "#001400")      // set the line colour
    .style("fill", "none");      // set the fill colour
 
 holder.append("circle")          // attach a circle
    .attr("cx", 900)             // position the x-centre
    .attr("cy", 250)             // position the y-centre
    .attr("r", 9)               // set the radius
    .style("stroke-width", 5)    // set the stroke width
    .style("stroke", "#001400")      // set the line colour
    .style("fill", "none");      // set the fill colour
       
    
    
  //3pt corner lines  
holder.append("rect")        // attach a rectangle
  .attr("x", 0)         // position the left of the rectangle
  .attr("y", 30)          // position the top of the rectangle
  .attr("height", .5)    // set the height
  .attr("width", 140)    // set the width
  .style("stroke-width", 5)    // set the stroke width
  .style("stroke", "#001400")    // set the line colour
  .style("fill", "#80B280");    // set the fill colour

holder.append("rect")        // attach a rectangle
  .attr("x", 0)         // position the left of the rectangle
  .attr("y", 470)          // position the top of the rectangle
  .attr("height", .5)    // set the height
  .attr("width", 140)    // set the width
  .style("stroke-width", 5)    // set the stroke width
  .style("stroke", "#001400")    // set the line colour
  .style("fill", "#80B280");    // set the fill colour

//other side
    
 holder.append("rect")        // attach a rectangle
  .attr("x", 810)         // position the left of the rectangle
  .attr("y", 30)          // position the top of the rectangle
  .attr("height", .5)    // set the height
  .attr("width", 140)    // set the width
  .style("stroke-width", 5)    // set the stroke width
  .style("stroke", "#001400")    // set the line colour
  .style("fill", "#80B280");    // set the fill colour

holder.append("rect")        // attach a rectangle
  .attr("x", 810)         // position the left of the rectangle
  .attr("y", 470)          // position the top of the rectangle
  .attr("height", .5)    // set the height
  .attr("width", 140)    // set the width
  .style("stroke-width", 5)    // set the stroke width
  .style("stroke", "#001400")    // set the line colour
  .style("fill", "#80B280");    // set the fill colour 
   
    
    
    
    
    //rim dimensions
holder.append("rect")        // attach a rectangle
  .attr("x", 35)         // position the left of the rectangle
  .attr("y", 215)          // position the top of the rectangle
  .attr("height", 72)    // set the height
  .attr("width", .25)    // set the width
  .style("stroke-width", 5)    // set the stroke width
  .style("stroke", "#001400")    // set the line colour
  .style("fill", "#80B280");    // set the fill colour

//rim dimensions
holder.append("rect")        // attach a rectangle
  .attr("x", 917)         // position the left of the rectangle
  .attr("y", 215)          // position the top of the rectangle
  .attr("height", 72)    // set the height
  .attr("width", .25)    // set the width
  .style("stroke-width", 5)    // set the stroke width
  .style("stroke", "#001400")    // set the line colour
  .style("fill", "#80B280");    // set the fill colour

// Dragging circles

var color = d3.scale.ordinal().range(["white", "green", "orange"]);
var color1 = d3.scale.ordinal().range(["blue", "blue", "black"]);
var size = d3.scale.ordinal().range([16, 16, 12]);

//var color = d3.scale.category10();

var drag = d3.behavior.drag()
    .origin(function(d) { return d; })
    .on("dragstart", dragstarted)
    .on("drag", dragged)
    .on("dragend", dragended);

d3.csv("dots.txt", dottype, function(error, dots) {
  dot = holder.append("g")
      .attr("class", "dot")
    .selectAll("circle")
      .data(dots)
    .enter().append("circle")
      .attr("r", function(d) { return size(d.team); })
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .style("fill", function(d) { return color(d.team); })
      .style("stroke", function(d) { return color1(d.team); })
  		.style("stroke-width", 3)
      .call(drag);
});

// functions for above...

function dottype(d) {
  d.x = +d.x;
  d.y = +d.y;
  return d;
}

function dragstarted(d) {
  d3.event.sourceEvent.stopPropagation();
  d3.select(this)
  //.classed("dragging", true);
;
}

function dragged(d) {
  d3.select(this)
  .attr("cx", d.x = d3.event.x)
  .attr("cy", d.y = d3.event.y)
  .style("opacity", .5);
}

function dragended(d) {
  d3.select(this)
  .style("opacity", 1) 
//  .classed("dragging", false);
;
}

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js