D3 Examples - Drawing a Circle Outside a Circle

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { 
  margin: 0 auto;
  position: fixed;
}
​
#circle-box {
  margin: 0 auto;
}
</style>
</head>
​
<body>
<div id="circle-box"></div>
 
<script>
    
// This is a neat trick to keep margins consistent
var margin = {top: 20, right: 10, bottom: 20, left: 10};
  
// Establish your SVG viewbox
// And subtract your margins
var width = 600 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
  
// Define your inner circle
var innerR = width/6;
var innerCY = height/2;
var innerCX = width/2;
​
// Define a buffer (essentially a larger circle around your inner circle).
// This helps illustrate how we arrive at the orbital object's X & Y position.
var bufferR = width/4
​
// Define your orbital objects (a baby circle)
var orbitR = width/50;
​
// Define your base SVG selection
// This establishes a shorthand (svg) that reduces repetitive code.
var svg = d3.select("#circle-box").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
​
// Draw a circle to orbit
// ** note that shorthand use of svg! **
svg.append("circle")
  .attr("r", innerR)
  .attr("cy", innerCY)
  .attr("cx", innerCX)
  .attr("class","innerCircle")
  .attr("stroke-width", 5)
  .attr("stroke-style","solid")        
  .attr("fill", "#bdc3c7");
  
// Draw a big circle around it to illustrate your "buffer"
svg.append('circle')
    .attr('r', bufferR)
// ** note that we don't need a new X & Y for the larger circle  **
// ** this is because we share the same ones as the inner circle **
    .attr('cy', innerCY)
    .attr('cx', innerCX)
    .attr('class', 'bufferCircle')
    .attr('stroke', '#9b59b6')
    .attr('stroke-dasharray', '5, 10')
    .attr('fill', 'none');
​
// Orbital object:
//
// We'll need to calculate the X & Y coordinates of the orbital object.
// Using our buffer's radius, we calculate X & Y by using sine/cosine
// respectively (providing it radians).
//
// 2π is the circumference of a circle, then to get degrees into radians
// one divides π (π/180) and multiplies it by degrees to produce its radians.
//
// The below example provides 180 degrees in radians (180 * (π/180))
  
var orbitalX = innerCX - (Math.sin( (180 * Math.PI/180) ) * (bufferR));
var orbitalY = innerCY - (Math.cos( (180 * Math.PI/180) ) * (bufferR));
  
// Kudos to @jhellier for this geometry reminder c: 
​
// With our orbital object's X & Y solved, we can draw our baby circle!
svg.append('circle')
    .attr('r', orbitR)
    .attr('cy', orbitalY)
    .attr('cx', orbitalX)
    .attr('fill', '#8e44ad');
​
​
</script>
</body>
​
    