Table of Contents
The Stem and Leaf Plot Generator is a tool designed to visually represent a set of numerical data in an organized and efficient manner. It creates a stem and leaf plot, also known as a stem plot, which displays the individual data points as leaves attached to their corresponding stems. The purpose of this generator is to provide a clear and concise representation of data, making it easier to identify patterns, outliers, and distribution within the data set. This tool is particularly useful in statistical analysis and data interpretation, as it allows for a quick and comprehensive understanding of the data. Overall, the Stem and Leaf Plot Generator serves to simplify the process of data representation and analysis, making it a valuable resource for researchers, statisticians, and students alike.
Stem and Leaf Plot Generator
@import url(‘https://fonts.googleapis.com/css?family=Droid+Serif|Raleway’);
h1 {
color: black;
text-align: center;
margin-bottom: 0px;
margin-top: 15px;
font-family: ‘Raleway’, sans-serif;
}
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_summary {
padding-left: 70px;
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-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;
}
table {
border-collapse: collapse;
}
th:first-child, td:first-child {
border-right: 1px solid silver;
text-align: right;
}
td {
text-align: center;
}
thead td {
border-top: none;
}
th, td {
padding: 2px;
}
#text_area_input {
padding-left: 35%;
float: left;
}
A stem and leaf plot displays data by splitting up each value in a dataset into a “stem” and a “leaf.”
To learn how to make a stem and leaf plot by hand, read this tutorial.
To create a stem and leaf plot for a given dataset, enter your comma separated data in the box below:
//code to generate stem and leaf plot comes from https://www.rosettacode.org/wiki/Stem-and-leaf_plot
function calc() {
//remove current stem and leaf plot
var element = document.getElementsByTagName(‘table’)[0];
if(element) {element.parentNode.removeChild(element)}
var data = document.getElementById(‘input_data’).value.match(/d+/g).map(Number);
function has_property(obj, propname) {
return typeof(obj[propname]) === “undefined” ? false : true;
}
function compare_numbers(a, b) {return a-b;}
function stemplot(data, target) {
var stem_data = {};
var all_stems = [];
for (var i = 0; i < data.length; i++) {
var stem = Math.floor(data[i] / 10);
var leaf = Math.round(data[i] % 10);
if (has_property(stem_data, stem)) {
stem_data[stem].push(leaf);
} else {
stem_data[stem] = [leaf];
all_stems.push(stem);
}
}
all_stems.sort(compare_numbers);
var min_stem = all_stems[0];
var max_stem = all_stems[all_stems.length – 1];
var table = document.createElement(‘table’);
for (var stem = min_stem; stem <= max_stem; stem++) {
var row = document.createElement(‘tr’);
var label = document.createElement(‘th’);
row.appendChild(label);
label.appendChild(document.createTextNode(stem));
if (has_property(stem_data, stem)) {
stem_data[stem].sort(compare_numbers);
for (var i = 0; i < stem_data[stem].length; i++) {
var cell = document.createElement(‘td’);
cell.appendChild(document.createTextNode(stem_data[stem][i]));
row.appendChild(cell);
}
}
table.appendChild(row);
}
target.appendChild(table);
}
stemplot(data, document.getElementById(‘target’));
//insert header in table
var the_table = document.getElementsByTagName(‘table’)[0];
var header_insert = the_table.createTHead();
var row_insert = header_insert.insertRow(0);
var cell_insert = row_insert.insertCell(0);
var cell_insert2 = row_insert.insertCell(1);
cell_insert.innerHTML = “Stem”;
cell_insert2.innerHTML = “Leaf”;
} //end calc function