All examples By author By category About

jjcruzhernandez

Full window Github gist

scatterPlotMatrix_D3

<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>

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

// set the dimensions and margins of the graph
var margin = {top: 50, right: 15, bottom: 150, left: 100},
    width = 350 - margin.left - margin.right,
    height = 350 - margin.top - margin.bottom;
console.log(width)
console.log(height)

// set the ranges
var x = d3.scaleLinear()
          .range([0, width]);
var y = d3.scaleLinear()
          .range([height, 0]);

//set svg
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom - 130)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");

// get the data
d3.csv("alabasterPD.csv", function(error, data) {
  if (error) throw error;

// format the data
  data.forEach(function(d) {
    d.Rape = +d.Rape;
    d.Assault = +d.Assault;
    d.Murder = +d.Murder;
  });
  
  // Scale X and Y axis
  x.domain(d3.extent(data, function(d) { return d.Assault; }));
  y.domain(d3.extent(data, function(d) { return d.Murder; }));
  //y.domain([0, d3.max(data, function(d) { return d.Murder; })]);

// Add the scatterplot
  svg.selectAll("dot")
      .data(data)
      .enter().append("circle")
      .attr("r", 5)
      .attr("cx", function(d) { return x(d.Assault); })
      .attr("cy", function(d) { return y(d.Murder); });

// add the x Axis
  svg.append("g")
      .attr("transform", "translate(0," + (height + 10) + ")")
      .call(d3.axisBottom(x).tickSize(0).tickFormat(""));
     
  // add the y Axis
  svg.append("g")
      .call(d3.axisLeft(y).tickFormat(d3.format("d")).ticks(2));

//line to create box
  svg.append("g")
      .attr("transform", "translate(0, 0)")
      .call(d3.axisBottom(x).tickSize(0).tickFormat(""));

//line to create box
svg.append("g")
      .attr("transform", "translate(" + width + ", 0)")
      .call(d3.axisLeft(y).tickSize(0).tickFormat(""));

});

//REPEAT ALL 8 MORE TIME

//////////////////////////////////////////////////////////////
var margin2 = {top: 50, right: 15, bottom: 150, left: 20},
    width2 = 350 - margin.left - margin.right,
    height2 = 350 - margin2.top - margin2.bottom;

var x2 = d3.scaleLinear()
          .range([0, width]);
var y2 = d3.scaleLinear()
          .range([height, 0]);

var svg2 = d3.select("body").append("svg")
    .attr("width", width2 + margin2.left + margin2.right)
    .attr("height", height2 + margin2.top + margin2.bottom -130)
  .append("g")
    .attr("transform", 
           "translate(" + margin2.left + "," + margin2.top + ")");

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

data.forEach(function(d) {
    d.Rape = +d.Rape;
    d.Assault = +d.Assault;
    d.Murder = +d.Murder;
  });
  
  x2.domain(d3.extent(data, function(d) { return d.Rape; }));
  y2.domain(d3.extent(data, function(d) { return d.Murder; }));

svg2.selectAll("dot2")
      .data(data)
      .enter().append("circle")
      .attr("r", 5)
      .attr("cx", function(d) { return x2(d.Rape); })
      .attr("cy", function(d) { return y2(d.Murder); });

svg2.append("g")
      .attr("transform", "translate(0," + (height+10) + ")")
      .call(d3.axisBottom(x2).tickSize(0).tickFormat(""));
     
  svg2.append("g")
      .call(d3.axisLeft(y2).tickSize(0).tickFormat(""));

svg2.append("g")
      .attr("transform", "translate(0, 0)")
      .call(d3.axisBottom(x).tickSize(0).tickFormat(""));

svg2.append("g")
      .attr("transform", "translate(" + width + ", 0)")
      .call(d3.axisLeft(y).tickSize(0).tickFormat(""));

});

/////////////////////////////////////////////////////////////////////////

var x3 = d3.scaleLinear()
          .range([0, width]);
var y3 = d3.scaleLinear()
          .range([height, 0]);

var svg3 = d3.select("body").append("svg")
    .attr("width", width2 + margin2.left + margin2.right + 110)
    .attr("height", height2 + margin2.top + margin2.bottom-130)
  .append("g")
    .attr("transform", 
           "translate(" + margin2.left + "," + margin2.top + ")");

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

data.forEach(function(d) {
    d.Rape = +d.Rape;
    d.Assault = +d.Assault;
    d.Murder = +d.Murder;
  });
  console.log(data);
  
  x3.domain(d3.extent(data, function(d) { return d.Murder; }));
  y3.domain(d3.extent(data, function(d) { return d.Murder; }));

svg3.selectAll("dot3")
      .data(data)
      .enter().append("circle")
      .attr("r", 5)
      .attr("cx", function(d) { return x3(d.Murder); })
      .attr("cy", function(d) { return y3(d.Murder); });

svg3.append("g")
      .attr("transform", "translate(0," + (height+10) + ")")
      .call(d3.axisBottom(x3).tickSize(0).tickFormat(""));
     
  svg3.append("g")
      .call(d3.axisLeft(y3).tickSize(0).tickFormat(""));

svg3.append("g")
      .attr("transform", "translate(0, 0)")
      .call(d3.axisBottom(x).tickSize(0).tickFormat(""));

svg3.append("g")
      .attr("transform", "translate(" + width + ", 0)")
      .call(d3.axisLeft(y).tickSize(0).tickFormat(""));

});

svg3.append("text")
      .attr("text-anchor", "end")
      .attr("x", width-10)
      .attr("y", height-10)
      .text("# Murders");

//SECOND ROW///////////////////////////////////////////////////////////////////////////////////////////////

var margin4 = {top: 10, right: 15, bottom: 150, left: 100},
    width = 350 - margin.left - margin.right,
    height = 350 - margin.top - margin.bottom - 10;
console.log(width)
console.log(height)

var x4 = d3.scaleLinear()
          .range([0, width]);
var y4 = d3.scaleLinear()
          .range([height, 0]);

var svg4 = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right) //110
    .attr("height", height + margin.top + margin.bottom-150)
  .append("g")
    .attr("transform", 
          "translate(" + margin4.left + "," + margin4.top + ")");

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

data.forEach(function(d) {
    d.Rape = +d.Rape;
    d.Assault = +d.Assault;
    d.Murder = +d.Murder;
  });
  
  x4.domain(d3.extent(data, function(d) { return d.Assault; }));
  y4.domain(d3.extent(data, function(d) { return d.Rape; }));

svg4.selectAll("dot")
      .data(data)
      .enter().append("circle")
      .attr("r", 5)
      .attr("cx", function(d) { return x4(d.Assault); })
      .attr("cy", function(d) { return y4(d.Rape); });

svg4.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x4).tickSize(0).tickFormat(""));
     
  svg4.append("g")
      .call(d3.axisLeft(y4).tickFormat(d3.format("d")).ticks(3));

svg4.append("g")
      .attr("transform", "translate(0, 0)")
      .call(d3.axisBottom(x).tickSize(0).tickFormat(""));

svg4.append("g")
      .attr("transform", "translate(" + width + ", 0)")
      .call(d3.axisLeft(y).tickSize(0).tickFormat(""));

});

///////////////////////////////////////////////////////////////////

var margin5 = {top: 10, right: 15, bottom: 150, left: 20},
    width5 = 350 - margin.left - margin.right,
    height5 = 350 - margin5.top - margin5.bottom - 10;

var x5 = d3.scaleLinear()
          .range([0, width]);
var y5 = d3.scaleLinear()
          .range([height, 0]);

var svg5 = d3.select("body").append("svg")
    .attr("width", width5 + margin5.left + margin5.right)
    .attr("height", height5 + margin5.top + margin5.bottom-150)
  .append("g")
    .attr("transform", 
           "translate(" + margin5.left + "," + margin5.top + ")");

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

data.forEach(function(d) {
    d.Rape = +d.Rape;
    d.Assault = +d.Assault;
    d.Murder = +d.Murder;
  });

x5.domain(d3.extent(data, function(d) { return d.Rape; }));
  y5.domain(d3.extent(data, function(d) { return d.Rape; }));

svg5.selectAll("dot2")
      .data(data)
      .enter().append("circle")
      .attr("r", 5)
      .attr("cx", function(d) { return x5(d.Rape); })
      .attr("cy", function(d) { return y5(d.Rape); });

svg5.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x5).tickSize(0).tickFormat(""));
     
  svg5.append("g")
      .call(d3.axisLeft(y5).tickSize(0).tickFormat(""));

svg5.append("g")
      .attr("transform", "translate(0, 0)")
      .call(d3.axisBottom(x).tickSize(0).tickFormat(""));

svg5.append("g")
      .attr("transform", "translate(" + width + ", 0)")
      .call(d3.axisLeft(y).tickSize(0).tickFormat(""));

});

svg5.append("text")
      .attr("text-anchor", "end")
      .attr("x", width-10)
      .attr("y", height-10)
      .text("# Rapes");

// // //////////////////////////////////////////////////////////////////
var margin6 = {top: 10, right: 15, bottom: 150, left: 20},
    width6 = 350 - margin.left - margin.right,
    height6 = 350 - margin6.top - margin6.bottom - 10;

var x6 = d3.scaleLinear()
          .range([0, width]);
var y6 = d3.scaleLinear()
          .range([height, 0]);

var svg6 = d3.select("body").append("svg")
    .attr("width", width6 + margin6.left + margin6.right + 110)
    .attr("height", height6 + margin6.top + margin6.bottom-150)
  .append("g")
    .attr("transform", 
           "translate(" + margin6.left + "," + margin6.top + ")");

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

data.forEach(function(d) {
    d.Rape = +d.Rape;
    d.Assault = +d.Assault;
    d.Murder = +d.Murder;
  });
  console.log(data);
  
  x6.domain(d3.extent(data, function(d) { return d.Murder; }));
  y6.domain(d3.extent(data, function(d) { return d.Rape; }));

svg6.selectAll("dot3")
      .data(data)
      .enter().append("circle")
      .attr("r", 5)
      .attr("cx", function(d) { return x6(d.Murder); })
      .attr("cy", function(d) { return y6(d.Rape); });

svg6.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x6).tickSize(0).tickFormat(""));

svg6.append("g")
      .call(d3.axisLeft(y6).tickSize(0).tickFormat(""));

svg6.append("g")
      .attr("transform", "translate(0, 0)")
      .call(d3.axisBottom(x).tickSize(0).tickFormat(""));

svg6.append("g")
      .attr("transform", "translate(" + width + ", 0)")
      .call(d3.axisLeft(y).tickSize(0).tickFormat(""));

});

//THIRD ROW///////////////////////////////////////////////////////////////////////////////////////////////

var margin7 = {top: 5, right: 15, bottom: 150, left: 100},
    width7 = 350 - margin.left - margin.right,
    height7 = 350 - margin7.top - margin7.bottom;

var x7 = d3.scaleLinear()
          .range([0, width]);
var y7 = d3.scaleLinear()
          .range([height, 0]);

var svg7 = d3.select("body").append("svg")
    .attr("width", width7 + margin7.left + margin7.right) //110
    .attr("height", height7 + margin7.top + margin7.bottom-150)
  .append("g")
    .attr("transform", 
          "translate(" + margin7.left + "," + margin7.top + ")");

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

data.forEach(function(d) {
    d.Rape = +d.Rape;
    d.Assault = +d.Assault;
    d.Murder = +d.Murder;
  });

x7.domain(d3.extent(data, function(d) { return d.Assault; }));
  y7.domain(d3.extent(data, function(d) { return d.Assault; }));

svg7.selectAll("dot")
      .data(data)
      .enter().append("circle")
      .attr("r", 5)
      .attr("cx", function(d) { return x7(d.Assault); })
      .attr("cy", function(d) { return y7(d.Assault); });

svg7.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x7));
     
  svg7.append("g")
      .call(d3.axisLeft(y7));

svg7.append("g")
      .attr("transform", "translate(0, 0)")
      .call(d3.axisBottom(x).tickSize(0).tickFormat(""));

svg7.append("g")
      .attr("transform", "translate(" + width + ", 0)")
      .call(d3.axisLeft(y).tickSize(0).tickFormat(""));

});

svg7.append("text")
      .attr("text-anchor", "end")
      .attr("x", width-10)
      .attr("y", height-10)
      .text("# Assaults");

///////////////////////////////////////////////////////////////////

var margin8 = {top: 5, right: 15, bottom: 150, left: 20},
    width8 = 350 - margin.left - margin.right,
    height8 = 350 - margin8.top - margin8.bottom;

var x8 = d3.scaleLinear()
          .range([0, width]);
var y8 = d3.scaleLinear()
          .range([height, 0]);

var svg8 = d3.select("body").append("svg")
    .attr("width", width8 + margin8.left + margin8.right)
    .attr("height", height8 + margin8.top + margin8.bottom-150)
  .append("g")
    .attr("transform", 
           "translate(" + margin8.left + "," + margin8.top + ")");

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

data.forEach(function(d) {
    d.Rape = +d.Rape;
    d.Assault = +d.Assault;
    d.Murder = +d.Murder;
  });
  
  x8.domain(d3.extent(data, function(d) { return d.Rape; }));
  y8.domain(d3.extent(data, function(d) { return d.Assault; }));

svg8.selectAll("dot2")
      .data(data)
      .enter().append("circle")
      .attr("r", 5)
      .attr("cx", function(d) { return x8(d.Rape); })
      .attr("cy", function(d) { return y8(d.Assault); });

svg8.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x8).tickFormat(d3.format("d")).ticks(3));

svg8.append("g")
      .call(d3.axisLeft(y8).tickSize(0).tickFormat(""));

svg8.append("g")
      .attr("transform", "translate(0, 0)")
      .call(d3.axisBottom(x).tickSize(0).tickFormat(""));

svg8.append("g")
      .attr("transform", "translate(" + width + ", 0)")
      .call(d3.axisLeft(y).tickSize(0).tickFormat(""));

});

///////////////////////////////////////////////////////////////////

var margin9 = {top: 5, right: 15, bottom: 150, left: 20},
    width9 = 350 - margin.left - margin.right,
    height9 = 350 - margin9.top - margin9.bottom;

var x9 = d3.scaleLinear()
          .range([0, width]);
var y9 = d3.scaleLinear()
          .range([height, 0]);

var svg9 = d3.select("body").append("svg")
    .attr("width", width9 + margin9.left + margin9.right)
    .attr("height", height9 + margin9.top + margin9.bottom-150)
  .append("g")
    .attr("transform", 
           "translate(" + margin9.left + "," + margin9.top + ")");

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

data.forEach(function(d) {
    d.Rape = +d.Rape;
    d.Assault = +d.Assault;
    d.Murder = +d.Murder;
  });
  
  x9.domain(d3.extent(data, function(d) { return d.Murder; }));
  y9.domain(d3.extent(data, function(d) { return d.Assault; }));

svg9.selectAll("dot2")
      .data(data)
      .enter().append("circle")
      .attr("r", 5)
      .attr("cx", function(d) { return x9(d.Murder); })
      .attr("cy", function(d) { return y9(d.Assault); });

svg9.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x9).tickFormat(d3.format("d")).ticks(2));
     
  svg9.append("g")
      .call(d3.axisLeft(y9).tickSize(0).tickFormat(""));
  svg9.append("g")
      .attr("transform", "translate(0, 0)")
      .call(d3.axisBottom(x).tickSize(0).tickFormat(""));

svg9.append("g")
      .attr("transform", "translate(" + width + ", 0)")
      .call(d3.axisLeft(y).tickSize(0).tickFormat(""));

});

</script>
</body>

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