D3 scatter plot

by Kelsey Williams

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
  <div class="container">
  </div>
</body>

CSS

.container {
  width: 80%;
  margin: 0 auto;
  padding-top: 50px;
  svg {
    margin: 0 auto;
    width: 600px;
    // border: 1px dashed grey;
  }
}

.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.axis text {
  font-family: sans-serif;
  font-size: 11px;
}

JavaScript

var w = 500,
    h = 300,
    padding = 50,
    dataset = [],
    numDataPoints = 50,
    xRange = Math.random(),
    yRange = Math.random();

for (var i = 0; i < numDataPoints; i++) {
  var newNumber1 = Math.random();
  var newNumber2 = Math.random();	
  
	dataset.push([newNumber1, newNumber2]);
}
console.log(d3);
//Create scale functions
var xScale = d3.scale.linear()
               .domain([0, d3.max(dataset, function(d) {
                 return d[0]; 
               }) ])
               .range([padding, w - padding * 2]);

var yScale = d3.scale.linear()
               .domain([0, d3.max(dataset, function(d) {
                 return d[1]; 
               })])
               .range([h - padding, padding]);

var rScale = d3.scale.linear()
							 .domain([0, d3.max(dataset, function(d) {
                 return d[1];
               })])
							.range([2, 5]);

var formatAsPercentage = d3.format(".1%"); 

//Define X axis
var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom")
              .ticks(5) 
              .tickFormat(formatAsPercentage);

//Define Y axis
var yAxis = d3.svg.axis()
              .scale(yScale)
							.orient("left")
							.ticks(5)
							.tickFormat(formatAsPercentage);

//Create SVG element
var svg = d3.select(".container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

//Create circles
svg.selectAll("circle")
	 .data(dataset)
   .enter()
	 .append("circle")
	 .attr("cx", function(d) {
	   return xScale(d[0]);
	 })
	 .attr("cy", function(d) {
	   return yScale(d[1]);
	 })
	 .attr("r", function(d) {
	   return rScale(d[1]);
	 })
   .on("click", function(d) {
      /*d.pulse = !d.pulse;
      if (d.pulse) {
        var selected_circles = d3.select(this);
        pulsate(selected_circles);

      }*/
      var circle = d3.select(this);
      circle.attr("r", 10)
      //d.attr("r", 10);
    }).call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
       ...