4 Quadrant Scatter Plot D3 v4

This is a simple line graph demonstrating the addition of scatterplot points to a line graph. This was written using d3.js v4 and is a follow on to the simple graph example here.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.

forked from d3noob's block: Scatterplot with v4

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body { font-family: Arial;}
  
.axis, .axis path {
  fill: none;
  stroke: #ACB849;
}
text {
  stroke: none;
  fill: #666666;
}
</style>
<body>
  <svg id="scatter" width="500" height="500"></svg>
  
<script src="https://d3js.org/d3.v4.min.js"></script>
  
<script>
var svg = d3.select("#scatter"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    domainwidth = width - margin.left - margin.right,
    domainheight = height - margin.top - margin.bottom;
  
var x = d3.scaleLinear()
    .domain(padExtent([1,5]))
    .range(padExtent([0, domainwidth]));
var y = d3.scaleLinear()
    .domain(padExtent([1,5]))
    .range(padExtent([domainheight, 0]));
  
var g = svg.append("g")
		.attr("transform", "translate(" + margin.top + "," + margin.top + ")");
  
g.append("rect")
    .attr("width", width - margin.left - margin.right)
    .attr("height", height - margin.top - margin.bottom)
    .attr("fill", "#F6F6F6");

d3.json("data.json", function(error, data) {
  if (error) throw error;

data.forEach(function(d) {
      d.consequence = +d.consequence;
      d.value = +d.value;
  });
      
  g.selectAll("circle")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 7)
      .attr("cx", function(d) { return x(d.consequence); })
      .attr("cy", function(d) { return y(d.value); })
    	.style("fill", function(d) {        
          if (d.value >= 3 && d.consequence <= 3) {return "#60B19C"} // Top Left
          else if (d.value >= 3 && d.consequence >= 3) {return "#8EC9DC"} // Top Right
          else if (d.value <= 3 && d.consequence >= 3) {return "#D06B47"} // Bottom Left
          else { return "#A72D73" } //Bottom Right         
      });

g.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + y.range()[0] / 2 + ")")
      .call(d3.axisBottom(x).ticks(5));

g.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + x.range()[1] / 2 + ", 0)")
      .call(d3.axisLeft(y).ticks(5));
});
  
function padExtent(e, p) {
  	if (p === undefined) p = 1;
  	return ([e[0] - p, e[1] + p]);
}
</script>
</body>

https://d3js.org/d3.v4.min.js