xxxxxxxxxx
<!-- Used example posted in Piazza -->
<meta charset="utf-8">
<style>
</style>
<body>
<!-- load the d3.js library -->
<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