Table of Contents
A Scatterplot Generator is a software tool that automatically creates visual representations of data points on a two-dimensional graph. This graph, known as a scatter plot, is used to display the relationship between two variables, allowing for quick and easy analysis of the data. The generator uses algorithms to plot the data points accurately and can also customize the appearance of the graph, such as adding labels, axes, and colors. It is commonly used in statistics, research, and data analysis to identify patterns and trends in the data. The Scatterplot Generator is a valuable tool for both professionals and students to visualize and understand complex data sets.
Scatterplot Generator
@import url(‘https://fonts.googleapis.com/css?family=Droid+Serif|Raleway’);
.axis–y .domain {
display: none;
}
p {
color: black;
text-align: center;
margin-bottom: 15px;
margin-top: 15px;
font-family: ‘Raleway’, sans-serif;
}
#words {
padding-left: 30px;
color: black;
font-family: Raleway;
max-width: 550px;
margin: 25px auto;
line-height: 1.75;
}
#words_text {
color: black;
font-family: Raleway;
max-width: 550px;
margin: 25px auto;
line-height: 1.75;
}
#words_text_area {
display:inline-block;
color: black;
font-family: Raleway;
max-width: 550px;
margin: 25px auto;
line-height: 1.75;
padding-left: 100px;
}
#calcTitle {
text-align: center;
font-size: 20px;
margin-top: 15px;
margin-bottom: 0px;
font-family: ‘Raleway’, serif;
}
#hr_top {
width: 30%;
margin-bottom: 0px;
border: none;
height: 2px;
color: black;
background-color: black;
}
#hr_bottom {
width: 30%;
margin-top: 15px;
border: none;
height: 2px;
color: black;
background-color: black;
}
label, input {
display: inline-block;
vertical-align: baseline;
width: 350px;
}
#button {
border: 1px solid;
border-radius: 10px;
margin-top: 20px;
cursor: pointer;
outline: none;
background-color: white;
color: black;
font-family: ‘Work Sans’, sans-serif;
border: 1px solid grey;
/* Green */
}
#button:hover {
background-color: #f6f6f6;
border: 1px solid black;
}
#words_table {
color: black;
font-family: Raleway;
max-width: 350px;
margin: 25px auto;
line-height: 1.75;
}
#summary_table {
color: black;
font-family: Raleway;
max-width: 550px;
margin: 25px auto;
line-height: 1.75;
padding-left: 20px;
}
.label_radio {
text-align: center;
}
#text_area_input {
padding-left: 35%;
float: left;
}
textarea, textarea:focus {
margin-right: 5px;
width: 85px;
outline: 1px solid #aeaeae;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
h1 {
text-align: center;
font-size: 50px;
margin-bottom: 0px;
font-family: ‘Raleway’, serif;
}
A scatterplot is used to display the relationship between two variables.
To create a scatterplot for variables X and Y, simply enter the values for the variables in the boxes below, then press the “Generate Scatterplot” button.
//create function that performs calculations
function calc() {
d3.select(“svg”).remove();
//get data
var x = document.getElementById(‘x’).value.match(/d+/g).map(Number);
var y = document.getElementById(‘y’).value.match(/d+/g).map(Number);
var data = [];
for (var i=0; i < x.length; i++) {
data.push({
asd: x[i],
aror: y[i]
});
}
//get selected color
var color = document.getElementById(‘scatterColor’).value;
//create scatterplot
var body = d3.select(‘#chart’)
var margin = { top: 50, right: 50, bottom: 50, left: 50 }
var h = 500 – margin.top – margin.bottom
var w = 500 – margin.left – margin.right
// Scales
var xScale = d3.scale.linear()
.domain([
d3.min([0,d3.min(data,function (d) { return d.asd })]),
d3.max([0,d3.max(data,function (d) { return d.asd })+5])
])
.range([0,w])
var yScale = d3.scale.linear()
.domain([
d3.min([0,d3.min(data,function (d) { return d.aror })]),
d3.max([0,d3.max(data,function (d) { return d.aror })+5])
])
.range([h,0])
// SVG
var svg = body.append(‘svg’)
.attr(‘height’,h + margin.top + margin.bottom)
.attr(‘width’,w + margin.left + margin.right)
.append(‘g’)
.attr(‘transform’,’translate(‘ + margin.left + ‘,’ + margin.top + ‘)’)
// X-axis
var xAxis = d3.svg.axis()
.scale(xScale)
.ticks(5)
.orient(‘bottom’)
// Y-axis
var yAxis = d3.svg.axis()
.scale(yScale)
.ticks(5)
.orient(‘left’)
// Circles
var circles = svg.selectAll(‘circle’)
.data(data)
.enter()
.append(‘circle’)
.attr(‘cx’,function (d) { return xScale(d.asd) })
.attr(‘cy’,function (d) { return yScale(d.aror) })
.attr(‘r’,’6′)
.attr(‘stroke’,’black’)
.attr(‘stroke-width’,1)
.attr(‘fill’, color);
// X-axis
svg.append(‘g’)
.attr(‘class’,’axis’)
.attr(‘transform’, ‘translate(0,’ + h + ‘)’)
.call(xAxis)
.append(‘text’) // X-axis Label
.attr(‘class’,’label’)
.attr(‘y’,-10)
.attr(‘x’,w)
.attr(‘dy’,’.71em’)
.style(‘text-anchor’,’end’)
.text(‘X’)
// Y-axis
svg.append(‘g’)
.attr(‘class’, ‘axis’)
.call(yAxis)
.append(‘text’) // y-axis Label
.attr(‘class’,’label’)
.attr(‘transform’,’rotate(-90)’)
.attr(‘x’,0)
.attr(‘y’,5)
.attr(‘dy’,’.71em’)
.style(‘text-anchor’,’end’)
.text(‘Y’)
} //end calc